{% extends 'layout.html' %}

{% block title %}Liste des familles{% endblock %}

{% block content %}
<div class="row mb-4">
    <div class="col-md-8">
        <h2 class="border-bottom pb-2">
            <i class="fas fa-tags me-2"></i>Liste des familles
        </h2>
    </div>
    <div class="col-md-4 text-end">
        <a href="{{ url_for('ajouter_famille') }}" class="btn btn-primary">
            <i class="fas fa-plus me-2"></i>Ajouter une famille
        </a>
    </div>
</div>

<!-- Filtres -->
<div class="card mb-4">
    <div class="card-header bg-light">
        <h5 class="mb-0">
            <i class="fas fa-filter me-2"></i>Filtres
        </h5>
    </div>
    <div class="card-body">
        <form method="GET" action="{{ url_for('liste_familles') }}">
            <div class="row">
                <div class="col-md-4 mb-2">
                    <label for="designation" class="form-label">Désignation</label>
                    <input type="text" class="form-control" id="designation" name="designation" value="{{ filtres.designation if filtres else '' }}">
                </div>
                <div class="col-md-4 mb-2">
                    <label for="code" class="form-label">Code</label>
                    <input type="text" class="form-control" id="code" name="code" value="{{ filtres.code if filtres else '' }}">
                </div>
                <div class="col-md-4 mb-2">
                    <label for="secteur" class="form-label">Secteur</label>
                    <select class="form-select" id="secteur" name="secteur">
                        <option value="">Tous</option>
                        <option value="A" {% if filtres and filtres.secteur == 'A' %}selected{% endif %}>A</option>
                        <option value="B" {% if filtres and filtres.secteur == 'B' %}selected{% endif %}>B</option>
                        <option value="C" {% if filtres and filtres.secteur == 'C' %}selected{% endif %}>C</option>
                        <option value="D" {% if filtres and filtres.secteur == 'D' %}selected{% endif %}>D</option>
                    </select>
                </div>
            </div>
            <div class="row mt-2">
                <div class="col-12 text-end">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-search me-2"></i>Filtrer
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Liste des familles -->
<div class="card">
    <div class="card-header bg-light">
        <h5 class="mb-0">
            <i class="fas fa-list me-2"></i>Familles
        </h5>
    </div>
    <div class="card-body">
        {% if familles %}
        <div class="table-responsive">
            <table class="table table-striped table-hover">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Désignation</th>
                        <th>Code</th>
                        <th>Secteur</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for famille in familles %}
                    <tr>
                        <td>{{ famille.id }}</td>
                        <td>{{ famille.designation }}</td>
                        <td>{{ famille.code }}</td>
                        <td>{{ famille.secteur }}</td>
                        <td>
                            <div class="btn-group">
                                <a href="{{ url_for('voir_famille', id=famille.id) }}" class="btn btn-sm btn-info" title="Voir">
                                    <i class="fas fa-eye"></i>
                                </a>
                                <a href="{{ url_for('modifier_famille', id=famille.id) }}" class="btn btn-sm btn-primary" title="Modifier">
                                    <i class="fas fa-edit"></i>
                                </a>
                                <a href="{{ url_for('liste_equipements') }}?famille={{ famille.id }}" class="btn btn-sm btn-warning" title="Équipements">
                                    <i class="fas fa-industry"></i>
                                </a>
                                <a href="{{ url_for('supprimer_famille', id=famille.id) }}" class="btn btn-sm btn-danger" title="Supprimer" onclick="return confirm('Êtes-vous sûr de vouloir supprimer cette famille ?');">
                                    <i class="fas fa-trash"></i>
                                </a>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <div class="alert alert-info">
            <i class="fas fa-info-circle me-2"></i>Aucune famille trouvée.
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}