<div class="homepage-categories">
  <div class="homepage-categories-container">
    {% for category in categories.in_catalog %}
      {% assign category_name_formatted = category.name | replace: " ", "-" | downcase %}
      <div class="homepage-category" data-category="{{category_name_formatted}}">
        {% assign show_indicator = false %}
        {% for course in courses.in_catalog %} 
          {% assign course_categories = course.categories | map: "name" %}

          {% if course_categories contains category.name %}
            {% if course.enrolled? and course.progress < 100 and course.properties.course_type == "Training" %}
              {% if course.properties.talent_lms_course == true and current_person.properties.talent_lms_learner == false %}
                <script>console.log('Show for {{category.name}} Category because of {{course.name}}')</script>
                {% assign show_indicator = true %}
              {% elsif course.properties.talent_lms_course == false %}
                <script>console.log('Show for {{category.name}} Category because of {{course.name}}')</script>
                {% assign show_indicator = true %}
              {% endif %}
            {% endif %}
          {% endif %}
        {% endfor %}
        <div class="category-name">
          {{ category.name }}
        </div>
        {% if show_indicator %}         
          <div class="not-completed-indicator"></div>
        {% endif %}
      </div>
    {% endfor %}
    </div>
    {% include 'homepage_filter' %}
</div>

<script>
  window.addEventListener("DOMContentLoaded", (event) => {
    Array.from(document.querySelectorAll(".homepage-category")).forEach((item, index) => {
      if (index == 0) {
        addActiveCategoryClass(item)
        showCoursesFromCategory(item)
      }
      
      item.addEventListener("click", (clickEvent) => {
        addHashToUrl(item)
        hideCourses()
        showCoursesFromCategory(item)
        removeActiveCategoryClass()
        addActiveCategoryClass(item)
        UpdateStatusOfOptionalCourses()
      })

      if (item.getAttribute("data-category") == window.location.hash.replace("#", "")) {
        item.click()
      }
    })
  })

  function hideCourses() {
    Array.from(document.querySelectorAll(".course-container")).forEach((course) => {
      course.style.display = "none";
    })
  }

  function showCoursesFromCategory(item) {
    var selectedCategory = item.querySelector(".category-name").innerHTML.trim()

    Array.from(document.querySelectorAll(".course-container")).forEach((course) => {
      if (course.querySelector(".course-categories-list").innerHTML.includes(selectedCategory)) {
        course.style.removeProperty("display")
      }
    })
  }

  function removeActiveCategoryClass() {
    Array.from(document.querySelectorAll(".homepage-category")).forEach((item) => {
      item.classList.remove("active-category")
    })
  }

  function addActiveCategoryClass(item) {
    item.classList.add("active-category")
  }

  function addHashToUrl(item) {
    const selectedCategory = item.getAttribute("data-category")
    let url = window.location.href

    if (window.location.hash) {
      url = new URL(window.location.href.substr(0, window.location.href.indexOf('#')))
    }
  
    window.history.replaceState(null, null, `${url}#${selectedCategory}`);
  }

  function UpdateStatusOfOptionalCourses() {
    const optionalCoursesAccordion = document.getElementById("catalog-accordion")
    const optionalCoursesPanel = document.getElementById("accordion-panel")
    optionalCoursesPanel.style.display = "none"
    optionalCoursesAccordion.style.display = "none"
    let optionalCoursesShowingCount = 0

    optionalCoursesPanel.querySelectorAll(".catalog-course-container").forEach((optionalCourse) => {
      if (optionalCourse.style.display != "none") {
        optionalCoursesShowingCount++
      }
    })

    if (optionalCoursesShowingCount > 0) {
      optionalCoursesPanel.style.display = "flex"
      optionalCoursesAccordion.style.display = "flex"
    }
  }
</script>

<style>
  .homepage-categories {
    margin-top: 50px;
    display: flex;
    margin-bottom: 19px;
    flex-wrap: wrap;
  }

  .active-category .category-name {
    color: #2E29FC;
  }

  .not-completed-indicator {
    background-color: #df2673;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    position: absolute;
    right: -8px;
    top: 4px;
  }

  .homepage-categories-container {
    display: flex;
    flex-direction: row;
    overflow-x:scroll;
    width:100%;
  }

  .homepage-category {
    padding: 0 4px 15px;
    margin: 0 12px;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 19px;
    display: flex;
    align-items: center;
    cursor: pointer;
    position:relative;
    position:relative;
  }

  .homepage-category:after {
    content: "";
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:2px;
    z-index:2;
    background-color:#EBEAEB;
  }

  .homepage-category.active-category:after {
    background-color:#2E29FC;
  }

 
  .homepage-category:first-child {
    margin-left:0;
  }
  

  @media only screen and (min-width: 768px) {
    .homepage-categories {
      margin-top: 0;
      position:relative;
      flex-wrap:nowrap;
    }

    .homepage-categories:after {
      content: "";
      position:absolute;
      bottom:0;
      left:0;
      width:100%;
      height:2px;
      background-color:#EBEAEB;
    }

    .homepage-categories-container {
      margin-right: 32px;
      background-color: #fff;
      width:auto;
    }
  }
</style>
