{% extends 'base.html.twig' %}
{% block title %}Sites{% endblock %}

{% block body %}
<div class="page-header">
    <h1>Sites</h1>
    <span style="color:var(--muted);font-size:.85rem">
        {{ rows|length }} site{{ rows|length > 1 ? 's' : '' }}{% if rows|length != total %} sur {{ total }}{% endif %}
    </span>
</div>

<div class="card">
    <form method="get">
        <div class="row">
            <div>
                <label>Recherche</label>
                <input type="text" name="q" value="{{ filters.q }}" placeholder="Nom du site">
            </div>
            <div>
                <label>Département</label>
                <select name="dept">
                    <option value="">Tous</option>
                    {% for dept in departments %}
                        <option value="{{ dept }}" {% if filters.dept == dept %}selected{% endif %}>{{ dept }}</option>
                    {% endfor %}
                </select>
            </div>
            <div>
                <label>Ville</label>
                <select name="city">
                    <option value="">Toutes</option>
                    {% for city in cities %}
                        <option value="{{ city }}" {% if filters.city == city %}selected{% endif %}>{{ city }}</option>
                    {% endfor %}
                </select>
            </div>
            <div>
                <label>Effectif minimum</label>
                <input type="number" name="effectif_min" min="0" step="10" value="{{ filters.effectif_min }}">
            </div>
        </div>
        <div class="actions" style="margin-top:16px">
            <button class="btn" type="submit">Filtrer</button>
            <a class="btn btn-outline" href="{{ path('site_public_index') }}">Réinitialiser</a>
        </div>
    </form>
</div>

<div class="card" style="padding:0;overflow:hidden">
    <table>
        <thead>
            <tr>
                <th>Département</th>
                <th>Site</th>
                <th>Ville</th>
                <th style="text-align:right">Effectif</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
        {% for row in rows %}
            {% set url = path('site_public_show', {id: row.site.id}) %}
            <tr class="row-link" data-href="{{ url }}">
                <td>{{ row.site.department ?: '—' }}</td>
                <td><strong>{{ row.site.name }}</strong></td>
                <td>{{ row.site.city }}</td>
                <td style="text-align:right;font-weight:600">{{ row.effectif }}</td>
                <td style="text-align:right"><a class="btn btn-outline btn-sm" href="{{ url }}">Voir</a></td>
            </tr>
        {% else %}
            <tr><td colspan="5" style="color:var(--muted)">Aucun site ne correspond aux filtres.</td></tr>
        {% endfor %}
        </tbody>
    </table>
</div>

<script>
document.querySelectorAll('tr.row-link').forEach(function (tr) {
    tr.addEventListener('click', function (e) {
        if (e.target.closest('a')) return; // laisser le bouton "Voir" agir
        window.location = tr.dataset.href;
    });
});
</script>
{% endblock %}