<header class="school-website-header uk-z-4">
  <div class="uk-container-expand">
    <nav class="uk-navbar" data-behavior="dropdown">
      <a href="{{ current_school.logo_navigation_url }}" class="uk-brand">
        {% if current_school.logo_url %}
          <img src="{{ current_school.logo_url }}" alt="{{ current_school.name }}">
        {% else %}
          <span class="uk-text-large uk-text-bold">{{ current_school.name }}</span>
        {% endif %}
      </a>
      <div class="uk-navbar-flip">
        <ul class="uk-navbar-nav uk-hidden-small">
          {% for website_navigation in header_navigations %}
            <!--<li>
              <a href="{{ website_navigation.path }}" {% if website_navigation.external? %} target="_blank" {% endif %}>
                {{ website_navigation.name }}
              </a>
            </li>-->
          {% endfor %}

          {% search %}
            <li class="uk-padding-top">
              {% include "search_form" with "" %}
            </li>
          {% endsearch %}

          {% catalog_search %}
            <li class="uk-padding-top">
              {% include "catalog_search_form" with "" %}
            </li>
          {% endcatalog_search %}

          {% if current_person.signed_in? %}
            
            <!--<li>
              <a class="menu-profile-link" href="{{ routes.my_profile_path }}">Profile</a>
            </li>-->
            <li>
              <a href="#" class="uk-button uk-button-primary get-in-touch-btn" id="get-in-touch">GET IN TOUCH</a></li>
            </li>
            <li>
              <a href="{{ routes.log_out_path }}" class="profile-icon" data-method="delete" rel="nofollow"><img src="http://dvtemp.doubleverify.com/wp-content/uploads/2020/09/header-profile-icon.svg" alt="{{ current_person.name }}"> <span>{% t .log_out %}</span></a>
            </li>
          {% else %}
            <li><a href="{{ routes.log_in_path }}">{% t .log_in %}</a></li>
          {% endif %}
        </ul>
        <div class="uk-visible-small">
          {% search %}
            <button class="uk-button uk-button-link uk-navbar-toggle mobile-search-toggle mobile-navbar-toggle" data-uk-toggle="{target:'#mobile-search'}">
            </button>
          {% endsearch %}

          {% catalog_search %}
            <button class="uk-button uk-button-link uk-navbar-toggle mobile-search-toggle mobile-navbar-toggle" data-uk-toggle="{target:'#mobile-search'}">
            </button>
          {% endcatalog_search %}
          <a href="#mobile-nav" class="mobile-navbar-toggle uk-navbar-toggle" data-uk-offcanvas></a>
        </div>
      </div>
    </nav>
  </div>
</header>

<div class="overlay highlight-overlay" id="overlay">
  <div class="overlay-table">
    <div class="overlay-cell">    
      <div class="overlay-container">
        <button class="overlay-close button-close" id="close-btn" type="button">Close Overlay</button>
        <div class="overlay-main-content">
          <p class="overlay-description">For any questions about DV University or DoubleVerify, please contact <a href="mailto:dvusupport@doubleverify.com">dvusupport@doubleverify.com</a></p>
        </div>
      </div>    
    </div>
  </div>
</div>

<script>
  var closebtn = document.getElementById('close-btn');
  var overlay = document.getElementById('overlay');
  var getin_touch = document.getElementById('get-in-touch');
  getin_touch.onclick = function(){
    overlay.classList.add('active');
    return false;
  }
  closebtn.onclick = function(){
    overlay.classList.remove('active');
  }
</script>

{% search %}
  <div id="mobile-search" class="school-website-header uk-visible-small uk-position-top uk-padding uk-block-default uk-flex uk-border-bottom {% if hide_search_box %}uk-hidden {% endif %}">
    {% include "search_form" with "" %}
    <a class="uk-button uk-button-link" href="{{ routes.my_content_path }}">{% t .cancel %}</a>
  </div>
{% endsearch %}

