<section class="homepage-courses-wrapper width-limit">
  <div class="homepage-filter">
    <div class="filter-item body-s strong filter-item-active" filter-items="latest" onclick='filterHomepage(this)'>
      <span class="lang-en">Latest activity</span>
      <span class="lang-de">Letzte Aktivität</span>
      <span class="lang-es">Última actividad</span>
      <span class="lang-fr">Dernière activité</span>
      <span class="lang-br">Actividade mais recente</span>
    </div>
    <div class="filter-item body-s strong" filter-items="in-progress" onclick='filterHomepage(this)'>
      <span class="lang-en">In progress</span>
      <span class="lang-de">In Arbeit</span>
      <span class="lang-es">En curso</span>
      <span class="lang-fr">En cours</span>
      <span class="lang-br">Em andamento</span>
    </div>
    <div class="filter-item body-s strong" filter-items="completed" onclick='filterHomepage(this)'>
      <span class="lang-en">Completed</span>
      <span class="lang-de">Abgeschlossen</span>
      <span class="lang-es">Completado</span>
      <span class="lang-fr">Complété</span>
      <span class="lang-br">Concluído</span>
    </div>
    <div class="filter-item body-s strong" filter-items="my-list" onclick='filterHomepage(this)'>
      <span class="lang-en">My list</span>
      <span class="lang-de">Meine Liste</span>
      <span class="lang-es">Mi lista</span>
      <span class="lang-fr">Ma liste</span>
      <span class="lang-br">Minha lista</span>
    </div>
  </div>
  
  <div class="homepage-courses-sections-wrapper">
    <div class="homepage-courses-section" filter-name="latest">
      <div class="homepage-courses-subsection homepage-courses-subsection-courses">
        <h3 class="homepage-courses-section-title">
          <span class="lang-en">Your latest courses</span>
          <span class="lang-de">Ihre letzten Kurse</span>
          <span class="lang-es">Sus últimos cursos</span>
          <span class="lang-fr">Vos derniers cours</span>
          <span class="lang-br">Seus últimos cursos</span>
        </h3>
        <div class="homepage-courses-list">
          {% assign any_course = false %}
          {% for course in courses.enrolled %}
            {% if course.ribbon != "VIDEO" %}
              {% if current_person.properties.latest_courses contains course.id %}
                {% assign any_course = true %}
                {% include 'cards_course_homepage' %}
              {% endif %}
            {% endif %}
          {% endfor %}
        </div>
      </div>
      {% unless any_course %}
        <style>
          .homepage-courses-subsection-courses {
            display: none;
          }
        </style>
      {% endunless %}
      
      <div class="homepage-courses-subsection homepage-courses-subsection-tutorials">
        <h3 class="homepage-courses-section-title">
          <span class="lang-en">Your latest tutorials</span>
          <span class="lang-de">Ihre neuesten Tutorials</span>
          <span class="lang-es">Tus últimos tutoriales</span>
          <span class="lang-fr">Vos derniers tutoriels</span>
          <span class="lang-br">Seus últimos tutoriais</span>
        </h3>
        <div class="homepage-courses-list">
          {% assign any_course = false %}
          {% for course in courses.in_catalog %}
            {% if course.ribbon == "VIDEO" %}
              {% if current_person.properties.latest_tutorials contains course.id %}
                {% assign any_course = true %}
                {% include 'cards_course_homepage' %}
              {% endif %}
            {% endif %}
          {% endfor %}
        </div>
      </div>
    </div>
    {% if any_course %}
      <style>
        .homepage-courses-subsection-courses {
          padding-bottom: 60px;
          border-bottom: 1px solid #E1E1FF;
          margin-bottom: 60px;
        }
        @media only screen and (min-width: 768px) {
          .homepage-courses-subsection-courses {
            padding-bottom: 80px;
            margin-bottom: 80px;
          }
        }
      </style>
    {% else %}
      <style>
        .homepage-courses-subsection-tutorials {
          display: none;
        }
      </style>
    {% endif %}
    
    <div class="homepage-courses-section filter-hidden" filter-name="in-progress">
      <h3 class="homepage-courses-section-title">
        <span class="lang-en">Courses waiting for you to finish</span>
        <span class="lang-de">Kurse, die Sie noch beenden müssen</span>
        <span class="lang-es">Cursos a la espera de que termine</span>
        <span class="lang-fr">Cours en attente d'être complétés</span>
        <span class="lang-br">Cursos esperando por você para terminar</span>
      </h3>
      <div class="homepage-courses-list">
        {% for course in courses.enrolled %}
          {% if course.completed? == false and course.started? %}
            {% include 'cards_course_homepage' %}
          {% endif %}
        {% endfor %}
      </div>
    </div>
    
    <div class="homepage-courses-section filter-hidden" filter-name="completed">
      <h3 class="homepage-courses-section-title">
        <span class="lang-en">Courses you completed</span>
        <span class="lang-de">Abgeschlossene Kurse</span>
        <span class="lang-es">Cursos realizados</span>
        <span class="lang-fr">Les cours que vous avez suivis</span>
        <span class="lang-br">Cursos que você completou</span>
      </h3>
      <div class="homepage-courses-list">
        {% for course in courses.enrolled %}
          {% if course.completed? %}
            {% include 'cards_course_homepage' %}
          {% endif %}
        {% endfor %}
      </div>
    </div>
    
    <div class="homepage-courses-section filter-hidden" filter-name="my-list">
      <h3 class="homepage-courses-section-title">
        <span class="lang-en">All your courses</span>
        <span class="lang-de">Alle Ihre Kurse</span>
        <span class="lang-es">Todos sus cursos</span>
        <span class="lang-fr">Tous vos cours</span>
        <span class="lang-br">Todos os seus cursos</span>
      </h3>
      <div class="homepage-courses-list">
        {% for course in courses.enrolled %}
          {% if course.ribbon != 'VIDEO' %}
            {% include 'cards_course_homepage' %}
          {% endif %}
        {% endfor %}
      </div>
    </div>
  </div>
