Gainsight/Custom_Templates/customer_templates/Pipedrive - UserLearn/_video_courses.html.liquid

{% 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 container width-limit">
  {% include "video_filter", uuids: categories_uuids, names: categories_names %}
  {% 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="expandCategory('{{ category_uuid }}')">
          <span class="courses-section-button-hide">
            <span class="lang-en">Show less</span>
            <span class="lang-de"></span>
            <span class="lang-es"></span>
            <span class="lang-fr"></span>
            <span class="lang-br"></span>
          </span>
          <span class="courses-section-button-expand">
            <span class="lang-en">View all</span>
            <span class="lang-de"></span>
            <span class="lang-es"></span>
            <span class="lang-fr"></span>
            <span class="lang-br"></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>

<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});
    })
  });

  function expandCategory(category_uuid) {
    document.querySelector(`.courses-section[item-categories="${category_uuid}"]`).classList.toggle('courses-section-expanded');
  }
</script>