{% 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', 'commercial', '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>