{% assign categories_uuids = "" %}
{% assign categories_names = "" %}
{% for course in courses.in_catalog %}
  {% if course.categories.size > 0 and course.ribbon == "VIDEO" %}
    {% 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">
          {{ categories_names | slice: y }}
        </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> <i class="fas fa-arrow-right"></i>
          </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" %}
            {% for cat in course_categories %}
              {% if category_uuid contains cat %}
                {% assign number_of_videos = number_of_videos | plus: 1 %}
                {% include "cards_video" %}
              {% 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 "video_tutorials_filter", uuids: categories_uuids, names: categories_names %}
</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>
  addEventListener('DOMContentLoaded', () => {
    {% if current_school.sso_active? %}
      var categoriesOrder = ['ALL',
        '251e90cf-758d-4f98-9256-9d1d40e24872',
        'b3c41203-7160-4d6f-bd77-5861bdddcfcd',
        'ca378022-dcac-444b-af34-64fdd6527faa',
        '0c4cda69-4ea9-4ad9-b279-19233daf043b',
        '389df920-414a-4657-9aa7-f6521f26bf3c',
        'c0cac114-466c-4952-85e9-aa19023999fa',
        '46f1a20a-6948-44eb-9b4a-1f924bbe46c4',
        'c082a8e4-00d3-4687-8b84-3dd1bb6c0c9e',
        '8604578e-22c9-4886-9943-43b1e2957615',
        'c53e5d73-dbd7-479b-ad7a-4e77a41cf62f',
        '49a29fce-cdd6-4af4-903a-0d1b58e1194a',
        '59e5408f-6538-4581-ac4f-5cfbcfa1c29a'
      ]
    {% else %}
      var categoriesOrder = ['ALL',
        '285dcc20-d69f-4065-990f-208d12c8a430',
        '61ccb3a1-f997-4c35-80cd-731cd69b791e',
        '1cf1ed5f-add8-4313-9e84-e58c5c47477c',
        'ea26bd88-006e-4f80-9968-f795d4db885e',
        'e01b8a16-dec1-4e10-b537-f912ab17fe41',
        '9b01c3c9-f581-4c73-9983-310b5789bcf8',
        '94e8ce42-7741-457c-8bbf-8ab26c0afa0b',
        '16a99525-5fa6-4d26-a80b-ed5797c3ee6c',
        'c1d45da3-69cc-498c-b7dd-9e7ed29407c1',
        '8f6a0adb-284f-482f-ad2e-4bada7211500',
        '63cc5043-4a2a-4603-8b74-39efd9cbb8e8',
        '4035b5ad-f376-4299-bcbc-b5d89bfbfc16'
      ]
    {% 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);
    });
  });
  
  window.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.course-card-description').forEach((x) => {
      $clamp(x, {clamp: 5});
    })
  });
</script>
