{% extends "base.html" %}
{% load i18n %}

{% block content %}
<div class="container-fluid mt-3">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h3 class="h3 d-flex align-items-center gap-2">
            <i class="bi bi-upc-scan"></i>
            {% translate "Articles tracés (numéros de série)" %}
        </h3>
        {% if can_manage %}
        <a href="{% url 'stock:serialized_item_create' %}" class="btn btn-primary">
            <i class="bi bi-plus-circle"></i> {% translate "Nouvel article" %}
        </a>
        {% endif %}
    </div>

    <!-- Recherche / Filtres -->
    <form method="get" class="card mb-3">
        <div class="card-body row g-2 align-items-end">
            <div class="col-md-4">
                <label class="form-label fw-semibold">{% translate "Recherche (numéro de série, produit)" %}</label>
                <input type="text" name="q" value="{{ query }}" class="form-control"
                       placeholder="{% translate 'Numéro de série, nom ou code produit…' %}">
            </div>
            <div class="col-md-3">
                <label class="form-label fw-semibold">{% translate "Produit" %}</label>
                <select name="product" class="form-select">
                    <option value="">— {% translate "Tous les produits" %} —</option>
                    {% for p in serialized_products %}
                    <option value="{{ p.pk }}" {% if product_id == p.pk|stringformat:"s" %}selected{% endif %}>
                        {{ p.name }}
                    </option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label fw-semibold">{% translate "Statut" %}</label>
                <select name="status" class="form-select">
                    <option value="">— {% translate "Tous" %} —</option>
                    {% for val, label in status_choices %}
                    <option value="{{ val }}" {% if status_filter == val %}selected{% endif %}>{{ label }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-auto">
                <button type="submit" class="btn btn-primary">
                    <i class="bi bi-search"></i> {% translate "Rechercher" %}
                </button>
                <a href="{% url 'stock:serialized_items_list' %}" class="btn btn-outline-secondary ms-1">
                    <i class="bi bi-x-circle"></i> {% translate "Réinitialiser" %}
                </a>
            </div>
        </div>
    </form>

    <!-- Résultats -->
    <div class="table-responsive">
        <table class="table table-striped table-hover align-middle">
            <thead class="table-dark">
                <tr>
                    <th>{% translate "Numéro de série" %}</th>
                    <th>{% translate "Produit" %}</th>
                    <th>{% translate "Statut" %}</th>
                    <th>{% translate "Détenteur actuel" %}</th>
                    <th>{% translate "Emplacement actuel" %}</th>
                    <th>{% translate "Enregistré le" %}</th>
                    <th class="text-end">{% translate "Actions" %}</th>
                </tr>
            </thead>
            <tbody>
                {% for item in items %}
                <tr>
                    <td class="font-monospace fw-bold">
                        <a href="{% url 'stock:serialized_item_detail' item.pk %}">{{ item.serial_number }}</a>
                    </td>
                    <td>
                        <a href="{% url 'stock:product_detail' item.product.pk %}">{{ item.product.name }}</a>
                        <small class="text-muted d-block">{{ item.product.code }}</small>
                    </td>
                    <td>
                        {% if item.status == 'available' %}
                            <span class="badge bg-success">{{ item.get_status_display }}</span>
                        {% elif item.status == 'assigned' %}
                            <span class="badge bg-primary">{{ item.get_status_display }}</span>
                        {% elif item.status == 'lost' %}
                            <span class="badge bg-danger">{{ item.get_status_display }}</span>
                        {% else %}
                            <span class="badge bg-secondary">{{ item.get_status_display }}</span>
                        {% endif %}
                    </td>
                    <td>{{ item.current_holder.name|default:"—" }}</td>
                    <td>
                        {% if item.current_location %}
                            {{ item.current_location.name }}
                            <small class="text-muted d-block">{{ item.current_location.warehouse.name }}</small>
                        {% else %}—{% endif %}
                    </td>
                    <td>{{ item.created_at|date:"d/m/Y" }}</td>
                    <td class="text-end">
                        <a href="{% url 'stock:serialized_item_detail' item.pk %}" class="btn btn-sm btn-outline-primary">
                            <i class="bi bi-eye"></i>
                        </a>
                    </td>
                </tr>
                {% empty %}
                <tr>
                    <td colspan="7" class="text-center text-muted py-4">
                        {% translate "Aucun article trouvé." %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <p class="text-muted small">{{ items|length }} {% translate "article(s)" %}</p>
</div>
{% endblock content %}