{% include "header" %}
{% include "sub_navigation" %}
<main class="np-main np-webinars np-subpage-container ">
  <div class="np-max-width">
    <div class="np-resource-title">
      {{ custom_page.headline }}
    </div>
    {% comment %} <div class="np-resource-subtitle">{% t .headline, key: current_school.course_vocabulary %}</div> {% endcomment %}
      {% if categories.enrolled.any? %}
        <div class="category-filters-row">
          {% assign all_categories = categories.enrolled | map: "name" %}
          {% for enrolled_category in all_categories %}
            {% if enrolled_category == "Past Webinars" %}
              {% assign category_joined = enrolled_category | replace: " ", "-" | downcase %}
              <a class="category-filter-button" href="#{{category_joined}}" >
                {{ enrolled_category }}
              </a>
            {% endif %}
          {% endfor %}
        </div>       
      {% endif %}
  </div>


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


  {% if courses.enrolled.any? %}
    {% if categories.enrolled.any? %}
      {% assign all_categories = categories.enrolled | map: "name" %}
      {% for enrolled_category in all_categories %}
        {% if enrolled_category == "Past Webinars" %}
          {% 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>
        {% endif %}
      {% endfor %}
    {% endif %}
  {% 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-webinars.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;
  }

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

  .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-webinars .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>