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

{# minRows : nombre de lignes à atteindre, complété par des lignes vides.
   Les deux vues (actuels / futurs) ont ainsi exactement la même hauteur. #}
{% macro perim_table(rows, total, minRows = 0) %}
    <table class="perim-table">
        <thead>
            <tr>
                <th style="width:30%">Etablissement</th>
                <th style="width:34%">Répartition</th>
                <th style="width:14%;text-align:right">Effectif</th>
                <th style="width:22%">DSCO</th>
            </tr>
        </thead>
        <tbody>
        {% for p in rows %}
            <tr>
                <td>
                    <strong>{{ p.label }}</strong>
                    {% if p.children|default([])|length %}
                        <span style="font-size:.72rem;color:var(--muted)">({{ p.children|length }} sous-étab.)</span>
                    {% endif %}
                </td>
                <td>
                    <div class="bar-track" title="{{ p.pct }} %">
                        <div class="bar-fill" style="width:{{ p.pct }}%"></div>
                    </div>
                </td>
                <td style="text-align:right;white-space:nowrap">{{ p.effectif }} <span style="color:var(--muted)">({{ p.pct }} %)</span></td>
                <td>{{ p.dsco }}</td>
            </tr>
            {% for c in p.children|default([]) %}
            <tr class="perim-subrow">
                <td style="padding-left:24px"><span style="color:var(--muted)">▸</span> {{ c.label }}</td>
                <td></td>
                <td style="text-align:right;white-space:nowrap;color:var(--muted)">{{ c.effectif }}</td>
                <td></td>
            </tr>
            {% endfor %}
        {% endfor %}
        {% if minRows > rows|length %}
            {% for i in 1..(minRows - rows|length) %}
            <tr class="perim-row-filler" aria-hidden="true">
                <td><strong>&nbsp;</strong></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            {% endfor %}
        {% endif %}
        </tbody>
        <tfoot>
            <tr>
                <td colspan="2" style="font-weight:600">Total ({{ rows|length }} Etablissements)</td>
                <td style="text-align:right;font-weight:600">{{ total }}</td>
                <td></td>
            </tr>
        </tfoot>
    </table>
{% endmacro %}
{% import _self as ui %}

{% block body %}
<div class="page-header">
    <h1>{{ site.name }}</h1>
    <a class="btn btn-outline" href="{{ path('site_public_index') }}">Retour aux sites</a>
</div>

<div class="kpi-grid">
    <div class="kpi-card">
        <span class="kpi-value">{{ info.department ?: '—' }}</span>
        <span class="kpi-label">Département</span>
    </div>
    <div class="kpi-card">
        <span class="kpi-value">{{ info.city ?: '—' }}</span>
        <span class="kpi-label">Ville</span>
    </div>
    <div class="kpi-card">
        <span class="kpi-value">{{ info.effectifTotal }}</span>
        <span class="kpi-label">Effectif total</span>
    </div>
    <div class="kpi-card">
        <span class="kpi-value">{{ info.perimetresActuels|length }}</span>
        <span class="kpi-label">Etablissements présents</span>
    </div>
</div>

<div class="grid grid-2">
    <div class="card">
        <h2 style="margin-bottom:12px">Encadrement</h2>
        <dl class="def-list">
            <dt>Secrétaire de département (SDD)</dt>
            <dd>{{ info.sdd ?: '—' }}</dd>
            <dt>Référent du site</dt>
            <dd>{{ info.referent }}</dd>
        </dl>
    </div>
    <div class="card">
        <h2 style="margin-bottom:12px">représentants du site</h2>
        {% if porteurs is not empty %}
            <ul class="plain-list">
            {% for p in porteurs %}
                <li>
                    <strong>{{ p.firstName }} {{ p.lastName }}</strong>
                    <a href="mailto:{{ p.email }}" style="color:var(--muted);font-size:.85rem">{{ p.email }}</a>
                </li>
            {% endfor %}
            </ul>
        {% else %}
            <p style="color:var(--muted)">Aucun représentant rattaché à ce site.</p>
        {% endif %}
    </div>
</div>

{% set maxRows = max(info.perimetresActuels|length, info.perimetresRegain|length) %}
<div class="card">
    <div style="display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px">
        <h2 style="margin:0">Répartition des effectifs</h2>
        <div class="actions">
            <button type="button" class="btn btn-sm" data-vue="actuels">Etablissements actuels</button>
            <button type="button" class="btn btn-sm btn-outline" data-vue="regain">Futurs Etablissements</button>
        </div>
    </div>

    <div data-vue-panel="actuels">
        <p class="perim-intro">
            Répartition de l'effectif total sur les Etablissements présents sur ce site, avec leur DSCO.
        </p>
        {{ ui.perim_table(info.perimetresActuels, info.effectifTotal, maxRows) }}
    </div>

    <div data-vue-panel="regain" style="display:none">
        <p class="perim-intro">
            Projection de l'effectif total sur les futurs Etablissements, avec leur DSCO.
            <span class="badge badge-soon">Réorganisation Regain</span>
        </p>
        {{ ui.perim_table(info.perimetresRegain, info.effectifTotal, maxRows) }}
    </div>
</div>

<script>
document.querySelectorAll('[data-vue]').forEach(function (btn) {
    btn.addEventListener('click', function () {
        const vue = btn.dataset.vue;
        document.querySelectorAll('[data-vue]').forEach(function (b) {
            b.classList.toggle('btn-outline', b.dataset.vue !== vue);
        });
        document.querySelectorAll('[data-vue-panel]').forEach(function (p) {
            p.style.display = p.dataset.vuePanel === vue ? '' : 'none';
        });
    });
});
</script>
{% endblock %}