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

{% block title %}{% translate "Bons de confection" %}{% 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 %}
<div class="d-flex justify-content-end mb-3">
    <a href="{% url 'mobile:production_order_create_mobile' %}" class="btn btn-primary btn-sm">
        <i class="bi bi-plus-lg me-1"></i>{% translate "Nouveau bon" %}
    </a>
</div>
{% if production_orders %}
    {% for order in production_orders %}
    <a href="{% url 'mobile:stock_production_order_detail_mobile' order.pk %}" class="list-card">
        <div class="d-flex justify-content-between align-items-start">
            <div class="list-card-title">
                {% if order.code %}{{ order.code }}{% else %}#{{ order.id }}{% endif %}
            </div>
            <span class="badge {{ order.status_badge_class }}">
                <i class="bi {{ order.status_icon }} me-1"></i>{{ order.get_status_display }}
            </span>
        </div>
        {% if order.product_design %}
        <div class="list-card-meta mt-1">
            <i class="bi bi-diagram-3 me-1"></i>{{ order.product_design.name }}
        </div>
        {% endif %}
        <div class="list-card-meta mt-1">
            <span class="me-3"><i class="bi bi-calendar3 me-1"></i>{{ order.created_at|date:"d/m/Y" }}</span>
            <span><i class="bi bi-building me-1"></i>{{ order.warehouse.name }}</span>
        </div>
        <div class="list-card-meta mt-1">
            <i class="bi bi-layers me-1"></i>{% translate "Qté" %} : {{ order.quantity }}
        </div>
    </a>
    {% endfor %}
{% else %}
    <div class="text-center text-muted py-5">
        <i class="bi bi-tools fs-1 d-block mb-2"></i>
        {% translate "Aucun bon de confection." %}
    </div>
{% endif %}
{% endblock content %}