Gainsight/Custom_Templates/customer_templates/Lighthouse LJ Hooker/courses.html.liquid

{% include "header" %}
{% include "course_version_outdated_alert", courses: courses.enrolled %}
{% include "sub_navigation" %}
<main class="np-main np-courses np-subpage-container ">
  <div class="np-max-width">
    <div class="np-resource-title">
      All Courses
    </div>
    {% comment %} <div class="np-resource-subtitle">{% t .headline, key: current_school.course_vocabulary %}</div> {% endcomment %}
    
    {% comment %} COURSE FILTERING FUNCTION {% endcomment %}

    
    {% comment %} {% if categories.enrolled.any? %}
        <div class="category-filters-row">
          {% assign all_categories = categories.enrolled | map: "name" %}
          {% for enrolled_category in all_categories %}
            {% unless enrolled_category == "Past Webinars" %}
              {% assign category_joined = enrolled_category | replace: " ", "-" | downcase %}
              <a class="category-filter-button" href="#{{category_joined}}" >
                {{ enrolled_category }}
              </a>
            {% endunless %}
          {% endfor %}
        </div>       
      {% endif %} {% endcomment %}
  </div>


  {% comment %} {% include "courses_index", class: "col-xs-12 col-sm-6 col-lg-4 np-stretch-content" %} {% endcomment %}


  {% if courses.enrolled.any? and categories.enrolled.any?%}
    <div class="carousel-order-wrapper-hidden np-hidden">
        {% assign all_categories = categories.enrolled | map: "name" %}
        {% for enrolled_category in all_categories %}
          {% assign category_joined = enrolled_category | replace: " ", "-" | downcase %}
          <div class="category-row" id="{{category_joined}}">
            <div class="np-max-width">
              <div class="row dashboard-section-courses">
                <div class="col-xs-12">
                  <div class="np-md-flex-wrapper mb-3">
                      <div class="bolder-headline course-carousel-title">
                        {{ enrolled_category }}
                      </div>
                      <div class="see-all-btn-container">
                          <a class="see-all-btn" href="/app/courses-category?category={{category_joined}}">See All</a>
                      </div>
                  </div>
                {%
                  include "categories_carousel",
                  items: courses.enrolled,
                  topic: enrolled_category,
                %}
                </div>
              </div>
            </div>
          </div>
        {% endfor %}      
      </div>
      <div class="carousel-order-wrapper"></div>
  {% else %}
    <div class="np-max-width">
      <div class="row section-courses">
          <div class="col-xs-12">
            <div class="np-dashboard-resources-title" style="margin-bottom:19px;">
              Courses
            </div>
            {% capture message %}
              {% t shared.zero_state.courses.index,
                key: current_school.course_vocabulary
              %}
            {% endcapture %}
            <div style="margin-bottom:3rem;">
              {% include "courses_zero_state", message: message %}
            </div>
          </div>
        </div>
      </div>
  {% endif %}

</main>
{% include "footer" %}

<style>

  .np-main.np-courses.np-subpage-container {
    padding: 32px 0 50px;
  }

  .np-resource-title {
    font-size: 32px;
    text-align:center;
    font-weight:400;
    line-height:normal;
  }

  .category-filters-row {
    display: flex;
    justify-content: center;
    margin-top:32px;
    flex-wrap: wrap;
  }

  .category-filter-button {
    background-color: transparent;
    border: 2px solid #000;
    color: #000;
    text-decoration: none;
    padding: 4px 12px;
    font-weight: 700;
    border-radius: 4px;
    margin: 0 12px 16px;
    font-size:14px;
    transition: all 0.1s;
    line-height: 1.2rem;
  }

  .category-filter-button:hover {
    color:#fff;
    background:#000;
  }

  .category-row {
    padding:32px 16px;
  }

  .category-row:nth-child(odd) {
    background-color:whitesmoke;
  }

  .category-row .slick-list {
    margin:0 -16px;
  }

  .category-row .slick-slide {
    margin: 0 16px;
  }

  .see-all-btn-container {
    text-align:right;
  }

  @media (min-width:768px) {

    .np-resource-title {
      font-size: 55px;
    }

    .category-filter-button {
      font-size: 16px;
      padding: 8px 16px;
      margin: 0 16px 16px;
    }

    .category-row {
      padding:64px 24px;
    }

    .np-courses .section-carousel {
      padding-left:5%;
      padding-right:5%;
    }

    .category-row .np-md-flex-wrapper {
      justify-content: space-between;
      align-items: center;
    }

    .category-row .slick-list,
    .category-row .slick-slide {
      margin:0;
    }

  }
</style>

<script>
  addEventListener('DOMContentLoaded', () => {
    let categoriesOrder = ['sales', 'property-management', 'leadership', 'systems-and-technology', 'marketing', 'webinars']
    
    let coursesWrapper = document.querySelector('.carousel-order-wrapper');
    categoriesOrder.forEach(category => {
      if (category !== 'ALL') {
        let courseSection = document.querySelector(`#${category}`);
        if (courseSection) {
          coursesWrapper.appendChild(courseSection);
        }
      }
    });
    document.querySelectorAll('.carousel-order-wrapper-hidden').forEach(courseSection => {
      coursesWrapper.appendChild(courseSection);
    });
  });
</script>