{% extends 'theme/base.html' %}
{% load static i18n %}

{% block main %}
{% include 'components/generic/navbar.html' %}
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
    <div class="mx-auto max-w-5xl">
        <h1 class="text-xl sm:text-2xl font-display font-bold mb-6">
            {% translate 'Mis pedidos' %}
        </h1>

        <div class="flex flex-col gap-4">
            {% for order in page %}
                <article class="rounded-2xl border border-base-300 bg-base-100 p-4 sm:p-6 flex flex-wrap items-center gap-4">
                    <dl class="flex-1 min-w-[8rem]">
                        <dt class="text-xs text-base-content/60">{% translate 'Número de pedido' %}</dt>
                        <dd class="font-semibold">
                            <a href="{% url 'web:order' uuid=order.uuid %}" class="hover:text-primary">
                                #{{ order.code }}
                            </a>
                        </dd>
                    </dl>

                    <dl class="flex-1 min-w-[8rem]">
                        <dt class="text-xs text-base-content/60">{% translate 'Fecha' %}</dt>
                        <dd class="font-semibold">{{ order.creation_date }}</dd>
                    </dl>

                    <dl class="flex-1 min-w-[6rem]">
                        <dt class="text-xs text-base-content/60">{% translate 'Total' %}</dt>
                        <dd class="font-semibold">{{ order.total }}€</dd>
                    </dl>

                    <div class="flex-1 min-w-[8rem] flex flex-wrap gap-1">
                        {% if order.status == 'PAI' %}
                            <span class="badge badge-success badge-sm">{% translate 'Pagado' %}</span>

                            {% if order.shipping_status == 'NOT' %}
                                <span class="badge badge-warning badge-sm">{% translate 'Tramitado' %}</span>
                            {% elif order.shipping_status == 'RDY' %}
                                <span class="badge badge-warning badge-sm">{% translate 'Preparado' %}</span>
                            {% elif order.shipping_status == 'TBS' %}
                                <span class="badge badge-warning badge-sm">{% translate 'Listo' %}</span>
                            {% elif order.shipping_status == 'SNT' %}
                                <span class="badge badge-info badge-sm">{% translate 'Enviado' %}</span>
                            {% elif order.shipping_status == 'DLV' %}
                                <span class="badge badge-success badge-sm">{% translate 'Entregado' %}</span>
                            {% endif %}
                        {% elif order.status == 'ERR' %}
                            <span class="badge badge-error badge-sm">{% translate 'Error' %}</span>
                        {% elif order.status == 'RTN' %}
                            <span class="badge badge-warning badge-sm">{% translate 'Devuelto' %}</span>
                        {% endif %}
                    </div>

                    <a href="{% url 'web:order' uuid=order.uuid %}" class="btn btn-outline btn-sm w-full lg:w-auto">
                        {% translate 'Ver pedido' %}
                    </a>
                </article>
            {% endfor %}
        </div>
    </div>
</div>
{% endblock %}