{% include "fixed_header" %}
{% include "course_version_outdated_alert", courses: courses.in_catalog %}
<main class="np-main np-catalog np-subpage-container np-max-width">
  <div class="np-catalog-header-wrapper">
    <div class="np-catalog-header">
      <div class="np-resource-title">{{ catalog.headline }}</div>
      <div class="np-resource-subtitle">{{ catalog.subheadline }}</div>
    </div>
    {% 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 %}
  </div>
  {% include "courses_catalog" %}
</main>
{% include "footer" %}

<script>
  let categoryUUID = window.location.href.slice(window.location.href.indexOf('=')+1);
  if(!categoryUUID.includes('futuri')){
    let allCategories = document.querySelectorAll('.np-catalog-courses');
    for(let i = 0; i < allCategories.length; i++){
      allCategories[i].style.display = 'none';
      if(allCategories[i].dataset.uuid == categoryUUID){
        document.querySelector('.np-resource-title').innerHTML = allCategories[i].dataset.name;
        document.querySelector('.np-resource-subtitle').style.display = 'none';

        allCategories[i].children[0].style.display = 'none';
        allCategories[i].style.display = 'initial';
      }
    }
  }
</script>