{% catalog_search %}
  <div id="mobile-search" class="school-website-header uk-visible-small uk-position-top uk-padding uk-block-default uk-flex uk-border-bottom {% if hide_search_box %}uk-hidden {% endif %}">
    {% include "catalog_search_form" with "" %}
    <a class="uk-button uk-button-link" href="{{ routes.school_website_catalog_path }}">{% t .cancel %}</a>
  </div>
{% endcatalog_search %}

<div id="mobile-nav" class="uk-offcanvas">
  <div class="uk-offcanvas-bar uk-offcanvas-bar-flip">
    <ul class="uk-nav uk-nav-offcanvas" data-uk-nav>
      {% for website_navigation in header_navigations %}
        <li>
          <a href="{{ website_navigation.path }}" {% if website_navigation.external? %} target="_blank" {% endif %}>
            {{ website_navigation.name }}
          </a>
        </li>
      {% endfor %}

      {% if current_person.signed_in? %}
        <li><a href="{{ routes.my_content_path }}">{{ current_school.my_content_label }}</a></li>
        <li><a href="{{ routes.my_profile_path }}">{% t .my_profile %}</a></li>
        <li class="uk-nav-divider"></li>
        <li><a href="{{ routes.log_out_path }}" data-method="delete" rel="nofollow">{% t .log_out %}</a></li>
      {% else %}
        <li><a href="{{ routes.log_in_path }}">{% t .log_in %}</a></li>
      {% endif %}
    </ul>
  </div>
</div>

{% if preview_banner %}
  {{ preview_banner }}
{% endif %}

<div class="my-course-banner"></div>
<div class="uk-container uk-container-center">
  <div class="uk-padding-horizontal">
    <div class="my-course-banner-content">
      <h3 class="custom-title">{{ course.name }}</h3>
      <p>{{ course.full_description }}</p>

      {% if course.learner_can_retake? %}
        <form action="{{ course.course_attempts_path }}" method="POST" onsubmit="retakeButton.disabled = true;">
          <p class="course-continue-cta">
            <button type="submit" class="uk-button completion-button continue-start-btn" data-test="retake-course-button" name="retakeButton">{{ course.retake_course }}</button>
          </p>
        </form>
      {% else %}
        <p class="course-continue-cta">
          {% if course.progress == 0 %}
            <a href="{{ course.outline_path }}" class="continue-start-btn uk-button uk-button-primary uk-position-bottom-right">Begin Course <span>&raquo;</span></a>
          {% endif %}

          {% if course.progress > 0 %}
            <a href="{{ course.outline_path }}" class="continue-start-btn uk-button uk-button-primary uk-position-bottom-right">Resume Course <span>&raquo;</span></a>
          {% endif %}
        </p>
      {% endif %}

      <a href="/my_dashboard" class="course-back-btn">See All Courses</a>
    </div>
  </div>
</div>
          
