{% extends 'Layout/product_layout.html' %}
{% load ecom_tags %}
{% block content %}

<div class="px-4">
    <div class="flex justify-center font-bold text-3xl capitalize">
        {{page.title}}
    </div>
    <div class="-mt-8 mb-1 flex justify-end">


        <div class="flex gap-4 items-center">
            <span>
                {{total_products|length}} products
            </span>
            <!-- <button onclick="listView()" id="list_btn" class="text-xl font-bold">&#9776;</button>
            <button onclick="gridView()" id="grid_btn" class="text-xl font-bold bg-gray-300 px-2 py-1">&#9783;</button> -->
        </div>
    </div>
    <hr class="w-full bg-yellow-500 h-1">
    <div id="grid_view" class="mt-2 flex justify-center gap-4 flex-wrap ">
        {% for blog in total_products %}
        <div class="lg:w-1/5 md:w-1/2">
            <article class="shadow px-1 py-2">
                <a href="{{blog.url}}">
                    {% if blog.prRec %}
                    <h1
                        class="px-1 text-sm bg-[{{blog.prRec.recBgColor}}] text-[{{blog.prRec.recFgColor}}] rounded w-fit ">
                        {{blog.prRec}}
                    </h1>
                    {% elif blog.get_parent.specific.prRec %}
                    <h1
                        class="px-1 text-sm bg-[{{blog.get_parent.specific.prRec.recBgColor}}] text-[{{blog.get_parent.specific.prRec.recFgColor}}] rounded w-fit ">
                        {{blog.get_parent.specific.prRec}}
                    </h1>
                    {% endif %}
                    <div class="flex w-full justify-center">

                        <img src="{{blog.specific.search_image.file.url}}" alt="{{blog.title}}"
                            class="{% if blog.specific.search_image|img_ori == 'square' %} w-[280px] h-[280px] {% elif blog.specific.get_thumb_image|img_ori == 'landscape' %} w-[280px] min-h-[175px] max-h-[200px] {% else %} min-h-[300px] max-h-[310px] w-auto {% endif %} ">
                    </div>
                </a>
                {% if blog.specific.get_siblings.live.count > 1 %}
                <div class="my-1 flex justify-center gap-1">
                    {% for var in blog.specific.get_siblings.live %}
                    <a href="{{var.specific.url}}" title="{{var.specific.title}}"
                        class="bg-[{{var.specific.color}}] p-2 rounded-full border border-gray-900">

                    </a>
                    {% endfor %}
                </div>
                {% endif %}
                <span class="text-[16px] line-clamp-3 px-1">
                    {{blog.specific.customTitle|safe}}
                </span>
                {% if blog.specific.prodRating %}
                <div class="flex items-center text-xl text-gray-600 px-1">
                    <i class='bx bxs-star {% if blog.specific.prodRating >= 1 %} text-yellow-500 {% endif %}'></i>
                    <i class='bx bxs-star {% if blog.specific.prodRating >= 2 %} text-yellow-500 {% endif %}'></i>
                    <i class='bx bxs-star {% if blog.specific.prodRating >= 3 %} text-yellow-500 {% endif %}'></i>
                    <i class='bx bxs-star {% if blog.specific.prodRating >= 4 %} text-yellow-500 {% endif %}'></i>
                    <i class='bx bxs-star {% if blog.specific.prodRating >= 5 %} text-yellow-500 {% endif %}'></i>
                </div>
                {% endif %}
                <!-- Price -->
                {% if blog.specific.prodDealPrice or blog.specific.prodMRP %}
                <div class="flex items-center">
                    {% if blog.specific.prodDealPrice %}
                    <span class="flex items-center">

                        {{ settings.core.CurrencySettings.icon|safe }}
                        <h2 class="text-[21px] font-bold flex items-center mr-2">
                            {{blog.specific.prodDealPrice}}
                        </h2>
                    </span>
                    {% endif %}
                    {% if blog.specific.prodMRP %}
                    <h3
                        class="flex items-center {% if blog.specific.prodDealPrice %} text-[12px] {% else %}  text-[18px] {% endif %}">
                        M.R.P: &nbsp;
                        <span class="{% if blog.specific.prodDealPrice %} line-through {% endif %}">
                            {{blog.specific.prodMRP}}
                        </span>

                    </h3>
                    {% endif %}
                </div>
                {% else %}
                <h2 class="text-[21px] text-center text-red-500">Currently unavailable.</h2>
                {% endif %}
                <!-- Price // -->
                <div class="flex justify-between px-1">

                    {% if blog.specific.get_buy_now %}
                    <div class="flex text-sm">
                        <a href="{{blog.specific.get_buy_now}}" class="bg-orange-400 px-4 py-1.5 rounded-full">
                            Buy Now
                        </a>
                    </div>
                    {% endif %}
                    <div class="text-sm flex items-center gap-2 bg-orange-400 px-4  rounded-full">
                        <label>Compare</label>
                        <input type="checkbox" name="" id=""
                            onclick="add_to_compare('{{blog}}','{{blog.id}}','{{blog.subCat.cat}}')">
                    </div>
                </div>


            </article>
        </div>
        {% endfor %}
    </div>

</div>

<div class="fixed right-0 bottom-28 p-1 rounded border">
    <!-- <div id="add_to_me">
    </div> -->
    <!-- <a href="#" id="comp_button" class="px-4 py-1 rounded-xl bg-yellow-600 cursor-not-allowed opacity-50" disabled>Compare</a> -->
    <button id="comp_button" class="hidden px-4 py-1 rounded-xl bg-yellow-600 cursor-not-allowed opacity-50" disabled
        onclick="compare()">Compare
        (<span id="add_to_me"></span>)
    </button>
</div>
{% endblock content %}