{% if courses.in_catalog.any? %}
  <div class="category-header">
    {% include "filter_by_progress" %}
  </div>
  <div class="np-catalog-courses row row-with-thumbnails">
    {% for course in courses.in_catalog %}
      {% assign is_on_the_job_video = false %}
      {% for category in course.categories %}
        {% if category.id == "40b1f3d7-6faf-4d54-a74f-92d330831728" or category.name contains "On-The-Job" %}
          {% assign is_on_the_job_video = true %}
        {% endif %}
      {% endfor %}

      {% unless is_on_the_job_video %}
        {% assign progress_status_en = "jetzt-starten" %}
        {% assign progress_status_de = "not-started" %}

        {% if course.progress > 0 and course.progress < 100 %}
          {% assign progress_status_de = "angefangen" %}
          {% assign progress_status_en = "in-progress" %}
        {% elsif course.progress == 100 %}
          {% assign progress_status_de = "abgeschlossen" %}
          {% assign progress_status_en = "completed" %}
        {% endif %}
        
        <div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content course-column {{progress_status_de}} {{progress_status_en}}" data-lang="{{course.properties.course_language}}">
          {% include "cards_course" with course %}
        </div>
      {% endunless %}
    {% endfor %}
  </div>
{% 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 {
    display: flex;
    justify-content: end;
    margin-bottom:16px;
    margin-top:24px;
  }

  .course-img-static {
    transition:opacity 0.1s;
  }

  .course-img-static:hover {
    opacity:0;
  }

  @media (min-width:768px) {
    .np-catalog-courses {
      margin-top: 0;
    }
  }
</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 selectedFilter = $(selectedItem).text().replace(" ", "-").toLowerCase();
  
    if (selectedFilter == "0%-abgeschlossen" || selectedFilter == "0%-completed") {
      selectedFilter = "not-started"
    }
 
    $(".np-catalog-courses").find('.course-column').removeClass('np-hidden')
    if (selectedFilter != "alle-kurse" && selectedFilter != "all-courses") {
      $(".np-catalog-courses").find(`.course-column:not(.${selectedFilter})`).addClass('np-hidden')
    } 

  }
</script>
