{% load unfold i18n %}

{% if  pending_count%}
<div dir='rtl' class="bg-base-50 border border-base-200 border-dashed flex flex-col gap-4 p-4 rounded dark:bg-white/[.02] dark:border-base-700 lg:flex-row lg:justify-between w-full shrink-0 lg:items-center" style="justify-content: space-between;">
    <div class="flex flex-col lg:flex-row lg:items-center">
        <h2 class="font-semibold text-font-important-light text-base dark:text-font-important-dark flex items-center">
            <span class="material-symbols-outlined md-18 mr-3 w-4.5 align-middle">notifications</span>
            <span class="align-middle" style="margin-right: 8px;">سفارش جدید داری</span>
            <span class="text-white bg-primary-800 py-1 px-2 rounded" style="margin-right: 8px;">{{ pending_count }} </span>
        </h2>
    </div>

    <div class="flex lg:flex-row lg:items-center">
        {% component "unfold/components/flex.html" with class="flex-col gap-4 lg:flex-row" %}
            {% component "unfold/components/button.html" with href="/admin/order/ordermodel/" %}
                نمایش سفارشات
            {% endcomponent %} 
        {% endcomponent %}
    </div>
</div>

{% endif %}

{% if  open_tickets_count%}
<div dir='rtl' class="bg-base-50 border border-base-200 border-dashed flex flex-col gap-4 p-4 rounded dark:bg-white/[.02] dark:border-base-700 lg:flex-row lg:justify-between w-full shrink-0 lg:items-center" style="justify-content: space-between;">
    <div class="flex flex-col lg:flex-row lg:items-center">
        <h2 class="font-semibold text-font-important-light text-base dark:text-font-important-dark flex items-center">
            <span class="material-symbols-outlined md-18 mr-3 w-4.5 align-middle">confirmation_number</span>
            <span class="align-middle" style="margin-right: 8px;">تیکت جدید داری</span>
            <span class="text-white bg-primary-800 py-1 px-2 rounded" style="margin-right: 8px;">{{ open_tickets_count }} </span>
        </h2>
    </div>

    <div class="flex lg:flex-row lg:items-center">
        {% component "unfold/components/flex.html" with class="flex-col gap-4 lg:flex-row" %}
            {% component "unfold/components/button.html" with href="/admin/ticket/ticket/" %}
                نمایش تیکت ها
            {% endcomponent %} 
        {% endcomponent %}
    </div>
</div>
{% endif %}