<div class="webinars-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="webinars-section" item-categories="{{ category_uuid }}">
      <div class="webinars-section-header">
        <h3 class="webinars-title strong">
          {{ categories_names | slice: y }}
        </h3>
        <div class="webinars-section-button" onclick="this.parentNode.parentNode.classList.toggle('webinars-section-expanded')">
          <span class="webinars-section-button-hide">
            <span>Show less</span>
          </span>
          <span class="webinars-section-button-expand">
            <span>View all</span>
          </span>
        </div>
      </div>
      
      <div class="webinars-list row">
        {% for course in courses.in_catalog %}
          {% assign course_categories = course.categories | map: 'id' %}
          {% if course.properties.webinar %}
            {% 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 %}
          .webinars-section[item-categories="{{ category_uuid }}"] .webinars-section-button {
            display: none;
          }
        {% elsif number_of_videos == 2 %}
          @media only screen and (min-width: 768px) {
            .webinars-section[item-categories="{{ category_uuid }}"] .webinars-section-button {
              display: none;
            }
          }
        {% else %}
          @media only screen and (min-width: 1200px) {
            .webinars-section[item-categories="{{ category_uuid }}"] .webinars-section-button {
              display: none;
            }
          }
        {% endif %}
      </style>
    {% endif %}
  {% endfor %}
</div>

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