{% extends "base.html" %}
{% load ecom_tags %}
{% block breadcrumb %}

<p class="py-1 px-4 text-[14px] text-left">
    <a href="/" aria-label="Home">
        <i class='bx bxs-home'></i>
    </a>
    <span>
        >
    </span>

    <span class="opacity-70">
        Compare
    </span>
</p>

{% endblock breadcrumb%}


{% block content %}

<div class="p-4 ">
    <table class="w-full table-fixed ">
        <thead>
            <tr>
                <th class="w-36">.
                </th>
                {% for similar in prodList %}
                <th class="px-4 shadow shadow-orange-100">
                    <a href="{{similar.url}}">
                        <div class="flex w-full justify-center">

                            <img src="{{similar.search_image.file.url}}" alt="{{similar.title}}" class="w-60">
                        </div>
                        <h1 class="text-left text-sm opacity-80 font-normal line-clamp-3">
                            {{similar.customTitle|safe}}
                        </h1>
                    </a>
                </th>
                {% endfor %}
            </tr>
        </thead>
        <tbody class="text-sm">
            <tr class="border border-gray-300 odd:bg-zinc-100 odd:shadow odd:shadow-orange-100">
                <th class="text-left px-2">Price</th>
                {% for similar in prodList %}
                <td class="px-4">
                    <b class="text-lg">{{similar.prodDealPrice}}</b>
                    <br />
                    <h1 class="opacity-80">
                        M.R.P: <span class="line-through">{{similar.prodMRP}}</span>
                    </h1>
                </td>
                {% endfor %}
            </tr>
        </tbody>
    </table>
    <div class="overflow-y-auto h-60">
        <table class="w-full table-fixed ">
            <tbody class="text-sm">
                {% for attr in prodAttrs %}
                <tr class="[&>th]:py-1.5 border border-gray-300 even:bg-zinc-100 odd:shadow even:shadow-orange-100">
                    <th class="text-left px-2">{{attr}}</th>
                    {% for similar in prodList %}
                    <td class="px-4">
                        <!-- {{similar}} -->
                        {% prod_var_av_compare similar.id attr as pav %}

                        {% if pav.value_text %}
                        {{pav.value_text}}
                        {% else %}
                        -
                        {% endif %}

                    </td>
                    {% endfor %}
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

</div>

{% endblock content %}