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

{% block title %}{% translate "Produits" %}{% 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>
    .filters-sticky {
        position: sticky;
        top: 4.5rem;
        z-index: 200;
        background: #ffffff;
        margin-bottom: 0.5rem;
    }
    /* Masque les éléments qui remontent entre le bas du header
       et le haut de la barre sticky (gap dû aux hauteurs réelles). */
    .filters-sticky::before {
        content: '';
        position: absolute;
        top: -4.5rem;
        left: -1rem;
        right: -1rem;
        height: 4.5rem;
        background: #ffffff;
    }
    .product-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;
    }
    .product-card:hover, .product-card:focus {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(47,62,139,0.12);
        color: inherit;
    }
    .product-name { font-weight: 600; font-size: 1rem; }
    .product-meta { font-size: 0.83rem; color: #6c757d; }
    .stock-badge {
        font-size: 0.78rem;
        padding: 0.2em 0.55em;
        border-radius: 0.4rem;
    }
</style>
{% endblock extra_head %}

{% block content %}
<div class="filters-sticky">
    <form method="get" action="" data-no-overlay>
        {# Barre de recherche #}
        <div class="input-group mb-2">
            <span class="input-group-text bg-white border-end-0">
                <i class="bi bi-search text-muted"></i>
            </span>
            <input type="text" name="q" class="form-control border-start-0 ps-0"
                   placeholder="{% translate 'Rechercher un produit…' %}"
                   value="{{ q }}" autocomplete="off">
            {% if q or category_id %}
            <a href="?" class="btn btn-outline-secondary" data-no-overlay title="{% translate 'Réinitialiser' %}">
                <i class="bi bi-x-lg"></i>
            </a>
            {% endif %}
        </div>
        {# Filtre catégorie #}
        <select name="category" class="form-select form-select-sm" onchange="this.form.submit()">
            <option value="">{% translate "Toutes les catégories" %}</option>
            {% for cat in categories %}
            <option value="{{ cat.id }}" {% if cat.id|stringformat:"s" == category_id %}selected{% endif %}>
                {{ cat.name_fr }}
            </option>
            {% endfor %}
        </select>
    </form>
</div>

{% if products %}
    {% for product in products %}
    <a href="{% url 'mobile:stock_product_detail_mobile' product.id %}" class="product-card">
        <div class="d-flex justify-content-between align-items-start">
            <div class="product-name">{{ product.name }}</div>
            {% if product.total_stock <= product.threshold %}
            <span class="badge bg-danger stock-badge">
                {{ product.total_stock }} {{ product.get_unit_display }}
            </span>
            {% else %}
            <span class="badge bg-success stock-badge">
                {{ product.total_stock }} {{ product.get_unit_display }}
            </span>
            {% endif %}
        </div>
        <div class="product-meta mt-1">
            <span class="me-2"><i class="bi bi-upc me-1"></i>{{ product.code }}</span>
            {% if product.category %}<span><i class="bi bi-tag me-1"></i>{{ product.category.name_fr }}</span>{% endif %}
        </div>
    </a>
    {% endfor %}
{% else %}
    <div class="text-center text-muted py-5">
        <i class="bi bi-box-seam fs-1 d-block mb-2"></i>
        {% translate "Aucun produit trouvé." %}
    </div>
{% endif %}
{% endblock content %}