{% include "header" %}
{% include "course_version_outdated_alert", courses: courses.in_catalog %}
<div class="subheader">

</div>
<main class="catalog container-fluid">
  <div class="catalog-wrapper row">

    <div class="catalog-filter col-md-4 col-12 np-hidden-mobile">
      {% include 'catalog_filter' %}
    </div>
    <div class="catalog-filter-mobile-button np-hidden-desktop">
      Filter <i class="fa-solid fa-angle-down"></i>
    </div>
    <div class="catalog-courses container-fluid col-md-8 col-12">
      <div class="catalog-courses-container row">
        {% for course in courses.in_catalog %}
            {% include 'catalog_course_card' with course %}
        {% endfor %}
      </div>
    </div>
  </div>
  {% include 'catalog_filter_mobile' %}
</main>

{% include "footer" %}
<style>
  .catalog {
    padding: 40px 4% 80px;
  }
  .row > * {
    padding-left: 16px;
    padding-right: 16px;
  }
  .catalog-filter-mobile-button {
    font-size: 20px;
    margin-bottom: 20px;
  }
  .category-hidden {
    display: none;
  }
  .diff-hidden {
    display: none;
  }
  .time-hidden {
    display: none;
  }
  .course-card {
    margin-bottom: 60px;
  }
  .course-card-content-title {
    font-weight: 400;
    line-height: 32px;
    font-size: 22px;
    margin-top: 20px;
    margin-bottom: 8px;
  }
  .course-card-content-time {
    font-size: 12px;
    line-height: 16px;
    letter-spacing: -0.5px;
    opacity: 0.4;
    margin: 8px 0;
  }
  .course-card-content-description {
    font-size: 16px;
    line-height: 26px;
    letter-spacing: -0.5px;
    opacity: 0.4;
  }
  .course-card-content-footer {
    display: flex;
    justify-content: space-between;
  }
  .np-course-version-outdated-popup-trigger {
    color: #2F8481;
  }

  @media only screen and (min-width: 1800px) {
    .catalog {
      padding: 40px 10% 80px;
    }
    .course-card-content-time {
      font-size: 18px;
    }
    .course-card-content-description {
      font-size: 18px;
    }
    .course-card-content-title {
      font-size: 26px;
    }
  }
  @media only screen and (max-width: 1500px) {
    .row > * {
      padding-left: 10px;
      padding-right: 10px;
    }
  }
  @media only screen and (max-width: 992px) {
    .course-card-content-description {
      font-size: 22px;
    }
    .course-card-content-title {
      font-size: 32px;
    }
  }
</style>

<script>
  /* category */
  $('.course-card-content-title').each(function() {
    $clamp($(this)[0], {clamp: 3})
  })
  $('.course-card-content-description').each(function() {
    $(this).text($(this).text().trim())
    $clamp($(this)[0], {clamp: 4})
  }) 
  /* convert values to same format */
  $('[category]').each(function(){
    $(this).attr('category', $(this).attr('category').replaceAll(' ', '').replaceAll('+', ' ').toLowerCase());
  });
  /* add action to filters on click */
  $('.filter-element-category').click(function(){
    $('.category-selected').removeClass('category-selected');
    $(this).toggleClass('category-selected');
    $('.course-card').removeClass('category-hidden');
    /* hides all cards without selected category if the 'All' wasn't selected */
    if($(this).attr('category') != 'none') {
      $('.course-card').not('[category~='+$(this).attr('category')+']').addClass('category-hidden');
    }
  });
  /* difficulty */
  $('.filter-element-diff').click(function() {
    if ($('.diff-selected').length == 0) {
      /* first filter is being checked */
      $('.course-card').not('[diff=' + $(this).attr('diff') + ']').addClass('diff-hidden');
    }
    else if ($('.diff-selected').length == 1 && $(this).hasClass('diff-selected')) {
      /* last filter is being unchecked */
      $('.course-card').removeClass('diff-hidden');
    }
    else {
      $('.course-card[diff=' + $(this).attr('diff') + ']').toggleClass('diff-hidden');
    }
    $(this).toggleClass('diff-selected');
  });
  /* duration */
  $('.filter-element-time').click(function() {
    if ($('.time-selected').length == 0) {
      /* first filter is being checked */
      $('.course-card').not('[time=' + $(this).attr('time') + ']').addClass('time-hidden');
    }
    else if ($('.time-selected').length == 1 && $(this).hasClass('time-selected')) {
      /* last filter is being unchecked */
      $('.course-card').removeClass('time-hidden');
    }
    else {
      $('.course-card[time=' + $(this).attr('time') + ']').toggleClass('time-hidden');
    }
    $(this).toggleClass('time-selected');
  });
  /* handling hashes in URL */
  if (window.location.hash) {
    hash_1 = window.location.hash.slice(1).split('-')[0].toLowerCase();
    hash_2 = window.location.hash.slice(1).split('-')[1].toLowerCase();
    var a = $('.filter-element-' + hash_1 + '[' + hash_1 + '=' + hash_2 + ']');
    a.click();
    a.toggleClass("category-selected");
    history.pushState("", document.title, window.location.pathname + window.location.search);
  };
  $(window).on('hashchange', function() {
    if (window.location.hash) {
      hash_1 = window.location.hash.slice(1).split('-')[0].toLowerCase();
      hash_2 = window.location.hash.slice(1).split('-')[1].toLowerCase();
      var a = $('.filter-element-' + hash_1 + '[' + hash_1 + '=' + hash_2 + ']');
      a.click();
      a.toggleClass("category-selected");
      history.pushState("", document.title, window.location.pathname + window.location.search);
    };
  });
  /* parse time property to human format */
  $('.course-card-content-time[time]').each( function() {
    var a = parseInt($(this).text());
    var minutes = a % 60;
    var hours = Math.floor(a / 60);
    var time = '';
    if (hours > 0) {
        time = time + hours.toString() + 'h ';
    }
    if (minutes > 0) {
        time = time + minutes.toString() + 'm';
    }
    $(this).text(time);
  });
  /* mobile filter menu */
  $(".catalog-filter-mobile-button").click(function () {
    $(".mobile-filter").removeClass("np-hidden");
    document.body.style.overflow = "hidden";
    $(".greyed").removeClass("np-hidden");
  });
  $(".greyed").click(function () {
    document.body.style.overflow = "scroll";
    if(! $(".mobile-filter").hasClass('np-hidden')){
      $(".mobile-filter").addClass("np-hidden");
    }
    $(".greyed").addClass("np-hidden");
  });
  $(".mobile-filter-header").click(function () {
    $(".mobile-filter").addClass("np-hidden");
    document.body.style.overflow = "scroll";
    $(".greyed").addClass("np-hidden");
  });
</script>