{% assign enrolled_categories = categories.enrolled %}

<div class="filter-sidebar">
  <div class="filter-group">
    <div class="filter-group-heading">What are you looking for?</div>
    <div class="filters">
      {% for category in enrolled_categories %}
        <div class="filter-item">
          <label class="filter">
            {{ category.name }}
            <input
              type="checkbox"
              name="{{category.name}}"
              value="{{category.name}}" />
            <span class="checkmark"></span>
          </label>
        </div>
      {% endfor %}
    </div>
  </div>
  <div class="filter-group">
    <div class="filter-group-heading">What is your learning style?</div>
    <div class="filters"></div>
  </div>
  <div class="filters-reset np-button" onClick="resetFilters()">Reset all Filters</div>
</div>

<style>
  .filter-sidebar {
    color: #fff;
    padding-left: 32px;
  }

  .filter-group {
    margin-bottom: 50px;
  }

  .filter-group-heading {
    font-size: 20px;
    font-weight: 500;
    line-height: 36px;
    margin-bottom: 16px;
  }

  .filter-item label {
    color: #E6E8EB;
    font-size: 18px;
    font-weight: 500;
    line-height: 32px;
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .filter-item input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }

  .filter-item .checkmark {
    position: absolute;
    top: 3px;
    left: 0;
    height: 24px;
    width: 24px;
    background-color: transparent;
    border: 1px solid #fff;
    border-radius: 4px;
  }

  .filter-item .checkmark:after {
    content: "";
    position: absolute;
    display: none;
  }

  input:checked ~ .checkmark:after {
    display: block;
  }

  .filter-item .checkmark:after {
    left: 8px;
    top: 3px;
    width: 5px;
    height: 10px;
    border-style: solid;
    border-color: #fff;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }

  .filters-reset {
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
    border: 1px solid #fff;
    cursor: pointer;
    padding: 16px 24px;
    border-radius: 8px;
    color: #fff;
    background-color: transparent;
    width: 100%;
    height: auto;
  }
</style>

<script>
  window.addEventListener("DOMContentLoaded", function() {})

  function resetFilters() {
    console.log("resettting filtes")
    const allFilters = document.querySelectorAll("input[type='checkbox']")
    allFilters.forEach(element => {
      element.checked = false;
    });

    const allCourses = document.querySelectorAll('.course-columns');
    allCourses.forEach(element => {
      element.style.display = 'flex';
    });
  }
</script>