{% include "header" %}
{% include "course_version_outdated_alert", courses: courses.in_catalog %}
{% include "sub_navigation" %}
<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>
  function clickDropdownMenu() {
    const dropdownMenu = document.getElementsByClassName('dropdown-menu')[0]

    const event = new MouseEvent('click', {
      view: window,
      bubbles: true,
      cancelable: true
    });

    dropdownMenu.dispatchEvent(event);
    console.log('clicked')
  }




  window.addEventListener('DOMContentLoaded', () => {
    const choices = document.querySelectorAll('.choices__item.choices__item--choice.choices__item--selectable')

    const targetNode = document.getElementsByClassName('choices__list')[2];
    const config = { attributes: true, childList: true, subtree: true };
    const callback = (mutationList, observer) => {
      var updated_choices = document.querySelectorAll('.choices__item.choices__item--choice.choices__item--selectable')
      for (const mutation of mutationList) {
        Array.from(updated_choices).forEach((choice) => {
          choice.addEventListener("mousedown", clickDropdownMenu);
        })
      }
    };
    const observer = new MutationObserver(callback);

    Array.from(choices).forEach((choice) => {
      choice.addEventListener("mousedown", clickDropdownMenu);
    })
    observer.observe(targetNode, config);
  });

</script>