{% include "back_button" %}
{% include "event_banner" %}
{% include "course_version_outdated_alert"
  , courses: courses.enrolled %}
{% assign hasInProgressCourses = false %}
{% for course in courses.enrolled %}
  {% if course.progress > 0 and course.progress < 100 %}
    {% assign hasInProgressCourses = true %}
    {% break %}
  {% endif %}
{% endfor %}
<main class="np-main np-dashboard np-subpage-container np-max-width">
  <div class="dashboard-greeting">
    <span class="lang-en">Hi</span>
    <span class="lang-es">Hola</span>
    {% if current_person.first_name %}
      {{ current_person.first_name }}{% endif %}!
  </div>
  <div
    class="dashboard-quality-score"
    id="dashboard-quality-score"
    style="visibility: hidden;">
    <span class="lang-en">Consider taking some lessons below.</span>
    <span class="lang-es">Considera tomar algunas lecciones a continuación.</span>
  </div>

  {% if hasInProgressCourses %}
    {% include "carrot_button"
      , buttonUrl: "/app/dashboard"
      , buttonText: "In progress"
      , buttonTextEs: "En progreso" %}
  {% endif %}

  <div
    class="global-section-title"
    id="lessons-header"
    style="visibility: hidden;">
    <span class="lang-en">Your lessons</span>
    <span class="lang-es">Tus lecciones</span>
  </div>
  {% include "courses_carousel"
    , breakpoint: 768
    , showOnlyInProgress: false
    , hideOnlyCompleted: true
    , sortByPriority: true
    , showAllOnNoResults: false
    , minified: false %}
  {% if features.learning_paths? %}
    <div
      class="global-section-title"
      id="learning-paths-header"
      style="visibility: hidden;">
      <span class="lang-en">Your learning paths</span>
      <span class="lang-es">Tus rutas de aprendizaje</span>
    </div>
    {% include "learning_paths_carousel"
      , breakpoint: 768
      , showOnlyInProgress: false
      , sortByPriority: true
      , showAllOnNoResults: false
      , hideOnlyCompleted: true
      , minified: false %}
  {% endif %}


  <div id="congratulations-container" style="display: none;">
    <img
      src="https://s3.us-east-1.amazonaws.com/static.northpass.com/Instacart/trophy+arm.svg"
      alt="Congratulations"
      class="congratulations-icon">
    <div class="global-section-title">
      <span class="lang-en">Congratulations!</span>
      <span class="lang-es">¡Felicidades!</span>
    </div>
    <div>
      <span class="lang-en">You completed all available lessons. Consider refreshing your skills by retaking some lessons.</span>
      <span class="lang-es">Has completado todas tus lecciones. Considera actualizar tus habilidades repitiendo algunas lecciones.</span>
    </div>
    {% include "carrot_button"
      , buttonUrl: "/app/catalog"
      , buttonText: "Retake lessons"
      , buttonTextEs: "Repetir lecciones" %}
  </div>
  {% include "homepage_achievments" %}
</main>
{% include "footer" %}

<style>
  .dashboard-greeting {
    font-size: 2.2rem;
    font-weight: 700;
    color: {{ color_palette.header_color }};
    /* matches your brand green */
    margin-top: 32px;
    margin-bottom: 8px;
    letter-spacing: -1px;
    line-height: 1.1;
  }

  @media (max-width: 768px) {
    .dashboard-greeting,
    .dashboard-quality-score,
    #congratulations-container {
      text-align: center;
    }
    .dashboard-greeting {
      font-size: 1.5rem;
      margin-top: 20px;
    }
  }

  .dashboard-quality-score {
    font-size: 1.2rem;
    color: #555;
    margin-bottom: 16px;
  }

  #congratulations-container > img {
    width: 80vw;
    max-width: 300px;
    margin-bottom: 16px;
  }

</style>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const carousel = document.querySelector('.course-carousel-container');
    const lessonsHeader = document.getElementById('lessons-header');
    let hiddenSectionsCount = 0;
    if(carousel.children.length === 0) {
      lessonsHeader.style.display = 'none';
      hiddenSectionsCount++;
    }else{
      lessonsHeader.style.visibility = 'visible';
    }
    const pathsCarousel = document.querySelector('.paths-carousel-container');
    const learningPathsHeader = document.getElementById('learning-paths-header');

    if(pathsCarousel.children.length === 0) {
      learningPathsHeader.style.display = 'none';
      hiddenSectionsCount++;
    }else{
      learningPathsHeader.style.visibility = 'visible';
    }
    const dashboardQualityScore = document.getElementById('dashboard-quality-score');
    if(hiddenSectionsCount === 2) {
      dashboardQualityScore.style.display = 'none';
      const congratulationsContainer = document.getElementById('congratulations-container');
      congratulationsContainer.style.display = 'block';
    }else{
      dashboardQualityScore.style.visibility = 'visible';
    }
  });
</script>