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

{% block content %}
<div class="container-fluid mt-3">
    <div class="row">
        <div class="col-12">
            <!-- En-tête -->
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h3>
                    <i class="bi bi-puzzle"></i> {% translate "Conceptions de produits" %}
                </h3>
                <div>
                    <a href="{% url 'stock:production_order_list' %}" class="btn btn-outline-primary me-2">
                        <i class="bi bi-tools"></i> {% translate "Bons de confection" %}
                    </a>
                    <a href="{% url 'stock:product_design_create' %}" class="btn btn-primary">
                        <i class="bi bi-plus-lg"></i> {% translate "Nouvelle conception" %}
                    </a>
                </div>
            </div>

            <!-- Filtres -->
            <div class="card mb-4 shadow-sm">
                <div class="card-body">
                    <form method="get" class="row g-3 align-items-end">
                        <div class="col-md-3">
                            <label class="form-label">{% translate "Recherche" %}</label>
                            <input type="text" name="q" class="form-control" value="{{ search }}" 
                                   placeholder="{% translate 'Code, nom...' %}">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">{% translate "Statut" %}</label>
                            <select name="status" class="form-select">
                                <option value="">{% translate "Tous" %}</option>
                                {% for value, label in status_choices %}
                                    <option value="{{ value }}" {% if status_filter == value %}selected{% endif %}>
                                        {{ label }}
                                    </option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">{% translate "Catégorie" %}</label>
                            <select name="category" class="form-select">
                                <option value="">{% translate "Toutes" %}</option>
                                {% for cat in categories %}
                                    <option value="{{ cat.id }}" {% if category_filter == cat.id|stringformat:"d" %}selected{% endif %}>
                                        {{ cat.name_fr }}
                                    </option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-3">
                            <button type="submit" class="btn btn-outline-primary w-100">
                                <i class="bi bi-search"></i> {% translate "Filtrer" %}
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Liste des conceptions -->
            <div class="row">
                {% for design in designs %}
                <div class="col-md-6 col-lg-4 mb-4">
                    <div class="card h-100 shadow-sm">
                        {% if design.image %}
                        <img src="{{ design.image.url }}" class="card-img-top" alt="{{ design.name }}" style="max-height: 200px; object-fit: cover;">
                        {% endif %}
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-start">
                                <h5 class="card-title">{{ design.name }}</h5>
                                {% if design.status == 'active' %}
                                    <span class="badge bg-success">{% translate "Actif" %}</span>
                                {% elif design.status == 'draft' %}
                                    <span class="badge bg-secondary">{% translate "Brouillon" %}</span>
                                {% else %}
                                    <span class="badge bg-warning">{% translate "Archivé" %}</span>
                                {% endif %}
                            </div>
                            <p class="text-muted small mb-1">
                                <i class="bi bi-upc"></i> {{ design.code }}
                            </p>
                            {% if design.category %}
                            <p class="text-muted small mb-2">
                                <i class="bi bi-tag"></i> {{ design.category.name_fr }}
                            </p>
                            {% endif %}
                            {% if design.description %}
                            <p class="card-text small">{{ design.description|truncatewords:20 }}</p>
                            {% endif %}
                            <p class="mb-1">
                                <i class="bi bi-boxes"></i> 
                                {{ design.total_components }} {% translate "composant(s)" %}
                            </p>
                            {% with cost=design.estimated_cost %}
                            {% if cost %}
                            <p class="mb-0">
                                <i class="bi bi-currency-euro"></i> 
                                {{ cost|floatformat:2 }} €
                            </p>
                            {% endif %}
                            {% endwith %}
                        </div>
                        <div class="card-footer bg-transparent">
                            <a href="{% url 'stock:product_design_detail' design.pk %}" class="btn btn-sm btn-outline-primary">
                                <i class="bi bi-eye"></i> {% translate "Détail" %}
                            </a>
                            <a href="{% url 'stock:product_design_edit' design.pk %}" class="btn btn-sm btn-outline-secondary">
                                <i class="bi bi-pencil"></i> {% translate "Modifier" %}
                            </a>
                            {% if design.status == 'active' %}
                            <a href="{% url 'stock:production_order_create' %}?design={{ design.pk }}" class="btn btn-sm btn-outline-success">
                                <i class="bi bi-gear"></i> {% translate "Produire" %}
                            </a>
                            {% endif %}
                        </div>
                    </div>
                </div>
                {% empty %}
                <div class="col-12">
                    <div class="alert alert-info">
                        <i class="bi bi-info-circle"></i>
                        {% translate "Aucune conception de produit trouvée." %}
                        <a href="{% url 'stock:product_design_create' %}">{% translate "Créer la première" %}</a>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>
{% endblock content %}