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

{% block title %}{% translate "Inventaires" %}{% 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:stock_new_inventory_mobile' %}" class="btn btn-primary btn-sm">
        <i class="bi bi-plus-lg me-1"></i>{% translate "Nouvel inventaire" %}
    </a>
</div>
{% if inventories %}
    {% for inventory in inventories %}
    <a href="{% url 'mobile:stock_inventory_detail_mobile' inventory.pk %}" class="list-card">
        <div class="d-flex justify-content-between align-items-start">
            <div class="list-card-title">{% translate "Inventaire" %} #{{ inventory.id }}</div>
            {% if inventory.status == 'draft' %}
                <span class="badge bg-light text-dark">{% translate "Brouillon" %}</span>
            {% elif inventory.status == 'in_progress' %}
                <span class="badge bg-warning text-dark">{% translate "En cours" %}</span>
            {% elif inventory.status == 'done' %}
                <span class="badge bg-info text-dark">{% translate "Terminé" %}</span>
            {% elif inventory.status == 'validated' %}
                <span class="badge bg-success">{% translate "Validé" %}</span>
            {% else %}
                <span class="badge bg-light text-dark">{{ inventory.get_status_display }}</span>
            {% endif %}
        </div>
        <div class="list-card-meta mt-1">
            <i class="bi bi-geo-alt me-1"></i>
            {{ inventory.warehouse_location.warehouse.name }} — {{ inventory.warehouse_location.name }}
        </div>
        <div class="list-card-meta mt-1">
            <span class="me-3"><i class="bi bi-calendar3 me-1"></i>{{ inventory.created_at|date:"d/m/Y" }}</span>
            {% if inventory.performed_by %}
            <span><i class="bi bi-person me-1"></i>{{ inventory.performed_by }}</span>
            {% endif %}
        </div>
    </a>
    {% endfor %}
{% else %}
    <div class="text-center text-muted py-5">
        <i class="bi bi-clipboard2-data fs-1 d-block mb-2"></i>
        {% translate "Aucun inventaire trouvé." %}
    </div>
{% endif %}
{% endblock content %}