{% if courses.enrolled and courses.enrolled.any? %}
  {%- assign all_categories = "" -%}

  {%- for category in categories.enrolled -%}
    {% comment %} <div class="np-resource-subtitle">Rolle</div> {% endcomment %}
    {% unless category.id == "087ea56d-888b-4e0f-af1f-68627318c841" or category.id == "9be55234-19c5-4df4-bd1d-03e93f0faf83" or category.id == "6580e10e-eacf-402d-a330-51d202721cce" or category.id == "a63019c7-0a46-40bd-bc1b-935c887a4380" or category.id == "40b1f3d7-6faf-4d54-a74f-92d330831728" %}
      <div class="category-header">
        <div class="category-title" style="">
          {{category.name}}
        </div>
        {% assign topic = category.id %}
        {% 
          include "filter_by_progress", 
          label: "Nach Fortschritt filtern:", 
          default_option: "Alle Kurse",
          topic: topic,
        %}
      </div>
      <div class="row" data-topic="{{category.id}}">
        {%- for course in courses.enrolled -%}
          {% assign all_categories = course.categories | map: "id" %}

          {%- if all_categories contains category.id -%}
            {% assign course_status = "" %}

            {% if course.started? == false  %}
              {% assign course_status = "jetzt-starten" %}
            {% elsif course.completed?  %}
              {% assign course_status = "abgeschlossen" %}
            {% elsif course.started?  %}
              {% assign course_status = "angefangen" %}
            {% endif %}
            <div class="cards-course-wrapper col-xs-12 col-sm-6 col-lg-4 np-stretch-content {{course_status}}">
              {% include 'cards_course' %}
            </div>
          {%- endif -%}
        {%- endfor -%}
      </div>
    {% endunless %}
  {%- endfor -%}

	{%- comment -%} <div class="blocks-layout">
		{% for course in courses.enrolled %}
			{% include "cards_course", course: course, card_classes: card_classes %}
		{% endfor %}
	</div> {%- endcomment -%}
{% else %}
	{% capture message %}
		{% t shared.zero_state.courses.index,
			key: current_school.course_vocabulary
		%}
	{% endcapture %}
	{% assign message = message | replace: "Courses", "Courses" %}
	{% include "courses_zero_state", message: message, filters_applied: false %}
{% endif %}

<style>
  .np-progress-filter-wrapper {
    margin-bottom: 0px;
  }

  .category-header {
    margin-bottom: 1rem;
  }

  .category-title {
    font-size: 18px; 
    line-height: 18px; 
    font-weight: bold;
  }

  @media (min-width:768px) {
    .category-header {
      display: flex; 
      justify-content: space-between; 
      align-items: center; 
    }

    .category-title {
      font-size: 24px; 
      line-height: 24px; 
      font-weight: bold;
    }

  }
</style>

<script>
  // Creates the custom dropdown and dropdown functionality
  var x,
    i,
    j,
    l,
    ll,
    selElmnt,
    a,
    b,
    c;

/* Look for any elements with the class “select-wrapper”: */
  x = document.getElementsByClassName("progress-filter");
  l = x.length;
  for (i = 0; i < l; i++) {
    selElmnt = x[i].getElementsByTagName("select")[0];
    ll = selElmnt.length;
    a = document.createElement("DIV");
    a.setAttribute("class", "select-selected");
    a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
    x[i].appendChild(a);
    b = document.createElement("DIV");
    b.setAttribute("class", "select-items select-hide");
    for (j = 1; j < ll; j++) {
      c = document.createElement("DIV");
      c.innerHTML = selElmnt.options[j].innerHTML;
      c.addEventListener("click", function(e) {
        var y,
          i,
          k,
          s,
          h,
          sl,
          yl;
        s = this.parentNode.parentNode.getElementsByTagName("select")[0];
        sl = s.length;
        h = this.parentNode.previousSibling;
        for (i = 0; i < sl; i++) {
          if (s.options[i].innerHTML == this.innerHTML) {
            s.selectedIndex = i;
            h.innerHTML = this.innerHTML;
            y = this.parentNode.getElementsByClassName("same-as-selected");
            yl = y.length;
            for (k = 0; k < yl; k++) {
              y[k].removeAttribute("class");
            }
            this.setAttribute("class", "same-as-selected");
            break;
          }
        }

        filterCourses(this);

        h.click();
      });
      b.appendChild(c);
    }
    x[i].appendChild(b);
    a.addEventListener("click", function(e) {
      e.stopPropagation();
      closeAllSelect(this);
      this.nextSibling.classList.toggle("select-hide");
      this.classList.toggle("select-arrow-active");
    });
  }

  function closeAllSelect(elmnt) {
    var x,
      y,
      i,
      xl,
      yl,
      arrNo = [];
    x = document.getElementsByClassName("select-items");
    y = document.getElementsByClassName("select-selected");
    xl = x.length;
    yl = y.length;
    for (i = 0; i < yl; i++) {
      if (elmnt == y[i]) {
        arrNo.push(i)
      } else {
        y[i].classList.remove("select-arrow-active");
      }
    }
    for (i = 0; i < xl; i++) {
      if (arrNo.indexOf(i)) {
        x[i].classList.add("select-hide");
      }
    }
  }

/* If the user clicks anywhere outside the select box,
  then close all select boxes: */
  document.addEventListener("click", closeAllSelect);
  $(".select-items div").each(function() {
    if ($(this).text() == $(".select-selected").text()) {
      $(this).addClass("same-as-selected");
    }
  });

  function filterCourses(selectedItem) {
    let filterGroup = $(selectedItem).closest(".progress-filter").data("topic");
    let selectedFilter = $(selectedItem).text().replace(" ", "-").toLowerCase();
    
    let carouselGroup = $('.row[data-topic="' + filterGroup + '"]');
    console.log(filterGroup, selectedFilter, carouselGroup)
    carouselGroup.find('.cards-course-wrapper').removeClass('np-hidden')
    if (selectedFilter != "alle-kurse") {
      carouselGroup.find(`.cards-course-wrapper:not(.${selectedFilter})`).addClass('np-hidden')
    }
  }
</script>