{%- if page.lang == 'en' -%}
<style>
  .toolfilter svg {
    height: 20px;
    width: 20px;
  }
  .inverted {
    filter: invert(1);
  }

  .toolfilters {
    width: fit-content;
    min-width: 500px;
    justify-content: space-evenly;
  }
  .toolfilters-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .filter__category {
    display: flex;
    align-items: center;
    border-radius: 99px;
    padding: 12px;
    cursor: pointer;
    margin-left: 6px;
    margin-right: 6px;
    white-space: nowrap;
    color: #525658;
  }
  .filter__name {
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    margin-left: 8px;
  }
  .filter__category:hover {
    background-color: var(--primary-color);
    color: #ffffff;
  }
  .filter__category:hover img {
    filter: invert(1);
  }
  .filter__category img {
    height: 21px;
    width: 21px;
  }
  .filter__category_active {
    background-color: var(--primary-color);
    color: #fff;
  }
</style>
<div class="container">
  <div class="row justify-content-center">
    <div class="col-lg-9 col-md-12 col-sm-12 pt-sm-3">
      <div class="toolfilters-wrapper">
        <div id="toolfilters" class="toolfilters">
          {%- for item in pageData.features -%} {%- if item.link -%}
          <a
            href="{{item.link}}"
            class="filter__category{% if item.active %} filter__category_active{% endif %}"
          >
            <img
              src="/assets/images/menu.svg"
              alt=""
              style="filter: invert(1)"
            />
            <span class="filter__name">{{item.category}}</span>
          </a>
          {%- else -%}
          <div
            data-category-name="{{item.category}}"
            class="filter__category{% if item.active %} filter__category_active{% endif %}"
          >
            <img
              src="/assets/images/menu.svg"
              alt=""
              style="filter: invert(1)"
            />
            <span class="filter__name">{{item.category}}</span>
          </div>
          {%- endif -%} {%- endfor -%}
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  const categories = document.querySelectorAll(".filter__category");

  categories.forEach((item) => {
    item.addEventListener("click", () => {
      // Remove 'filter__category_active' class from all categories
      categories.forEach((i) => {
        i.classList.remove("filter__category_active");
      });

      // Add 'filter__category_active' class to the clicked category
      item.classList.add("filter__category_active");

      // Hide all elements with a 'data-category' attribute
      document.querySelectorAll("[data-category]").forEach((category) => {
        category.style.display = "none";
      });

      // Show elements that match the clicked category's data-category-name
      const elements = document.querySelectorAll(
        `[data-category="${item.dataset.categoryName}"]`
      );
      elements.forEach((element) => {
        element.style.display = "block";
      });
    });
  });
</script>
{%- endif -%}