{% assign categories_uuids = "" %}
{% assign categories_names = "" %}
{% for course in courses.in_catalog %}
  {% if course.categories.size > 0 and course.ribbon != "VIDEO" and course.properties.featured == false %}
    {% assign course_categories_ids = course.categories | map: 'id' | join: "|||" %}
    {% assign course_categories_names = course.categories | map: 'name' | join: "|||" %}
    {% assign categories_uuids = categories_uuids | append: course_categories_ids | append: "|||" %}
    {% assign categories_names = categories_names | append: course_categories_names | append: "|||" %}
  {% endif %}
{% endfor %}
{% assign categories_uuids = categories_uuids | split: "|||" | uniq %}
{% assign categories_names = categories_names | split: "|||" | uniq %}

<div class="courses-hidden np-hidden">
  {% for x in (1..categories_uuids.size) %}
    {% assign number_of_videos = 0 %}
    {% assign y = x | minus: 1 %}
    {% assign category_uuid = categories_uuids | slice: y %}
    <section class="courses-section" item-categories="{{ category_uuid }}">
      <div class="courses-section-header">
        <h3 class="courses-title strong">
        {% assign category_name = categories_names | slice: y %}

        {% if category_name contains 'Pipedrive courses' %}
          <span class="lang-en">Pipedrive courses</span>
          <span class="lang-de">Pipedrive Kurse</span>
          <span class="lang-es">Cursos de Pipedrive</span>
          <span class="lang-fr">Cours de Pipedrive</span>
          <span class="lang-br">Cursos de Pipedrive</span>
        {% elsif category_name contains 'Sales courses' %}
          <span class="lang-en">Sales courses</span>
          <span class="lang-de">Vertriebskurse</span>
          <span class="lang-es">Cursos de Ventas</span>
          <span class="lang-fr">Cours de Vente</span>
          <span class="lang-br">Cursos de Vendas</span>
        {% elsif category_name contains 'Marketing courses' %}
          <span class="lang-en">Marketing courses</span>
          <span class="lang-de">Marketingkurse</span>
          <span class="lang-es">Cursos de Marketing</span>
          <span class="lang-fr">Cours de Marketing</span>
	  <span class="lang-br">Cursos de Marketing</span>
	{% elsif category_name contains 'Automations' %}
          <span class="lang-en">Automations</span>
          <span class="lang-de">Automatisierungen</span>
          <span class="lang-es">Automatizaciones</span>
          <span class="lang-fr">Automatisations</span>
	  <span class="lang-br">Automações</span>
	{% elsif category_name contains 'Campaigns' %}
          <span class="lang-en">Campaigns</span>
          <span class="lang-de">Kampagnen</span>
          <span class="lang-es">Campañas</span>
          <span class="lang-fr">Campagnes</span>
	  <span class="lang-br">Campanhas</span>
	{% elsif category_name contains 'Data import' %}
          <span class="lang-en">Data import</span>
          <span class="lang-de">Datenimport</span>
          <span class="lang-es">Importación de datos</span>
          <span class="lang-fr">Importation de données</span>
	  <span class="lang-br">importação de dados</span>
	{% elsif category_name contains 'Deals and Sales Pipelines' %}
          <span class="lang-en">Deals and Sales Pipelines</span>
          <span class="lang-de">Deals und Vertriebspipelines</span>
          <span class="lang-es">Tratos y canalizaciones de ventas</span>
          <span class="lang-fr">Offres et pipelines de ventes</span>
	  <span class="lang-br">Negociações e Pipelines de Vendas</span>
	{% elsif category_name contains 'Documents and Invoicing' %}
          <span class="lang-en">Documents and Invoicing</span>
          <span class="lang-de">Dokumente und Rechnungen</span>
          <span class="lang-es">Documentos y Facturación</span>
          <span class="lang-fr">Documents et facturation</span>
	  <span class="lang-br">Documentos e Faturamento</span>
	{% elsif category_name contains 'Email and communications' %}
          <span class="lang-en">Email and communications</span>
          <span class="lang-de">E-Mail und Kommunikation</span>
          <span class="lang-es">Correo electrónico y comunicaciones</span>
          <span class="lang-fr">Courriel et communications</span>
	  <span class="lang-br">E-mail e comunicações</span>
	{% elsif category_name contains 'Insights and reporting' %}
          <span class="lang-en">Insights and reporting</span>
          <span class="lang-de">Erkenntnisse und Berichterstattung</span>
          <span class="lang-es">Resultados e informes</span>
          <span class="lang-fr">Résultats et rapports</span>
	  <span class="lang-br">Informações e relatórios</span>
	{% elsif category_name contains 'Integrations' %}
          <span class="lang-en">Integrations</span>
          <span class="lang-de">Integrationen</span>
          <span class="lang-es">La integración</span>
          <span class="lang-fr">L'intégration</span>
	  <span class="lang-br">Integrações</span>
	{% elsif category_name contains 'Lead generation' %}
          <span class="lang-en">Lead Generation</span>
          <span class="lang-de">Lead Generierung</span>
          <span class="lang-es">Generación líder</span>
          <span class="lang-fr">Génération de leads</span>
	  <span class="lang-br">Geração de leads</span>
	{% elsif category_name contains 'Pipedrive basics' %}
          <span class="lang-en">Pipedrive basics</span>
          <span class="lang-de">Pipedrive Grundlagen</span>
          <span class="lang-es">Pipedrive Gouplagène</span>
          <span class="lang-fr">Pipedrive gouplagène</span>
	  <span class="lang-br">Noções básicas do Pipedrive</span>
	{% elsif category_name contains 'Pipedrive settings' %}
          <span class="lang-en">Pipedrive settings</span>
          <span class="lang-de">Pipedrive-Einstellungen</span>
          <span class="lang-es">Configuración de Pipedrive</span>
          <span class="lang-fr">Paramètres Pipedrive</span>
	  <span class="lang-br">Configurações do Pipedrive</span>
	{% elsif category_name contains 'Privacy and security' %}
          <span class="lang-en">Privacy and security</span>
          <span class="lang-de">Privatsphäre und Sicherheit</span>
          <span class="lang-es">Privacidad y seguridad</span>
          <span class="lang-fr">Confidentialité et sécurité</span>
	  <span class="lang-br">Privacidade e segurança</span>
	{% elsif category_name contains 'Projects' %}
          <span class="lang-en">Projects</span>
          <span class="lang-de">Projekte</span>
          <span class="lang-es">Proyectos</span>
          <span class="lang-fr">Projets</span>
	  <span class="lang-br">Projetos</span>
	{% elsif category_name contains 'User management' %}
          <span class="lang-en">User management</span>
          <span class="lang-de">Benutzerverwaltung</span>
          <span class="lang-es">Gestión de usuarios</span>
          <span class="lang-fr">Gestion des utilisateurs</span>
	  <span class="lang-br">gerenciamento de usuários</span>
        {% elsif category_name contains 'Spanish' %}
          <span class="lang-en" style="display:none;">Spanish</span>
          <span class="lang-de" style="display:none;">Spanisch</span>
          <span class="lang-es" style="display:none;">Español</span>
          <span class="lang-fr" style="display:none;">Espagnol</span>
          <span class="lang-br" style="display:none;">Espanhol</span>
        {% elsif category_name contains 'German' %}
          <span class="lang-en" style="display:none;"></span>
          <span class="lang-de" style="display:none;"></span>
          <span class="lang-es" style="display:none;"></span>
          <span class="lang-fr" style="display:none;"></span>
          <span class="lang-br" style="display:none;"></span>
        {% elsif category_name contains 'French' %}
          <span class="lang-en" style="display:none;"></span>
          <span class="lang-de" style="display:none;"></span>
          <span class="lang-es" style="display:none;"></span>
          <span class="lang-fr" style="display:none;"></span>
          <span class="lang-br" style="display:none;"></span>
        {% elsif category_name contains 'Portuguese' %}
          <span class="lang-en" style="display:none;"></span>
          <span class="lang-de" style="display:none;"></span>
          <span class="lang-es" style="display:none;"></span>
          <span class="lang-fr" style="display:none;"></span>
          <span class="lang-br" style="display:none;"></span>
        {% else %}
          {{ category_name }}
        {% endif %}
        </h3>
        <div class="courses-section-button" onclick="this.parentNode.parentNode.classList.toggle('courses-section-expanded')">
          <span class="courses-section-button-hide">
            <span class="lang-en">Show less</span>
            <span class="lang-de">Weniger anzeigen</span>
            <span class="lang-es">Mostrar menos</span>
            <span class="lang-fr">Montrer moins</span>
            <span class="lang-br">Mostrar menos</span>
          </span>
          <span class="courses-section-button-expand">
            <span class="lang-en">View all</span>
            <span class="lang-de">Alle anzeigen</span>
            <span class="lang-es">Ver todos</span>
            <span class="lang-fr">Tout afficher</span>
            <span class="lang-br">Ver tudo</span>
          </span>
        </div>
      </div>

      <div class="courses-list row">
        {% for course in courses.in_catalog %}
          {% assign course_categories = course.categories | map: 'id' %}
          {% if course.ribbon != "VIDEO" and course.properties.featured == false %}
            {% for cat in course_categories %}
              {% if category_uuid contains cat %}
                {% assign number_of_videos = number_of_videos | plus: 1 %}
                {% include "cards_course" %}
              {% endif %}
            {% endfor %}
          {% endif %}
        {% endfor %}
      </div>
    </section>

    {% if number_of_videos <= 3 %}
      <style>
        {% if number_of_videos == 1 %}
        .courses-section[item-categories="{{ category_uuid }}"] .courses-section-button {
            display: none;
        }
        {% elsif number_of_videos == 2 %}
        @media only screen and (min-width: 768px) {
            .courses-section[item-categories="{{ category_uuid }}"] .courses-section-button {
                display: none;
            }
        }
        {% else %}
        @media only screen and (min-width: 1200px) {
            .courses-section[item-categories="{{ category_uuid }}"] .courses-section-button {
                display: none;
            }
        }
        {% endif %}
      </style>
    {% endif %}
  {% endfor %}