<div class="uk-container course-outline-container uk-container-center uk-padding-large">
  {% if current_school.filtering_enabled? %}
    <h3 class="uk-margin-remove">{{ course.course_category_names }}</h3>
  {% endif %}

  <div{% if course.has_outline? %} class="uk-grid uk-grid-large"{% endif %}>

    {% if course.has_outline? %}
      <div class="uk-width-medium-1-1">
        <h3 class="custom-title" id="h3-course-outline">{{ course.outline_label }}</h3>

        <div class="course-progress-block">
          {% if course.progress == 0 %}
            <div class="not-started">
              <span class="progress-text">Unstarted</span>
              <div class="uk-progress uk-margin-small-top uk-margin-small-bottom"><div class="uk-progress-bar" style="width: 100%; max-width: 100%;"></div></div>
            </div>
          {% endif %}

          {% if course.progress > 0 and course.progress < 100 %}
            <div class="in-progress">
              <span class="progress-text">In Progress</span>
              <div class="uk-progress uk-margin-small-top uk-margin-small-bottom"><div class="uk-progress-bar" style="width: 100%; max-width: 100%;"></div></div>
            </div>
          {% endif %}

          {% if course.progress == 100 %}
            <div class="course-completed">
              <span class="progress-text">Completed</span>
              <div class="uk-progress uk-margin-small-top uk-margin-small-bottom"><div class="uk-progress-bar" style="width: 100%; max-width: 100%;"></div></div>
            </div>
          {% endif %}
          
        </div>

        <ol class="uk-list cover-outline">
          {% for section in learner_syllabus.sections %}
            <li class="course-activity-section">
              <div class="uk-grid">
                <div class="uk-width-small-1-1 uk-width-medium-1-2">
                  <h3 class="custom-title">{{ section.name }}</h3>
                </div>

                <div class="uk-width-small-1-1 uk-width-medium-1-2">
                  {% if section.will_be_published? %}
                    <div class="uk-margin-top">
                      {% t .scheduled_info %} {{ section.published_at }}
                    </div>
                  {% else %}
                    <ol class="uk-list cover-outline-section-activities">
                      {% for activity in section.activities %}
                        <li class="{% if activity.completed? %}completed {% endif %}{% if activity.locked? %}locked{% endif %}" >
                          {% if activity.locked? %}
                            <span>
                              {% if activity.milestone? %}
                                <i class="uk-icon-flag"></i>
                              {% endif %}
                              {{ activity.title }}
                            </span>
                          {% else %}
                            <a href="{{ activity.path }}">
                              {% if activity.milestone? %}
                                <i class="uk-icon-flag"></i>
                              {% endif %}
                              {{ activity.title }}
                            </a>
                          {% endif %}
                        </li>
                      {% endfor %}
                    </ol>
                  {% endif %}
                </div>
              </div>
            </li>
          {% endfor %}
        </ol>

      </div>
    {% endif %}
  </div>
</div>

<footer class="footer-main">
  <div class="uk-container uk-container-center">
    <div class="uk-grid uk-padding-large-left uk-padding-large-right">
      <div class="uk-width-small-1-1 footer-logo">
        <a href="https://doubleverify.com" class="logo-main"><img src="https://doubleverify.com/wp-content/uploads/2019/10/colour.svg" width="190" alt="image"></a>
      </div>
    </div>
  </div>
