{% extends "base/base.html" %}
{% load static %}
{% load humanize %}
{% block header %}
    <script defer src="{% static 'js/alpinejs.min.js' %}"></script>
    {% include "base/meta_tags.html" %}
{% endblock header %}
{% block content %}
<div class="mt-36 flex flex-row px-6">
    <nav class="flex flex-row " aria-label="Breadcrumb">
        <ol class="flex items-center gap-3" itemscope itemtype="https://schema.org/BreadcrumbList">
            <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
                <a href="{% url 'front:index_fun' %}" itemprop="item" class="text-text3 flex items-center font-bold text-lg ">
                    <span itemprop="name" class="text-nowrap custom-cursor-pointer">بست جاستیفای</span>
                </a>
                <meta itemprop="position" content="1" />
            </li>

            <li>
                <svg width="9" height="14" viewBox="0 0 9 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path opacity="0.7" d="M1.02734 6.15234L6.65234 0.5625C6.96875 0.210938 7.49609 0.210938 7.84766 0.5625C8.16406 0.878906 8.16406 1.40625 7.84766 1.72266L2.78516 6.75L7.8125 11.8125C8.16406 12.1289 8.16406 12.6562 7.8125 12.9727C7.49609 13.3242 6.96875 13.3242 6.65234 12.9727L1.02734 7.34766C0.675781 7.03125 0.675781 6.50391 1.02734 6.15234Z" fill="white"/>
                </svg>
            </li>

            {% comment %} <!-- دسته‌بندی -->
            <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
                <a href="/category" itemprop="item" class="text-blue-600 hover:underline">
                    <span itemprop="name">دسته‌بندی</span>
                </a>
                <meta itemprop="position" content="2" />
            </li>

            <!-- جداکننده -->
            <li>
                <span class="text-gray-500">/</span>
            </li> {% endcomment %}

            <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" aria-current="page">
                <span itemprop="name" class="font-bold text-white text-lg text-nowrap">محصولات</span>
                <meta itemprop="position" content="2" />
            </li>
        </ol>
    </nav>
</div>
<div class="max-w-[1200px] mt-4 border-b-2 border-text3 flex flex-row items-start justify-between pb-6 mx-6">
    <p class="font-bold text-2xl text-white"><span class="text-yellow1"> {{product_count}} </span> محصول </p>

    <div class="border-2 border-white rounded-lg flex items-center justify-center py-2 px-10 gap-2">
        <svg width="14" height="13" viewBox="0 0 14 13" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M0 1.77344C0 1.14453 0.492188 0.625 1.12109 0.625H12.8516C13.4805 0.625 14 1.14453 14 1.77344C14 2.04688 13.8906 2.29297 13.7266 2.48438L9.1875 8.08984V12C9.1875 12.4922 8.77734 12.875 8.28516 12.875C8.09375 12.875 7.90234 12.8203 7.73828 12.6836L5.22266 10.6875C4.94922 10.4688 4.8125 10.168 4.8125 9.83984V8.08984L0.246094 2.48438C0.0820312 2.29297 0 2.04688 0 1.77344ZM1.50391 1.9375L5.96094 7.43359C6.07031 7.57031 6.125 7.70703 6.125 7.84375V9.73047L7.875 11.125V7.84375C7.875 7.70703 7.90234 7.57031 8.01172 7.43359L12.4961 1.9375H1.50391Z" fill="white"/>
        </svg>
        <span class="text-white text-base/6 font-bold pt-1">فیلترها</span>
        <span class="rounded-full bg-red-300 p-1 text-red-500 aspect-square text-xs/3 pt-2 pb-0 px-2">2</span>
    </div>