</div>

<div class="courses container width-limit">
  {% include "catalog_filter", uuids: categories_uuids, names: categories_names %}
  <section class="courses-section courses-section-featured" item-categories="">
    <h3 class="courses-title strong">
      <span class="lang-en">Featured courses</span>
      <span class="lang-de">Ausgewählte Kurse</span>
      <span class="lang-es">Cursos destacados</span>
      <span class="lang-fr">Cours à l'affiche</span>
      <span class="lang-br">Cursos em destaque</span>
    </h3>
    {% assign any_course = false %}
    <div class="courses-list row">
      {% for course in courses.in_catalog %}
        {% if course.ribbon != "VIDEO" and course.properties.featured %}
          {% include "cards_course" %}
          {% assign any_course = true %}
        {% endif %}
      {% endfor %}
    </div>
  </section>
  {% unless any_course %}
    <style>
      .courses-section-featured {
        display: none;
      }
    </style>
  {% endunless %}
</div>

<style>
    .courses-title {
        padding-bottom: 40px;
        padding-top: 40px;
    }
    .courses-section:not(:last-of-type) .courses-list {
        border-bottom: 1px solid #E1E1FF;
    }
    .courses-section-filtered .courses-list {
        border-bottom: none !important;
    }
    .courses-list {
        padding-bottom: 20px;
    }
    .courses-section-filtered {
        margin-top: 40px;
    }
    .courses-section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .courses-section-filtered .courses-section-header {
        display: none;
    }
    .courses-section-button {
        color: #0070D6;
        cursor: pointer;
    }
    .courses-section-button-hide {
        display: none;
    }
    .courses-section.courses-section-expanded .courses-section-button-hide {
        display: block;
    }
    .courses-section.courses-section-expanded .courses-section-button-expand {
        display: none;
    }
    @media only screen and (max-width: 767px) {
        .courses-section:not(.courses-section-expanded) .course-card:not(:first-child) {
            display: none;
        }
    }
    @media only screen and (min-width: 768px) {
        .courses-list > div {
            padding-left: 15px;
            padding-right: 15px;
        }
        .courses-list {
            padding-bottom: 40px;
        }
    }
    @media only screen and (min-width: 768px) and (max-width: 1199px) {
        .courses-section:not(.courses-section-expanded) .course-card:nth-child(n+3) {
            display: none;
        }
    }
    @media only screen and (min-width: 1200px) {
        .courses-section:not(.courses-section-expanded) .course-card:nth-child(n+4) {
            display: none;
        }
    }
