{% extends 'layout.html' %}

{% block title %}Détails de la famille{% 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>Détails de la famille
        </h2>
    </div>
    <div class="col-md-4 text-end">
        <a href="{{ url_for('liste_familles') }}" class="btn btn-secondary">
            <i class="fas fa-arrow-left me-2"></i>Retour à la liste
        </a>
    </div>
</div>

<div class="row">
    <!-- Informations de la famille -->
    <div class="col-md-6 mb-4">
        <div class="card">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0">
                    <i class="fas fa-info-circle me-2"></i>Informations générales
                </h5>
            </div>
            <div class="card-body">
                <table class="table table-bordered">
                    <tr>
                        <th class="bg-light">ID</th>
                        <td>{{ famille.id }}</td>
                    </tr>
                    <tr>
                        <th class="bg-light">Désignation</th>
                        <td>{{ famille.designation }}</td>
                    </tr>
                    <tr>
                        <th class="bg-light">Code</th>
                        <td>{{ famille.code }}</td>
                    </tr>
                    <tr>
                        <th class="bg-light">Secteur</th>
                        <td>{{ famille.secteur }}</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>

    <!-- Statistiques -->
    <div class="col-md-6 mb-4">
        <div class="card">
            <div class="card-header bg-info text-white">
                <h5 class="mb-0">
                    <i class="fas fa-chart-pie me-2"></i>Statistiques
                </h5>
            </div>
            <div class="card-body">
                <div class="row text-center">
                    <div class="col-md-6 mb-3">
                        <div class="card bg-light">
                            <div class="card-body">
                                <h1 class="display-4">{{ equipements|length }}</h1>
                                <p class="text-muted">Équipements</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 mb-3">
                        <div class="card bg-light">
                            <div class="card-body">
                                <h1 class="display-4">{{ secteur }}</h1>
                                <p class="text-muted">Secteur</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <!-- Équipements de la famille -->
    <div class="col-md-12 mb-4">
        <div class="card">
            <div class="card-header bg-warning text-dark">
                <h5 class="mb-0">
                    <i class="fas fa-industry me-2"></i>Équipements dans cette famille
                </h5>
            </div>
            <div class="card-body">
                {% if equipements %}
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Désignation</th>
                                <th>Marque</th>
                                <th>Type</th>
                                <th>N° Série</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for equipement in equipements %}
                            <tr>
                                <td>{{ equipement.id }}</td>
                                <td>{{ equipement.designation }}</td>
                                <td>{{ equipement.marque }}</td>
                                <td>{{ equipement.type }}</td>
                                <td>{{ equipement.serie }}</td>
                                <td>
                                    <a href="{{ url_for('voir_equipement', id=equipement.id) }}" class="btn btn-sm btn-info" title="Voir">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% else %}
                <p class="text-muted">Aucun équipement enregistré dans cette famille.</p>
                {% endif %}
            </div>
            <div class="card-footer text-center">
                <a href="{{ url_for('liste_equipements') }}?famille={{ famille.id }}" class="btn btn-primary">
                    <i class="fas fa-list me-2"></i>Voir tous les équipements de cette famille
                </a>
            </div>
        </div>
    </div>
</div>

<!-- Actions -->
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header bg-light">
                <h5 class="mb-0">
                    <i class="fas fa-tools me-2"></i>Actions
                </h5>
            </div>
            <div class="card-body">
                <div class="d-flex gap-2">
                    <a href="{{ url_for('modifier_famille', id=famille.id) }}" class="btn btn-primary">
                        <i class="fas fa-edit me-2"></i>Modifier la famille
                    </a>
                    <a href="javascript:window.print();" class="btn btn-info">
                        <i class="fas fa-print me-2"></i>Imprimer la fiche
                    </a>
                    <a href="{{ url_for('supprimer_famille', id=famille.id) }}" class="btn btn-danger" onclick="return confirm('Êtes-vous sûr de vouloir supprimer cette famille ?');">
                        <i class="fas fa-trash me-2"></i>Supprimer la famille
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}