</div>
<div class="flex flex-row justify-between overflow-auto pt-5 scrollbar-hide mx-6">
    <div class="w-44 flex items-center justify-start gap-2 pr-2 px-6 sticky bg-blue1 top-0 right-0 py-5">
        <svg width="13" height="11" viewBox="0 0 13 11" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M0 1.15628C0 0.800812 0.273438 0.500031 0.65625 0.500031H11.5938C11.9492 0.500031 12.25 0.800812 12.25 1.15628C12.25 1.53909 11.9492 1.81253 11.5938 1.81253H0.65625C0.273438 1.81253 0 1.53909 0 1.15628ZM1.75 5.53128C1.75 5.17581 2.02344 4.87503 2.40625 4.87503H9.84375C10.1992 4.87503 10.5 5.17581 10.5 5.53128C10.5 5.91409 10.1992 6.18753 9.84375 6.18753H2.40625C2.02344 6.18753 1.75 5.91409 1.75 5.53128ZM7.875 9.90628C7.875 10.2891 7.57422 10.5625 7.21875 10.5625H5.03125C4.64844 10.5625 4.375 10.2891 4.375 9.90628C4.375 9.55081 4.64844 9.25003 5.03125 9.25003H7.21875C7.57422 9.25003 7.875 9.55081 7.875 9.90628Z" fill="white"/>
        </svg>
        <span class="text-nowrap text-white">نمایش بر اساس</span>
    </div>
    <div class="md:hidden flex items-center justify-end gap-2">
        <div class="flex items-center justify-center w-32 h-14 text-blue1 rounded-lg sort-filter custom-cursor-pointer {%if sort_by == 'newest' %} bg-text1 font-bold {%else%} bg-white font-semibold {%endif%}" data-sort-by="newest">جدید ترین</div>
        <div class="flex items-center justify-center w-32 h-14 text-blue1 rounded-lg sort-filter custom-cursor-pointer {%if sort_by == 'best_selling' %} bg-text1 font-bold {%else%} bg-white font-semibold {%endif%}" data-sort-by="best_selling">پرفروش ترین</div>
        <div class="flex items-center justify-center w-32 h-14 text-blue1 rounded-lg sort-filter custom-cursor-pointer {%if sort_by == 'most_popular' %} bg-text1 font-bold {%else%} bg-white font-semibold {%endif%}" data-sort-by="most_popular">محبوب ترین</div>
        <div class="flex items-center justify-center w-32 h-14 text-blue1 rounded-lg sort-filter custom-cursor-pointer {%if sort_by == 'most_expensive' %} bg-text1 font-bold {%else%} bg-white font-semibold {%endif%}" data-sort-by="most_expensive">گران ترین</div>
        <div class="flex items-center justify-center w-32 h-14 text-blue1 rounded-lg sort-filter custom-cursor-pointer {%if sort_by == 'cheapest' %} bg-text1 font-bold {%else%} bg-white font-semibold {%endif%}" data-sort-by="cheapest">ارزان ترین</div>
        <div class="flex items-center justify-center w-32 h-14 text-blue1 rounded-lg sort-filter custom-cursor-pointer {%if sort_by == 'trending' %} bg-text1 font-bold {%else%} bg-white font-semibold {%endif%} ml-4" data-sort-by="trending">ترند ترین</div>
    </div>
