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

{% block main %}
{% include 'components/generic/navbar.html' %}
<div class="mx-auto max-w-screen-xl px-4 2xl:px-0">
    <div class="mx-auto max-w-5xl">
        <div class="gap-4">
            <h1 class="text-xl font-semibold text-gray-900 dark:text-white sm:text-2xl my-4">
                {% translate 'Mis pedidos' %}
            </h1>

            <div class="mt-6 flow-root sm:mt-8">
                <div class="divide-y divide-gray-200 dark:divide-gray-700">
                    {% for order in page %}

                    <article class="flex flex-wrap items-center gap-y-4 py-6">
                        <dl class="w-1/2 sm:w-1/4 lg:w-auto lg:flex-1 px-4">
                            <dt class="text-base font-medium text-gray-500 dark:text-gray-400">
                                {% translate 'Número de pedido' %}
                            </dt>
                            <dd class="mt-1.5 text-base font-semibold text-gray-900 dark:text-white">
                                <a href="{% url 'web:order' uuid=order.uuid %}" class="hover:underline">
                                    #{{ order.code }}
                                </a>
                            </dd>
                        </dl>

                        <dl class="w-1/2 sm:w-1/4 lg:w-auto lg:flex-1 px-4">
                            <dt class="text-base font-medium text-gray-500 dark:text-gray-400">
                                {% translate 'Fecha' %}
                            </dt>
                            <dd class="mt-1.5 text-base font-semibold text-gray-900 dark:text-white">
                                {{ order.creation_date }}
                            </dd>
                        </dl>

                        <dl class="w-1/2 sm:w-1/4 lg:w-auto lg:flex-1 px-4">
                            <dt class="text-base font-medium text-gray-500 dark:text-gray-400">
                                {% translate 'Total' %}
                            </dt>
                            <dd class="mt-1.5 text-base font-semibold text-gray-900 dark:text-white">
                                {{ order.total }}€
                            </dd>
                        </dl>

                        <dl class="w-1/2 sm:w-1/4 lg:w-auto lg:flex-1 px-4">

                            {% if order.status == 'PAI' %}
                            <dd class="inline-flex bg-green-100 text-green-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-green-900 dark:text-green-300">
                                {% translate 'Pagado' %}
                            </dd>

                            {% if order.shipping_status == 'NOT' %}
                            <dd class="inline-flex bg-yellow-100 text-yellow-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-yellow-900 dark:text-yellow-300">
                                {% translate 'Tramitado' %}
                            </dd>
                            {% elif order.shipping_status == 'RDY' %}
                            <dd class="inline-flex bg-yellow-100 text-yellow-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-yellow-900 dark:text-yellow-300">
                                {% translate 'Preparado' %}
                            </dd>
                            {% elif order.shipping_status == 'TBS' %}
                            <dd class="inline-flex bg-yellow-100 text-yellow-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-yellow-900 dark:text-yellow-300">
                                {% translate 'Listo' %}
                            </dd>
                            {% elif order.shipping_status == 'SNT' %}
                            <dd class="inline-flex bg-blue-100 text-blue-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-blue-900 dark:text-blue-300">
                                {% translate 'Enviado' %}
                            </dd>
                            {% elif order.shipping_status == 'DLV' %}
                            <dd class="inline-flex bg-green-100 text-green-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-green-900 dark:text-green-300">
                                {% translate 'Entregado' %}
                            </dd>
                            {% endif %}

                            {% elif order.status == 'ERR' %}
                            <dd class="inline-flex bg-red-100 text-red-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-red-900 dark:text-red-300">
                                {% translate 'Error' %}
                            </dd>
                            {% elif order.status == 'RTN' %}
                            <dd class="inline-flex bg-yellow-100 text-yellow-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-yellow-900 dark:text-yellow-300">
                                {% translate 'Devuelto' %}
                            </dd>
                            {% endif %}
                        </dl>

                        <a href="{% url 'web:order' uuid=order.uuid %}"
                           class="w-full inline-flex justify-center rounded-lg  border border-gray-200 bg-white px-3 py-2 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:outline-none focus:ring-4 focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700 lg:w-auto">
                            {% translate 'Ver pedido' %}
                        </a>
                    </article>

                    {% endfor %}

                </div>
            </div>

        </div>
    </div>
</div>
{% endblock %}