{% if courses_type == 'enrolled' %}
<div class="np-dashboard-resources-title">
  My courses
  <div class="dashboard-resources-subtitle">
    Courses in which you're currently enrolled
  </div>
</div>
{% endif %}
<div class="courses-header">
  <div class="filter-button" id="filter-button">
    Filter <i class="fa-light fa-sliders filter-icon"></i>
  </div>
  {% if courses_type == 'catalog' %}
    <div class="catalog-header-search">
      <div class="catalog-search" data-test="desktop-search">
        <input
          autocomplete="off"    
          aria-label="{% t .search %}"
          class="catalog-search-input"
          type="text"
          name="q"
          placeholder="Search"
          id="catalog-search"
        />
        <i class="catalog-search-button far fa-search"></i>
      </div>
    </div>
  {% endif %}
</div>
<div class="dashboard-courses-wrapper container">
  <div class="row" style="width: 100%;">
    {% include 'courses_filter' %}
    {% include "courses_index"%}
  </div>
</div>

<style>
  .filter-button {
    font-size: 1.25rem;
    margin-bottom: 16px;
    display: flex;
    width: min-content;
    padding: 5px;
    cursor: pointer;
  }
  .filter-icon {
    margin: auto 0 auto 20px;
  }
  .dashboard-courses-wrapper {
    max-width: none;
    padding: 0;
    display: flex;
  }
  #courses-row {
    margin: auto;
    padding: 0;
    width: 100%;
  }
  .search-hidden {
    display: none;
  }
  .courses-header {
    display: flex;
    margin: 40px 0 10px;
  }
  .no-catalog-courses {
    width: 100%;
    text-align: center;
  }
</style>

{% if courses_type == 'catalog' %}
  <style>
    .catalog-search {
      position: relative;
      margin-left: 30px;
    }
    .catalog-search-input {
      background: none;
      border: 1px solid #2D373C;
      padding: 8px 30px 8px 10px;
      color: #2D373C;
      max-width: 180px;
    }
    .catalog-search-input::placeholder {
      color: #2D373C;
      opacity: 90%;
    }
    .catalog-search-button {
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      right: 0%;
      color: #2D373C;
    }
  </style>
{% endif %}
<script>
  var biggerWindow = window.innerWidth >= 1600

  window.addEventListener('load', function() {
    document.getElementById('filter-button').addEventListener('click', function() {
      document.getElementById('filter').classList.toggle('np-hidden');
      document.querySelectorAll('[course-card-categories]').forEach(function(y) {
        'col-md-6 col-lg-6'.split(' ').map(v => y.classList.toggle(v));
      });
      if (!biggerWindow) {
        document.querySelectorAll('[course-card-categories]').forEach(function(y) {
          'col-xl-4 col-xl-6'.split(' ').map(v => y.classList.toggle(v));
        });
      }
      document.getElementById('courses-row').classList.toggle('col')
    });

    document.getElementsByClassName('filter-item-all')[0].addEventListener('click', function(x){
      console.log(123)
      document.querySelectorAll('[course-card-categories]').forEach(function(y) {
        y.classList.remove('np-hidden');
      });
      document.getElementsByClassName('filter-item-active')[0].classList.remove('filter-item-active');
      x.target.classList.add('filter-item-active');
    });

    Array.from(document.getElementsByClassName('filter-item')).forEach(function(x) {
      x.addEventListener('click', function(x) {
        document.getElementsByClassName('filter-item-active')[0].classList.remove('filter-item-active');
        x.target.classList.add('filter-item-active');
        document.querySelectorAll('[course-card-categories]').forEach(function(y) {
          if (y.getAttribute('course-card-categories').includes(x.target.getAttribute('filter-category'))) {
            y.classList.remove('np-hidden');
          } else {
            y.classList.add('np-hidden');
          }
        });
        if (document.getElementById('courses-row').querySelectorAll('.course-card-wrapper:not(.search-hidden):not(.np-hidden)').length == 0) {
          document.getElementsByClassName('no-catalog-courses')[0].classList.remove('search-hidden');
        } else {
          document.getElementsByClassName('no-catalog-courses')[0].classList.add('search-hidden');
        }
      })
    })
  })

  window.addEventListener('resize', function(){
    if (biggerWindow && window.innerWidth < 1600) {
      biggerWindow = false;
    } else if (!biggerWindow && window.innerWidth >= 1600) {
      biggerWindow = true;
    }
    else {
      return true
    }
    if(!document.getElementById('filter').classList.contains('np-hidden')) {
      document.querySelectorAll('[course-card-categories]').forEach(function(y) {
        'col-xl-4 col-xl-6'.split(' ').map(v => y.classList.toggle(v));
      });
    }
  });
</script>

{% if courses_type == 'catalog' %}
  <script>
    function debounce(callback, wait) {
      let timeout;
      return (...args) => {
          clearTimeout(timeout);
          timeout = setTimeout(function () { callback.apply(this, args); }, wait);
      };
    }

    function match(input, checkedText) {
      let inputPhrases = input.split(' ').filter(n => n);
      let checkedTextPhrases = checkedText.split(' ').filter(n => n);
      return inputPhrases.every(function(inputPhrase) {
        return checkedTextPhrases.some(function(checkedTextPhrase) {
          return checkedTextPhrase.toLowerCase().includes(inputPhrase.toLowerCase());
        });
      });
    }

    function searchCatalog(input) {
      if (input) {
        document.querySelectorAll("[course-card-categories]").forEach(function(y) {
          if (match(input,
            y.querySelector('.course-card-content-title').innerText.trim() + 
            ' ' + 
            y.querySelector('.course-card-content-description').innerText.trim())
          ) {
            y.classList.remove('search-hidden');
          } else {
            y.classList.add('search-hidden');
          }
        });
      }
      else {
        document.querySelectorAll("[course-card-categories]").forEach(function(y) {
          y.classList.remove('search-hidden');
        });
      }
      if (document.getElementById('courses-row').querySelectorAll('.course-card-wrapper:not(.search-hidden):not(.np-hidden)').length == 0) {
        document.getElementsByClassName('no-catalog-courses')[0].classList.remove('search-hidden');
      } else {
        document.getElementsByClassName('no-catalog-courses')[0].classList.add('search-hidden');
      }
    }

    window.addEventListener('load', function() {
      var searchElement = document.getElementById('catalog-search');
      searchElement.addEventListener('keyup', debounce( () => {
        searchCatalog(searchElement.value);
      }, 500))
    });

  </script>
{% endif %}