{% extends 'mobile/mobile_base.html' %}
{% load static %}
{% load i18n %}

{% block title %}{% translate "Commandes" %}{% endblock title %}

{% block upleft %}
<a href="{% url 'mobile:stock_index_mobile' %}" class="nav-link" style="color: white;">
    <i class="bi bi-arrow-left fs-3"></i>
</a>
{% endblock upleft %}

{% block extra_head %}
<style>
    .list-card {
        border-radius: 0.75rem;
        border: 1px solid #dee2e6;
        background: #fff;
        padding: 1rem;
        margin-bottom: 0.75rem;
        text-decoration: none;
        color: inherit;
        display: block;
        box-shadow: 0 2px 6px rgba(47,62,139,0.06);
        transition: transform 0.15s, box-shadow 0.15s;
    }
    .list-card:hover, .list-card:focus {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(47,62,139,0.12);
        color: inherit;
    }
    .list-card-title { font-weight: 600; font-size: 1rem; }
    .list-card-meta { font-size: 0.83rem; color: #6c757d; }
</style>
{% endblock extra_head %}

{% block content %}
{% if purchase_orders %}
    {% for order in purchase_orders %}
    <a href="{% url 'mobile:stock_purchase_order_detail_mobile' order.pk %}" class="list-card">
        <div class="d-flex justify-content-between align-items-start">
            <div class="list-card-title">{{ order.code|default:order.id }}</div>
            {% if order.status == 'pending' %}
                <span class="badge bg-warning text-dark">{% translate "En attente" %}</span>
            {% elif order.status == 'ordered' %}
                <span class="badge bg-info text-dark">{% translate "Envoyée" %}</span>
            {% elif order.status == 'received' %}
                <span class="badge bg-success">{% translate "Reçue" %}</span>
            {% elif order.status == 'cancelled' %}
                <span class="badge bg-secondary">{% translate "Annulée" %}</span>
            {% else %}
                <span class="badge bg-light text-dark">{{ order.get_status_display }}</span>
            {% endif %}
        </div>
        <div class="list-card-meta mt-1">
            <i class="bi bi-shop me-1"></i>{{ order.supplier.name }}
        </div>
        <div class="list-card-meta mt-1">
            <span class="me-3"><i class="bi bi-calendar3 me-1"></i>{{ order.date_ordered|date:"d/m/Y" }}</span>
            <span><i class="bi bi-building me-1"></i>{{ order.warehouse.name }}</span>
        </div>
    </a>
    {% endfor %}
{% else %}
    <div class="text-center text-muted py-5">
        <i class="bi bi-cart3 fs-1 d-block mb-2"></i>
        {% translate "Aucune commande." %}
    </div>
{% endif %}
{% endblock content %}