{% include "header" %}
{% include "course_version_outdated_alert", courses: courses.in_catalog %}
{% include "main_hero_masthead" %}
{% include "sub_navigation" %}
<main class="catalog container-fluid np-max-width">
  <div class="content-wrapper" style="max-width: 1440px;">
  <div class="catalog-wrapper row">
    <div class="catalog-filter col-sm-3 col-12">
      {%include "catalog_filtter_courses"%}
    </div>

    <div class="catalog-courses container-fluid col-sm-9 col-12">
      <div class="page-desc" style="margin-top: 32px;">
          <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
          <path d="M31.4701 11.1176L16.4701 3.11758C16.3254 3.04054 16.164 3.00024 16.0001 3.00024C15.8361 3.00024 15.6747 3.04054 15.5301 3.11758L0.530054 11.1176C0.370059 11.2028 0.236255 11.33 0.142954 11.4854C0.0496529 11.6409 0.000366211 11.8188 0.000366211 12.0001C0.000366211 12.1814 0.0496529 12.3593 0.142954 12.5147C0.236255 12.6702 0.370059 12.7973 0.530054 12.8826L4.00005 14.7338V20.7863C3.99901 21.2775 4.17979 21.7517 4.50755 22.1176C6.14505 23.9413 9.8138 27.0001 16.0001 27.0001C18.0512 27.017 20.0871 26.6455 22.0001 25.9051V30.0001C22.0001 30.2653 22.1054 30.5196 22.2929 30.7072C22.4805 30.8947 22.7348 31.0001 23.0001 31.0001C23.2653 31.0001 23.5196 30.8947 23.7072 30.7072C23.8947 30.5196 24.0001 30.2653 24.0001 30.0001V24.9388C25.3041 24.1861 26.4824 23.2342 27.4926 22.1176C27.8203 21.7517 28.0011 21.2775 28.0001 20.7863V14.7338L31.4701 12.8826C31.63 12.7973 31.7639 12.6702 31.8572 12.5147C31.9505 12.3593 31.9997 12.1814 31.9997 12.0001C31.9997 11.8188 31.9505 11.6409 31.8572 11.4854C31.7639 11.33 31.63 11.2028 31.4701 11.1176ZM16.0001 25.0001C10.5913 25.0001 7.41005 22.3576 6.00005 20.7863V15.8001L15.5301 20.8826C15.6747 20.9596 15.8361 20.9999 16.0001 20.9999C16.164 20.9999 16.3254 20.9596 16.4701 20.8826L22.0001 17.9338V23.7263C20.4251 24.4613 18.4401 25.0001 16.0001 25.0001ZM26.0001 20.7813C25.4006 21.4465 24.7299 22.0438 24.0001 22.5626V16.8663L26.0001 15.8001V20.7813ZM23.5001 14.8676L23.4726 14.8513L16.4726 11.1176C16.239 10.9983 15.9679 10.9755 15.7178 11.0542C15.4676 11.1328 15.2583 11.3066 15.1351 11.5381C15.0118 11.7695 14.9844 12.0402 15.0587 12.2917C15.1331 12.5431 15.3032 12.7554 15.5326 12.8826L21.3751 16.0001L16.0001 18.8663L3.12505 12.0001L16.0001 5.13383L28.8751 12.0001L23.5001 14.8676Z" fill="#202227"/>
        </svg>
          <h4>Discover both foundational and advanced insights into each feature with Courses.</h4>
      </div>
          <div class="np-catalog-courses row row-with-thumbnails">
            {%  assign isCoursesInprogress = false %} 
            {% assign isProgressHeaderOutput = false %}
            {% for course in courses.in_catalog %}
              {%  unless course.has_certificate?  %}             
                {% if course.progress > 0 and course.progress < 100 %}
                  {% if isProgressHeaderOutput == false %}
                    <div class="np-resource-title addWidthMargin">In progress</div>
                    {% assign isProgressHeaderOutput = true %}
                  {% endif %}
                  <div class="col-xs-12 col-sm-6 col-lg-4 np-stretch-content catalog-content"
                      data-categories='{% for category in course.categories %}{{ category.id }},{% endfor %}'>
                        {% include "cards_course" with course %}
                  </div>
                  {%  assign isCoursesInprogress = true %} 
                {% endif %}
              {% endunless %}   
            {% endfor %}         
          </div>
        {% if isCoursesInprogress == false  %}
          <div class="np-empty-container">
          </div>
        {% endif %}
        <div class="catalog-courses-container">
            <div class="np-resource-title" style="margin-top: 40px;">
             Courses
          </div>
          <div class="np-catalog-courses row row-with-thumbnails" style="margin-top: 0;">
            {% for course in courses.in_catalog %}             
                {%  unless course.has_certificate?  %}  
                  {% if course.progress == 0 %}           
                    <div class="col-xs-12 col-sm-6 col-lg-4 np-stretch-content catalog-content"
                    data-categories='{% for category in course.categories %}{{ category.id }},{% endfor %}'>
                      {% include "cards_course" with course %}
                    </div> 
                  {% endif  %}      
              {% endunless %}                 
            {% endfor %}
          </div>
        </div>
        <div class="np-homepage-featured np-max-width">
          <div class="np-catalog-courses row row-with-thumbnails">
            {%  assign isCoursesCompleted = false %} 
            {% assign isCourseHeaderOutput = false %}
            {% for course in courses.in_catalog %}
              {%  unless course.has_certificate?  %}             
                {% if course.progress == 100 %}
                  {% if isCourseHeaderOutput == false %}
                    <div class="np-resource-title addWidthMargin">Completed courses</div>
                    {% assign isCourseHeaderOutput = true %}
                  {% endif %}
                  <div class="col-xs-12 col-sm-6 col-lg-4 np-stretch-content catalog-content"
                      data-categories='{% for category in course.categories %}{{ category.id }},{% endfor %}'>
                        {% include "cards_course" with course %}
                  </div>
                  {%  assign isCoursesCompleted = true %} 
                {% endif %}
              {% endunless %}   
            {% endfor %}         
          </div>
        </div>
    </div>
  </div>
  </div>
