{% extends "base/base.html" %}
{% load static %}
{% load humanize %}
{% block header %}
    {% include "base/meta_tags.html" %}
{% endblock header %}
{% block content %}
<div class="max-w-[1200px] mx-auto mt-40 flex flex-row p-4 gap-4">
    <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 hover:underline 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>

            <!-- دسته‌بندی -->
            <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
                <a href="/category" itemprop="item" class="text-text3 hover:underline flex items-center font-bold text-lg ">
                    <span itemprop="name">بست مگ</span>
                </a>
                <meta itemprop="position" content="2" />
            </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>

            <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" aria-current="page">
                <span itemprop="name" class="font-bold text-white text-lg text-nowrap">{%if this_cat %} {{this_cat.name}}{%else%}جدید ترین ها {% endif %}</span>
                <meta itemprop="position" content="3" />
            </li>
        </ol>
    </nav>
</div>

<div class="max-w-[1200px] mx-auto mt-2 p-4 gap-4 grid grid-cols-3">
    {% for item in posts %}
    <div class="rounded-[16px] overflow-hidden flex flex-col items-start justify-start w-full cart gradient-box hover:bg-white transition-all duration-300">
        <img src="{{item.image.url}}" class="w-full">
        <div class="p-4 flex flex-col items-start justify-start gap-2">
            <a href="" class="bg-[#FFFFFF4D] rounded-full border-2 border-text2 text-blue1 py-2 px-5 text-sm font-bold">{{item.category.name}}</a>
            <a href={{item.url}} class="text-sm text-blue1 font-bold">{{item.name}}</a>
            <p class="text-text3 font-medium text-[12px] text-wrap text-justify text-clamp">{{item.short_body|slice:300}}</p>
            <div class="flex flex-row gap-2 items-center justify-center">
                <svg width="19" height="20" viewBox="0 0 19 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path class="fill-text3" d="M16.6465 10.25C16.6465 7.64844 15.2402 5.25781 12.9902 3.92188C10.7051 2.62109 7.92773 2.62109 5.67773 3.92188C3.39258 5.25781 2.02148 7.64844 2.02148 10.25C2.02148 12.8867 3.39258 15.2773 5.67773 16.6133C7.92773 17.9141 10.7051 17.9141 12.9902 16.6133C15.2402 15.2773 16.6465 12.8867 16.6465 10.25ZM0.333984 10.25C0.333984 7.05078 2.02148 4.09766 4.83398 2.48047C7.61133 0.863281 11.0215 0.863281 13.834 2.48047C16.6113 4.09766 18.334 7.05078 18.334 10.25C18.334 13.4844 16.6113 16.4375 13.834 18.0547C11.0215 19.6719 7.61133 19.6719 4.83398 18.0547C2.02148 16.4375 0.333984 13.4844 0.333984 10.25ZM8.49023 5.46875C8.49023 5.01172 8.8418 4.625 9.33398 4.625C9.79102 4.625 10.1777 5.01172 10.1777 5.46875V9.82812L13.166 11.7969C13.5527 12.0781 13.6582 12.6055 13.4121 12.9922C13.1309 13.3789 12.6035 13.4844 12.2168 13.2031L8.8418 10.9531C8.63086 10.8125 8.49023 10.5312 8.49023 10.25V5.46875Z"/>
                </svg>
                <span class="text-text3 font-semibold text-[12px]">{{item.read_time}} دقیقه</span>
            </div>
        </div>
    </div>
    {%endfor%}
</div>
<div class="max-w-[1200px] mx-auto relative h-[298px] rounded-lg overflow-hidden mt-20 flex flex-row flex-wrap md:flex-nowrap justify-center items-center">
    <img class="-ml-[9%] z-50 pr-3 img-drp-shodow" src="{% static 'images/gift.png' %}">
    <div class="bg-contain lg:bg-cover w-full h-full flex flex-row justify-center items-center" style="background-image: url('{% static 'images/ticket.png' %}')">
        <div class="w-2/3 h-full flex flex-col items-center justify-center rounded-lg">
            <div class="w-[355px] flex flex-col items-center justify-center">
                <p class="text-blue1 text-3xl font-semibold">آقای فونت رو <span class="text-yellow1">رایگان</span> دریافت کن!</p>
                <p class="text-blue1 text-justify text-lg">هر روز به مدت 1 ماه، 10 نفر اول می توانندخرید و نصب افزونه رو به صورت رایگان دریافت کنند!</p>
            </div>
        </div>
        <div class="w-1/3 h-full flex flex-col items-center justify-center py-10 px-16 gap-10">
            <div class="flex flex-row items-center justify-center gap-2">
                <svg width="28" height="33" viewBox="0 0 28 33" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M19 9C19 7.25 18 5.625 16.5 4.6875C14.9375 3.8125 13 3.8125 11.5 4.6875C9.9375 5.625 9 7.25 9 9C9 10.8125 9.9375 12.4375 11.5 13.375C13 14.25 14.9375 14.25 16.5 13.375C18 12.4375 19 10.8125 19 9ZM6 9C6 6.1875 7.5 3.5625 10 2.125C12.4375 0.6875 15.5 0.6875 18 2.125C20.4375 3.5625 22 6.1875 22 9C22 11.875 20.4375 14.5 18 15.9375C15.5 17.375 12.4375 17.375 10 15.9375C7.5 14.5 6 11.875 6 9ZM3.0625 30H24.875C24.3125 26.0625 20.9375 23 16.8125 23H11.125C7 23 3.625 26.0625 3.0625 30ZM0 31.1875C0 25 4.9375 20 11.125 20H16.8125C23 20 28 25 28 31.1875C28 32.1875 27.125 33 26.125 33H1.8125C0.8125 33 0 32.1875 0 31.1875Z" fill="#FAFCFF"/>
                </svg>
                <p class="text-3xl text-text1 font-semibold pt-2">12 نفر باقیمانده</p>
            </div>
            <div class="h-[12px] w-full rounded-full bg-white overflow-visible p-1 flex flex-row justify-end items-end">
                <div class="h-full bg-blue1 rounded-full relative" style="width:50%">
                    <div class="absolute -bottom-[8px] -right-[8px] bg-white w-[23px] h-[23px] flex flex-col items-center justify-center shadow-xl rounded-full">
                        <div class="bg-blue1 w-[13px] h-[13px] rounded-full"></div>
                    </div>
                </div>
            </div>
            <a href="#" class="group bg-white text-blue1 font-bold text-base h-14 w-52 rounded-lg flex items-center justify-center transition-all duration-500 ease-in-out hover:bg-yellow2 custom-cursor-pointer">
                دریافت کد تخفیف
            </a>
        </div>
    </div>
</div>
{% endblock content %}