</footer>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>
let courseLang = "{{ current_person.properties.language | downcase  }}";

  const courseIdMap = {
    "{{ course.id }}" : courseLang
  };

  const spanishLang = {
    "Begin Course": "Empezar el curso",
    "Unstarted": "Sin iniciar",
    "Course Outline": "Descripción del curso",
    "See All Courses": "Ver todos los cursos",
    "Resume Course": "Reanudar el curso",
    "Description": "En este curso, exploraremos las herramientas disponibles que ayudan a los anunciantes a autenticar sus anuncios programáticos. Además, aprenderá cómo los compradores de pre-bid pueden usar los servicios programáticos de DoubleVerify para desarrollar una línea base de calidad y aumentar el rendimiento usando los segmentos correspondientes."
  };
  const japaneseLang = {
    "Begin Course": "コースを始める",
    "Unstarted": "開始前",
    "Course Outline": "学習パスの概要",
    "See All Courses": "全てのコースを見る",
    "Resume Course": "コースを再開する",
    "Description": "ここでは、Blueprintを送信するために作成した各種設定を結びつけ、キャンペーンの様々なニーズに合わせてDVのタグがどのようにリクエストされ実装されるかを学びます。（30分）"
  };
  const russianLang = {
    "Begin Course": "Начатькурс",
    "Unstarted": "Неначат",
    "Course Outline": "Описаниекурса",
    "See All Courses": "Смотретьвсекурсы",
    "Resume Course": "Возобновитькурс",
    "Description": "Узнайте, как DV Pinnacle® дает возможность анализировать качество каждого рекламного объявления (и при этом поддерживает все платформы покупок медиарекламы, устройства и форматы) с применением динамического создания отчетов о ходе рекламной кампании. Из этого курса мы узнаем, как работать с инструментами IQ Performance, благодаря которым можно повысить качество рекламного инвентаря, графику и/или каналы для достижения целей по эффективности. (45 мин)"
  };
    
  const germanLang = {
    "Begin Course": "Kurs Starten",
    "Unstarted": "Nicht Angefangen",
    "Course Outline": "Kursübersicht",
    "See All Courses": "ALLE KURSE ANSEHEN",
    "Resume Course": "Kurs fortsetzen"
  };

   const frenchLang = {
    "Begin Course": "Commencer Le Cours",
    "Unstarted": "Pas Commencé",
    "Course Outline": "Plan de cours",
    "See All Courses": "Voir tous les cours",
    "Resume Course": "Reprendre le cours"
  };

  const englishLang = {
      "Description": "In this course, you will learn to navigate and use IQ Performance tools that allow you to optimize inventory, creatives and/or channels to meet your performance goals. (45 mins)"
  };

  let activityID = window.location.href.split("/")[4];
  let onCoverPage = window.location.href.indexOf("/cover") > -1;


  $(document).ready(function() {
        var beginButton = $("a.continue-start-btn.uk-button.uk-button-primary.uk-position-bottom-right");
        var unstartedLabel = $("span.progress-text");
        var outlineHeader = $("#h3-course-outline");
        var seeAllCoursesHeader = $("a.course-back-btn");
        var resumeButton = $("");

        if(courseIdMap[activityID] === "spanish" && onCoverPage) {

          $(beginButton).html(spanishLang["Begin Course"]);
          $(unstartedLabel).html(spanishLang["Unstarted"]);
          $(outlineHeader).html(spanishLang["Course Outline"]);
          $(seeAllCoursesHeader).html(spanishLang["See All Courses"]);
          $(resumeButton).html(spanishLang["Resume Course"]);
          
        }

        else if (courseIdMap[activityID] === "japanese" && onCoverPage) {
          $(beginButton).html(japaneseLang["Begin Course"]);
          $(unstartedLabel).html(japaneseLang["Unstarted"]);
          $(outlineHeader).html(japaneseLang["Course Outline"]);
          $(seeAllCoursesHeader).html(japaneseLang["See All Courses"]);
          $(resumeButton).html(japaneseLang["Resume Course"]);
          
        }

        else if (courseIdMap[activityID] === "russian" && onCoverPage) {
          $(beginButton).html(russianLang["Begin Course"]);
          $(unstartedLabel).html(russianLang["Unstarted"]);
          $(outlineHeader).html(russianLang["Course Outline"]);
          $(seeAllCoursesHeader).html(russianLang["See All Courses"]);
          $(resumeButton).html(russianLang["Resume Course"]);
        }

        else if (courseIdMap[activityID] === "german" && onCoverPage) {
          $(beginButton).html(germanLang["Begin Course"]);
          $(unstartedLabel).html(germanLang["Unstarted"]);
          $(outlineHeader).html(germanLang["Course Outline"]);
          $(seeAllCoursesHeader).html(germanLang["See All Courses"]);
          $(resumeButton).html(germanLang["Resume Course"]);
        }

         else if (courseIdMap[activityID] === "french" && onCoverPage) {
          $(beginButton).html(frenchLang["Begin Course"]);
          $(unstartedLabel).html(frenchLang["Unstarted"]);
          $(outlineHeader).html(frenchLang["Course Outline"]);
          $(seeAllCoursesHeader).html(frenchLang["See All Courses"]);
          $(resumeButton).html(frenchLang["Resume Course"]);
        }

  });

</script>

{% assign lang = current_person.properties.language %}
{% case lang %}
  {% when "Spanish" %}
     {% include "spanish_lang" %}
  {% when "Japanese" %}
     {% include "japanese_lang" %}
  {% when "Russian"%}
     {% include "russian_lang" %}
  {% when "German"%}
    {% include "german_lang" %}
  {% when "French"%}
    {% include "french_lang" %}
{% endcase %}