</div>
<div class="flex flex-row px-6">
    <div class="hidden md:block w-1/4 pt-10 pl-4">

        <div class="relative flex items-center border rounded-lg p-2 bg-white border-1 border-text2 h-14 custom-cursor-pointer">
            <div class="flex items-center pl-2 h-full">
                <svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12.9375 7.5625C12.9375 5.55859 11.8477 3.73047 10.125 2.71094C8.36719 1.69141 6.22266 1.69141 4.5 2.71094C2.74219 3.73047 1.6875 5.55859 1.6875 7.5625C1.6875 9.60156 2.74219 11.4297 4.5 12.4492C6.22266 13.4688 8.36719 13.4688 10.125 12.4492C11.8477 11.4297 12.9375 9.60156 12.9375 7.5625ZM11.8477 13.3281C10.582 14.3125 9 14.875 7.3125 14.875C3.26953 14.875 0 11.6055 0 7.5625C0 3.55469 3.26953 0.25 7.3125 0.25C11.3203 0.25 14.625 3.55469 14.625 7.5625C14.625 9.28516 14.0273 10.8672 13.043 12.1328L17.7539 16.8086C18.0703 17.1602 18.0703 17.6875 17.7539 18.0039C17.4023 18.3555 16.875 18.3555 16.5586 18.0039L11.8477 13.3281Z" fill="#001D3E"/>
                </svg>
            </div>
            <div class="relative w-full">
                <input type="text" id="search" name="search" class="peer h-12 w-full px-3 pt-4 outline-none bg-transparent placeholder-transparent focus:border-blue1 transition-all duration-200"/>
                <label for="search" class="text-base absolute right-3 top-3 text-gray-500 transition-all duration-200 peer-placeholder-shown:top-2 peer-placeholder-shown:text-gray-500  peer-placeholder-shown:text-base peer-focus:top-1 peer-focus:text-sm peer-focus:text-blue1 px-1">
                    جستجوی نام محصول
                </label>
            </div>
        </div>

        <div class="border-t-2 border-text3 rounded-full w-full my-6"></div>

        <div x-data="{ expanded: false, showButton: false }" x-init="$nextTick(() => { let contentHeight = $refs.content.scrollHeight; showButton = contentHeight > 262; })"  class="max-w-lg mx-auto">
            <div x-ref="content" class="category-container overflow-hidden transition-all duration-500 ease-in-out" :class="expanded ? 'max-h-[1000px]' : 'max-h-[262px]'">
                <div class="flex justify-between items-center mb-3">
                    <div class="flex justify-start items-center gap-2">
                        <svg width="16" height="7" viewBox="0 0 16 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path opacity="0.7" d="M15.875 1.00003C15.875 1.49222 15.4883 1.84378 15.0312 1.84378H0.96875C0.476562 1.84378 0.125 1.49222 0.125 1.00003C0.125 0.542999 0.476562 0.156281 0.96875 0.156281H15.0312C15.4883 0.156281 15.875 0.542999 15.875 1.00003ZM15.875 5.50003C15.875 5.99222 15.4883 6.34378 15.0312 6.34378H0.96875C0.476562 6.34378 0.125 5.99222 0.125 5.50003C0.125 5.043 0.476562 4.65628 0.96875 4.65628H15.0312C15.4883 4.65628 15.875 5.043 15.875 5.50003Z" fill="white"/>
                        </svg>
                        <p class="font-semibold text-base text-white">دسته بندی محصولات</p>
                    </div>
                    <p class="font-semibold text-base text-white">{{product_count}}</p>
                </div>
                {% for item in categorys %}
                    <div class="flex justify-between items-center mb-3">
                        <label class="flex items-center cursor-pointer space-x-2 custom-cursor-pointer">
                            <input type="checkbox" class="hidden peer category-filter" data-slug="{{ item.slug }}" value="{{ item.slug }}" 
                                {% if item.slug in selected_categories %}checked{% endif %}>
                            <div class="w-6 h-6 border-2 border-gray-500 rounded-md flex items-center justify-center peer-checked:bg-white peer-checked:border-white transition-all duration-300">
                                <svg width="11" height="9" class="w-4 h-4 peer-checked:opacity-100 transition-all duration-200" viewBox="0 0 11 9" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M10.5859 0.914093C10.7969 1.14847 10.7969 1.50003 10.5859 1.71097L4.39844 7.89847C4.16406 8.13284 3.8125 8.13284 3.60156 7.89847L0.414062 4.71097C0.179688 4.50003 0.179688 4.14847 0.414062 3.93753C0.625 3.70316 0.976562 3.70316 1.1875 3.93753L3.97656 6.72659L9.78906 0.914093C10 0.703156 10.3516 0.703156 10.5625 0.914093H10.5859Z" fill="#001D3E"/>
                                </svg>
                            </div>
                            <span class="text-white text-base font-medium">{{ item.name }}</span>
                        </label>
                        <p class="font-semibold text-base text-white">{{ item.get_product_count }}</p>
                    </div>
                {% endfor %}
            </div>

            <button x-show="showButton" @click="expanded = !expanded" 
                    class="flex items-center justify-center w-full mt-2 px-4 py-2 text-white font-semibold rounded-lg transition-all duration-300 custom-cursor-pointer">
                <span x-text="expanded ? 'مشاهده کمتر' : 'مشاهده بیشتر'"></span>
                <svg class="w-5 h-5 ml-2 transform transition-transform duration-300" 
                    :class="expanded ? 'rotate-180' : 'rotate-0'" 
                    fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path>
                </svg>
            </button>
        </div>

        <div class="border-t-2 border-text3 rounded-full w-full my-6"></div>
        <div class="feature-container">
            <!-- فقط محصولات موجود -->
            <div class="flex items-center justify-between mb-3">
                <p class="font-semibold text-base text-white">فقط محصولات موجود</p>
                <label class="relative flex items-center cursor-pointer w-fit custom-cursor-pointer">
                    <input type="checkbox" class="sr-only peer filter-toggle" data-param="is_for_sale" {% if is_for_sale %}checked{% endif %}>
                    <div class="w-12 h-6 bg-text3 rounded-full transition-all duration-500 peer-checked:bg-yellow1 before:absolute before:w-6 before:h-6 before:bg-white before:rounded-full before:top-0 before:right-0 before:transition-all before:duration-500 peer-checked:before:left-0 peer-checked:before:right-auto"></div>
                </label>
            </div>

            <!-- محصولات اختصاصی بست -->
            <div class="flex items-center justify-between mb-3">
                <p class="font-semibold text-base text-white ">محصولات اختصاصی بست</p>
                <label class="relative flex items-center cursor-pointer w-fit custom-cursor-pointer">
                    <input type="checkbox" class="sr-only peer filter-toggle" data-param="is_for_best" {% if is_for_best %}checked{% endif %}>
                    <div class="w-12 h-6 bg-text3 rounded-full transition-all duration-500 peer-checked:bg-yellow1 before:absolute before:w-6 before:h-6 before:bg-white before:rounded-full before:top-0 before:right-0 before:transition-all before:duration-500 peer-checked:before:left-0 peer-checked:before:right-auto"></div>
                </label>
            </div>

            <!-- ویژگی‌های محصولات -->
            {% for item in unique_features %}
                <div class="flex items-center justify-between mb-3">
                    <p class="font-semibold text-base text-white">{{ item.features__name }}</p>
                    <label class="relative flex items-center cursor-pointer w-fit custom-cursor-pointer">
                        <input type="checkbox" class="sr-only peer feature-filter" data-feature="{{ item.features__id }}"
                            {% if item.features__id in features_selected %}checked{% endif %}>
                        <div class="w-12 h-6 bg-text3 rounded-full transition-all duration-500 peer-checked:bg-yellow1 
                            before:absolute before:w-6 before:h-6 before:bg-white before:rounded-full before:top-0  
                            before:right-0 before:transition-all before:duration-500 peer-checked:before:left-0 peer-checked:before:right-auto">
                        </div>
                    </label>
                </div>
            {% endfor %}
        </div>

        <div class="border-t-2 border-text3 rounded-full w-full my-6"></div>
        
        <div class="flex justify-start items-center gap-2 mb-3">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path opacity="0.7" d="M7.05078 0.375122C7.64844 0.375122 8.21094 0.621216 8.63281 1.04309L14.8203 7.23059C15.6992 8.1095 15.6992 9.5509 14.8203 10.4298L10.1445 15.1056C9.26562 15.9845 7.82422 15.9845 6.94531 15.1056L0.757812 8.91809C0.335938 8.49622 0.125 7.93372 0.125 7.33606V2.06262C0.125 1.14856 0.863281 0.375122 1.8125 0.375122H7.05078ZM1.8125 7.33606C1.8125 7.47668 1.84766 7.61731 1.95312 7.72278L8.14062 13.9103C8.35156 14.1212 8.73828 14.1212 8.94922 13.9103L13.625 9.2345C13.8711 9.02356 13.8711 8.63684 13.625 8.4259L7.4375 2.2384C7.33203 2.13293 7.19141 2.06262 7.05078 2.06262H1.8125V7.33606ZM4.0625 3.18762C4.66016 3.18762 5.1875 3.71497 5.1875 4.31262C5.1875 4.94543 4.66016 5.43762 4.0625 5.43762C3.42969 5.43762 2.9375 4.94543 2.9375 4.31262C2.9375 3.71497 3.42969 3.18762 4.0625 3.18762Z" fill="white"/>
            </svg>

            <p class="font-semibold text-base text-white">بازه قیمت محصولات</p>
        </div>
        <div class="flex flex-row items-center justify-between">
            <!-- قیمت از -->
            <div x-data="{ price: '' }" class="custom-cursor-pointer w-32 h-14 rounded-lg bg-white border-2 border-text1 px-4 flex flex-row flex-nowrap items-center justify-between">
                <input type="text" x-model="price" id="min-price" name="min-price" placeholder="قیمت از" class="h-14 w-full outline-none bg-transparent placeholder-text2 transition-all duration-200 text-blue1">
                <span x-show="price" class="text-text2 text-xs text-nowrap transition-opacity duration-200">
                    هزار تومان
                </span>
            </div>
            
            <!-- قیمت تا -->
            <div x-data="{ price: '' }" class="custom-cursor-pointer w-32 h-14 rounded-lg bg-white border-2 border-text1 px-4 flex flex-row flex-nowrap items-center justify-between">
                <input type="text" x-model="price" id="max-price" name="max-price" placeholder="قیمت تا" class="h-14 w-full outline-none bg-transparent placeholder-text2 transition-all duration-200 text-blue1">
                <span x-show="price" class="text-text2 text-xs text-nowrap transition-opacity duration-200">
                    هزار تومان
                </span>
            </div>
        </div>
    </div>
    <div class="w-full pt-6 grid grid-cols-1 gap-4 pb-5 product-container">
        {%for item in products %}
        <div class="relative border-2 rounded-[16px] border-text2 gradient-box product-cart gradient-box overflow-hidden top-0 transition ease-in-out duration-700" data-row="{{ forloop.counter }}">
            <div class="overflow-hidden relative flex !justify-between flex-col">
                <img src="{{item.image.url}}" alt="{{item.img_alt}}" class="w-full h-[180px] object-cover">
                <h3 class="text-sm font-semibold text-white  p-4 text-justify">{{item.name}}</h3>
                <div class="flex items-center justify-between px-4 pt-4 w-full">
                    <div class="flex items-center justify-start gap-2">
                        <svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path opacity="0.7" d="M9.875 0.5625L11.9062 4.71875L16.375 5.375C16.75 5.4375 17.0625 5.6875 17.1875 6.0625C17.3125 6.40625 17.2188 6.8125 16.9375 7.0625L13.6875 10.2812L14.4688 14.8438C14.5312 15.2188 14.375 15.5938 14.0625 15.8125C13.75 16.0625 13.3438 16.0625 13 15.9062L9 13.75L4.96875 15.9062C4.65625 16.0625 4.25 16.0625 3.9375 15.8125C3.625 15.5938 3.46875 15.2188 3.53125 14.8438L4.28125 10.2812L1.03125 7.0625C0.78125 6.8125 0.6875 6.40625 0.78125 6.0625C0.90625 5.6875 1.21875 5.4375 1.59375 5.375L6.09375 4.71875L8.09375 0.5625C8.25 0.21875 8.59375 0 9 0C9.375 0 9.71875 0.21875 9.875 0.5625Z" fill="#DAA520"/>
                        </svg>
                        <p class="text-yellow1 font-bold">{{item.get_rate}}</p>
                        <svg width="18" height="17" viewBox="0 0 18 17" class="mr-2" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path class="fill-white" opacity="0.7" d="M0.75 0H2.15625C2.84375 0 3.46875 0.40625 3.75 1H16.5938C17.4062 1 18 1.78125 17.7812 2.59375L16.5 7.34375C16.25 8.34375 15.3438 9 14.3438 9H5.3125L5.5 9.90625C5.5625 10.25 5.875 10.5 6.21875 10.5H15.25C15.6562 10.5 16 10.8438 16 11.25C16 11.6875 15.6562 12 15.25 12H6.21875C5.15625 12 4.21875 11.25 4.03125 10.1875L2.40625 1.71875C2.375 1.59375 2.28125 1.5 2.15625 1.5H0.75C0.3125 1.5 0 1.1875 0 0.75C0 0.34375 0.3125 0 0.75 0ZM4.09375 2.5L5.03125 7.5H14.3438C14.6875 7.5 14.9688 7.28125 15.0625 6.96875L16.25 2.5H4.09375ZM5.5 16C4.9375 16 4.46875 15.7188 4.1875 15.25C3.90625 14.8125 3.90625 14.2188 4.1875 13.75C4.46875 13.3125 4.9375 13 5.5 13C6.03125 13 6.5 13.3125 6.78125 13.75C7.0625 14.2188 7.0625 14.8125 6.78125 15.25C6.5 15.7188 6.03125 16 5.5 16ZM16 14.5C16 15.0625 15.6875 15.5312 15.25 15.8125C14.7812 16.0938 14.1875 16.0938 13.75 15.8125C13.2812 15.5312 13 15.0625 13 14.5C13 13.9688 13.2812 13.5 13.75 13.2188C14.1875 12.9375 14.7812 12.9375 15.25 13.2188C15.6875 13.5 16 13.9688 16 14.5Z"/>
                        </svg>
                        <p class="text-white font-bold">{{item.get_sales_count}}</p>
                    </div>
                    <p class="text-white font-semibold text-base"> {{item.price|intcomma}} <span class="text-text2 text-sm  "> تومان </span></p>
                </div>
                <div class="flex  justify-center items-center gap-2 p-4 overflow-hidden ">
                    <a href="{{item.preview_url}}" class="w-full p-3 flex items-center justify-center border-2 rounded-lg gap-2 preveiw-btn bg-white text-blue1 transition ease-in-out duration-700 custom-cursor-pointer">
                        <svg width="19" height="14" viewBox="0 0 19 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path class="fill-blue1" opacity="0.7" d="M10 1.5C7.9375 1.5 6.28125 2.4375 5 3.625C3.78125 4.75 2.96875 6.0625 2.53125 7C2.96875 7.9375 3.78125 9.28125 5 10.4062C6.28125 11.5938 7.9375 12.5 10 12.5C12.0312 12.5 13.6875 11.5938 14.9688 10.4062C16.1875 9.28125 17.0312 7.9375 17.4375 7C17.0312 6.0625 16.1875 4.75 15 3.625C13.6875 2.4375 12.0312 1.5 10 1.5ZM3.96875 2.53125C5.4375 1.15625 7.46875 0 10 0C12.5 0 14.5312 1.15625 16 2.53125C17.4688 3.90625 18.4375 5.5 18.9062 6.625C19 6.875 19 7.15625 18.9062 7.40625C18.4375 8.5 17.4688 10.125 16 11.5C14.5312 12.875 12.5 14 10 14C7.46875 14 5.4375 12.875 3.96875 11.5C2.5 10.125 1.53125 8.5 1.0625 7.40625C0.96875 7.15625 0.96875 6.875 1.0625 6.625C1.53125 5.5 2.5 3.875 3.96875 2.53125ZM10 9.5C11.375 9.5 12.5 8.40625 12.5 7C12.5 5.625 11.375 4.5 10 4.5C9.96875 4.5 9.9375 4.5 9.9375 4.5C9.96875 4.6875 10 4.84375 10 5C10 6.125 9.09375 7 8 7C7.8125 7 7.65625 7 7.5 6.9375C7.5 6.96875 7.5 7 7.5 7C7.5 8.40625 8.59375 9.5 10 9.5ZM10 3C11.4062 3 12.7188 3.78125 13.4375 5C14.1562 6.25 14.1562 7.78125 13.4375 9C12.7188 10.25 11.4062 11 10 11C8.5625 11 7.25 10.25 6.53125 9C5.8125 7.78125 5.8125 6.25 6.53125 5C7.25 3.78125 8.5625 3 10 3Z"/>
                        </svg>
                        <p class="text-sm font-semibold text-nowrap">پیش نمایش</p>
                    </a>
                    <a href="{{item.url}}" class="text-sm font-semibold w-full p-3 rounded-lg gap-2 bg-yellow1 text-nowrap text-white border-2 border-yellow1 transition ease-in-out duration-700 custom-cursor-pointer flex items-center justify-center">
                        مشاهده محصول
                    </a>
                </div>
            </div>
        </div>
        {%endfor%}
    </div>
</div>
{% endblock content %}
{% block js %}
    <script type="module" src="{% static 'js/shop.js' %}"></script>
{% endblock js %}