{% extends 'base.html' %}

{% block title %}Départements{% endblock %}
{% block page_title %}Départements{% endblock %}

{% block page_actions %}
<a href="{% url 'departement_create' %}" class="btn btn-primary"><i class="bi bi-plus-lg"></i> Ajouter</a>
{% endblock %}

{% block content %}
<div class="card">
    <div class="card-header">
        <h5 class="card-title mb-0"><i class="bi bi-building"></i> Liste des départements</h5>
    </div>
    <div class="card-body">
        <div class="search-box mb-3">
            <i class="bi bi-search search-icon"></i>
            <input type="text" id="searchDepartement" class="form-control" placeholder="Rechercher par nom ou description...">
        </div>
        <div class="table-responsive">
            <table class="table table-hover" id="tableDepartement">
                <thead>
                    <tr>
                        <th>Nom</th>
                        <th>Description</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for departement in departements %}
                    <tr class="departement-row">
                        <td><span class="badge bg-primary">{{ departement.nom }}</span></td>
                        <td>{{ departement.description|default:"-" }}</td>
                        <td>
                            <div class="btn-group" role="group">
                                <a href="{% url 'departement_update' departement.pk %}" class="btn btn-sm btn-warning" title="Modifier"><i class="bi bi-pencil"></i></a>
                                <a href="{% url 'departement_delete' departement.pk %}" class="btn btn-sm btn-danger" title="Supprimer"><i class="bi bi-trash"></i></a>
                            </div>
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="3" class="text-center py-5">
                            <div class="text-muted"><i class="bi bi-building" style="font-size: 3.5rem;"></i>
                                <p class="mt-2 mb-0 fs-5">Aucun département enregistré</p>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        <div id="noResultDept" class="text-center py-4 text-muted" style="display: none;">
            <i style="font-size: 3rem;">🔍</i>
            <p class="mt-2 mb-0">Aucun résultat trouvé</p>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('searchDepartement');
    const rows = document.querySelectorAll('.departement-row');
    
    searchInput.addEventListener('input', function() {
        const filter = searchInput.value.toLowerCase();
        let visible = false;
        
        rows.forEach(function(row) {
            const text = row.textContent.toLowerCase();
            if (text.includes(filter)) {
                row.style.display = '';
                visible = true;
            } else {
                row.style.display = 'none';
            }
        });
        
        document.getElementById('noResultDept').style.display = visible ? 'none' : 'block';
    });
});
</script>
{% endblock %}