{% include "header" %}
{% include "course_version_outdated_alert", courses: courses.in_catalog %}
{% comment %} {% include "sub_navigation" %} {% endcomment %}
{% include 
  "page_header",
  page_headline: catalog.headline,
  page_subheadline: catalog.subheadline
%}
<main class="np-main np-catalog np-subpage-container np-max-width">
  <div class="np-catalog-header-wrapper">
    {% comment %} <div class="np-catalog-header">
      <div class="np-resource-title">{{ catalog.headline }}</div>
      <div class="np-resource-subtitle">{{ catalog.subheadline }}</div>
    </div> {% endcomment %}
    {% comment %} {% capture label %}{% t shared.filters.by_category %}{% endcapture %}

    {% if courses.in_catalog.any? %}
      {%
        include "filter_dropdown",
        filters: courses.filters,
        key: "category_uuid",
        label: label
      %}
    {% endif %} {% endcomment %}
  </div>

  <div class="catalog-filters-wrapper">
    <a class="catalog-filter-btn active" data-filter='all'>All</a>
    {% for category in categories.in_catalog %}
      <a class="catalog-filter-btn" data-filter='{{category.id}}'>{{category.name}}</a>
    {% endfor %}
  </div>

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

<style>

 .catalog-filters-wrapper .catalog-filter-btn {
    background-color: #dee0e3;
    border: 0;
    border-radius: 16px;
    color: #20262e;
    font-size: 15px;
    font-weight: 400;
    line-height: 24px;
    margin: 0 8px 8px 0;
    padding: 4px 16px;
    text-decoration:none;
    display: inline-block;
    cursor:pointer;
    transition: background-color .1s ease-in-out;
  }

  .catalog-filters-wrapper .catalog-filter-btn:hover {
    background-color: #c4c7cc;
    border: 0;
  }

  .catalog-filters-wrapper .catalog-filter-btn.active {
    background-color: #126666;
    border-color: #126666;
    color:#fff;
    font-weight:700;
  }


  @media (min-width:768px) {
    .catalog-filters-wrapper {
      padding: 32px 0 32px;
    }
  }
</style>

<script>
  $(".catalog-filter-btn").click(function() {
    const selectedFilter = $(this).data("filter")
    $(".catalog-filter-btn").removeClass("active")
    $(this).addClass("active")

    if (selectedFilter == "all") {
      $(".courses-catalog-column").show()
    } else {
      $(".courses-catalog-column").hide()
      
      $(".courses-catalog-column").each(function() {
        if ($(this).data("filter").includes(selectedFilter)) {
          $(this).show()
        }
      })
    }


  })

</script>