</main>
{% include "footer" %}
<style>
  .catalog-filter {
  align-items: center;
  display: flex;
  flex-direction: column;
}
.np-homepage-featured-text {
    align-items: flex-start;
    display: flex;
    /* flex-direction: column; */
    padding: 0px;
    text-align: left;
   
  }
@media only screen and (max-width: 1030px) {
  .catalog-filter {
    width: 100%;
  }
  .filter-container {
    width: 100% !important;
  }
  .course-card {
    width: 100%;
  }
}
</style>
<script>
   document.addEventListener('DOMContentLoaded', function() {
    const allCheckboxes = document.querySelectorAll('.category-filter');
    const categoryCheckboxes = document.querySelectorAll('.category-filter');
    
    const catalogContents = document.querySelectorAll('.catalog-content');

    allCheckboxes.forEach(checkbox => {
      checkbox.addEventListener('change', applyFilters);
      
      //checkbox.checked=true;
      applyFilters() 
    });

    function applyFilters() {
      
      const selectedCategories = Array.from(categoryCheckboxes)
        .filter(cb => cb.checked)
        .map(cb => cb.value);

      catalogContents.forEach(content => {
        //console.log("catalogContents clicked")
        const contentCategories = content.getAttribute('data-categories') ? content.getAttribute('data-categories').split(',') : [];
        
        // Check if element matches selected categories
        const categoryMatch = selectedCategories.length === 0 || selectedCategories.some(cat => contentCategories.includes(cat));
        
        //console.log(categoryMatch)
        // Display element only if it matches all selected filters
        if (categoryMatch ) {
          content.style.display = 'flex';
        } else {
          content.style.display = 'none';
        }
      });
    }
  });
</script>