</section>

<style>
  .homepage-courses-wrapper {
    padding-top: 20px;
    padding-bottom: 40px;
  }
  .homepage-filter {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding-bottom: 20px;
  }
  .filter-item {
    border: 2px solid #E4E6E9;
    border-radius: 300px;
    padding: 10px 20px;
    white-space: nowrap;
    color: #656E7A;
    cursor: pointer;
  }
  .filter-item-active {
    color: var(--green);
    border: 2px solid var(--green);
    pointer-events: none;
  }
  .filter-hidden {
    display: none;
  }
  .homepage-courses-section-title {
    padding-bottom: 20px;
  }
  @media only screen and (min-width: 768px) {
    .homepage-courses-wrapper {
      padding-top: 40px;
      padding-bottom: 80px;
    }
    .homepage-filter {
      padding-bottom: 40px;
    }
    .homepage-courses-section-title {
      padding-bottom: 40px;
    }
  }
  /* homepage cards */
  .homepage-card {
    width: 100%;
    margin-bottom: 40px;
  }
  .homepage-card-wrapper:last-child .homepage-card {
    margin-bottom: 0;
  }
  .homepage-card:hover .homepage-card-title {
    text-decoration: underline;
  }
  .homepage-card-image {
    width: 100%;
    object-fit: contain;
    border-radius:4px;
  }
  .homepage-card-body {
    margin-bottom:10px;
  }
  .homepage-card-body-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
  }
  .homepage-card-info {
    display: flex;
    justify-content: space-between;
  }
  .homepage-card-progress-bar {
    background: #DADDE1;
    height: 2px;
    width: 100%;
    border-radius: 4px;
  }
  .homepage-card-progress-bar-fill {
    background: var(--green);
    height: 2px;
    border-radius: 4px;
    min-width: 4px;
  }
  .homepage-card-activities {
    color: #656E7A;
  }
  .homepage-card-title {
    line-height:26px;
    margin-bottom:10px;
  }
  .homepage-card-progress-value {
    color: var(--green);
  }
  .homepage-card-time {
    color: #656E7A;
  }
  .homepage-card-button {
    height: 42px;
    width: auto;
  }
  @media only screen and (min-width: 768px) {
    .homepage-card {
      display: flex;
      gap: 40px;
    }
    .homepage-card-image {
      width: 30%;
      max-width: 207px;
    }
    .homepage-card-body {
      display: flex;
      justify-content: space-between;
      align-items:flex-end;
    }
    .homepage-card-title {
      margin-bottom:0;
    }
  }
</style>

<script>
  function filterHomepage(element) {
    document.querySelector('.filter-item-active').classList.remove('filter-item-active');
    element.classList.add('filter-item-active');
    document.querySelectorAll('.homepage-courses-section').forEach(section => {
      if (section.getAttribute('filter-name') === element.getAttribute('filter-items')) {
        section.classList.remove('filter-hidden');
      } else {
        section.classList.add('filter-hidden');
      }
    });
  }
  
  addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.homepage-courses-section').forEach(courseSection => {
      let courseList = courseSection.querySelector('.homepage-courses-list');
      let filterButton = document.querySelector(`[filter-items=${courseSection.getAttribute('filter-name')}]`);
      if (courseList.childElementCount === 0) {
        filterButton.classList.add('np-hidden');
        filterButton.classList.remove('filter-item-active');
        if (!courseSection.classList.contains('filter-hidden')) {
          courseSection.classList.add('filter-hidden');
        }
      } else {
        if (!document.querySelector('.filter-item-active')) {
          filterButton.classList.add('filter-item-active');
          courseSection.classList.remove('filter-hidden');
        }
      }
    });
  });
</script>