</style>

<script>
  window.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.course-card-description').forEach((x) => {
      $clamp(x, {clamp: 5});
    })

    {% if current_school.sso_active? %}
      var categoriesOrder = ['ALL',
        'e2af61ed-3fbc-448d-9d88-3a66b44735b3',
        '8fff4f04-75a5-43df-ae71-1fb4efb052a6',
        '5e2da7ac-8c87-49a2-b385-c5be91c0217f'
      ]
    {% else %}
      var categoriesOrder = ['ALL',
        'b62b5946-6a39-4fac-90e2-87b921620aa4',
        'db1bb7fd-bb8f-4939-a731-e9f8e5005370',
        '41abb409-d6f4-4ee9-b07e-0320dc3cc719'
      ]
    {% endif %}

    let filtersWrapper = document.querySelector('.courses-filter');
    let coursesWrapper = document.querySelector('.courses');
    categoriesOrder.forEach(category => {
      let filter = document.querySelector(`.courses-filter-item[category-uuid="${category}"]`)
      if (filter)
        filtersWrapper.appendChild(filter);
      if (category !== 'ALL') {
        let courseSection = document.querySelector(`.courses-section[item-categories="${category}"]`);
        if (courseSection) {
          coursesWrapper.appendChild(courseSection);
        }
      }
    });
    document.querySelectorAll('.courses-filter-hidden .courses-filter-item').forEach(filter => {
      filtersWrapper.appendChild(filter);
    });
    document.querySelectorAll('.courses-hidden .courses-section').forEach(courseSection => {
      coursesWrapper.appendChild(courseSection);
    });
  })
</script>
