<template>
  <div
    class="suggestions px-[1vw] md:px-[1.042vw] mt-[12vw] md:mt-[3.3vw] md:bg-white rounded-[0.781vw] flex flex-col gap-[0.417vw] pb-[1.667vw]"
  >
    <div
      class="ps-[1.5vw] border-b-[0.104vw] mt-[2vw] flex gap-x-[1vw] items-center text-[0.833vw] text-[#878787]"
    >
      <span
        class="text-[0.741vw] text-[#383E43] flex items-center gap-[0.5vw] pb-[0.681vw]"
      >
        <svg
        class="w-[6.154vw] md:w-[1.25vw] h-[6.154vw] md:h-[1.302vw]"
    
          viewBox="0 0 24 25"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M3 7.5H21"
            stroke="#383E43"
            stroke-width="1.5"
            stroke-linecap="round"
          />
          <path
            d="M6 12.5H18"
            stroke="#383E43"
            stroke-width="1.5"
            stroke-linecap="round"
          />
          <path
            d="M10 17.5H14"
            stroke="#383E43"
            stroke-width="1.5"
            stroke-linecap="round"
          />
        </svg>
        <span class="hidden md:block"> مرتب سازی بر اساس: </span>
        <span
          class="block md:hidden text-[3.59vw] py-[2vw] ps-[1vw]"
          @click="openSortOptions"
          >مرتب سازی</span
        >
      </span>
      <ul class="gap-x-[1vw] items-center hidden md:flex">
        <li
          class="relative pb-[0.681vw] text-primaryGreen active"
        >
          همه دوره ها
        </li>
        <li class="pb-[0.681vw]">دوره های رایگان</li>
        <li class="pb-[0.681vw]">ارزان ترین</li>
        <li class="pb-[0.681vw]">گران ترین</li>
      </ul>
    </div>
    <div v-if="loading"
      class="mt-[4.051vw] md:mt-[2.1vw] grid gap-[4vw] md:gap-[1.25vw] grid-cols-1 md:grid-cols-4"
    >
<Card />
<Card />
<Card />
<Card />
<Card />
<Card />
<Card />
<Card />
<Card />
<Card />
<Card />
<Card />
<Card />
<Card />
<Card />
<Card />
  </div>
  <div v-else
  class="mt-[4.051vw] md:mt-[2.1vw] grid gap-[4vw] md:gap-[1.25vw] grid-cols-1 md:grid-cols-4"
  >
  <Loading />
  <Loading />
  <Loading />
  <Loading />
  <Loading />
  <Loading />
  <Loading />
  <Loading />
  <Loading />
  <Loading />
  <Loading />
  <Loading />
  </div>

  </div>
</template>

<script setup>
const openSortOptions = () => {
  if (process.client) {
    document
      .getElementById("filters")
      .classList.remove("translate-y-[80.769vw]");
    document.getElementsByTagName("html")[0].classList.add("overflow-hidden");
    document.getElementById("brightnessFilter").style.filter =
      "brightness(50%)";
    document.getElementById("brightnessFilter").style.backdropFilter =
      "brightness(90%)";
  }
};
const loading = ref(false)
console.log(loading.value);
onMounted(() => {
  setTimeout(() => {
  loading.value = true 
  console.log(loading.value); 
  }, 5000);
})

</script>

<style>
.active::before{
  content: '';
  position: absolute;
  background-color: #0D3F40;
  width: 100%;
  height: 0.01vw;
  top: 2vw;
}
</style>