{% extends 'base.html.twig' %}
{% block title %}{{ perimetre.label }}{% endblock %}
{% block body %}

<div class="page-header">
    <h1>{{ perimetre.label }}</h1>
    <div class="actions">
        <a class="btn" href="{{ path('admin_perimetre_edit', {'id': perimetre.id}) }}">Modifier</a>
        <a class="btn btn-outline" href="{{ path('admin_perimetre_index') }}">Retour</a>
    </div>
</div>

<div class="kpi-grid">
    <div class="kpi-card">
        <span class="kpi-value">{{ perimetre.parent ? 'Secondaire' : 'Principal' }}</span>
        <span class="kpi-label">Type d'établissement</span>
    </div>
    <div class="kpi-card">
        <span class="kpi-value">{{ perimetre.effectifTotal }}</span>
        <span class="kpi-label">Effectif{{ perimetre.hasChildren ? ' (somme)' : '' }}</span>
    </div>
    <div class="kpi-card">
        <span class="kpi-value">{{ perimetre.hasChildren ? perimetre.children|length : '—' }}</span>
        <span class="kpi-label">Sous-établissements</span>
    </div>
</div>

<div class="grid grid-2">
    <div class="card">
        <h2 style="margin-bottom:12px">Informations</h2>
        <dl class="def-list">
            <dt>Libellé</dt><dd>{{ perimetre.label }}</dd>
            {% if perimetre.parent %}
                <dt>Établissement parent</dt>
                <dd><a href="{{ path('admin_perimetre_show', {'id': perimetre.parent.id}) }}">{{ perimetre.parent.label }}</a></dd>
            {% endif %}
            <dt>Effectif propre</dt><dd>{{ perimetre.effectif ?? '—' }}</dd>
        </dl>
    </div>

    <div class="card">
        <h2 style="margin-bottom:12px">DSCO</h2>
        {% if dscos is not empty %}
            <ul class="plain-list">
            {% for d in dscos %}<li><strong>{{ d }}</strong></li>{% endfor %}
            </ul>
        {% else %}
            <p style="color:var(--muted)">Aucun DSCO rattaché.</p>
        {% endif %}
        {% if dscoInherited %}
            <p style="color:var(--muted);font-size:.82rem;margin-top:8px">Hérité de l'établissement parent <strong>{{ perimetre.parent.label }}</strong>.</p>
        {% endif %}
    </div>
</div>

{% if perimetre.hasChildren %}
<div class="card">
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px">
        <h2 style="margin:0">Sous-établissements ({{ perimetre.children|length }})</h2>
        <span style="color:var(--muted);font-size:.85rem">Effectif total (somme) : <strong>{{ perimetre.effectifTotal }}</strong></span>
    </div>
    <table>
        <thead><tr><th>Libellé</th><th style="text-align:right">Effectif</th><th>Actions</th></tr></thead>
        <tbody>
        {% for c in perimetre.children %}
            <tr>
                <td><span style="color:var(--muted)">▸</span> <strong>{{ c.label }}</strong></td>
                <td style="text-align:right">{{ c.effectif ?? 0 }}</td>
                <td class="actions">
                    <a class="btn btn-outline" href="{{ path('admin_perimetre_show', {'id': c.id}) }}">Voir</a>
                    <a class="btn btn-outline" href="{{ path('admin_perimetre_edit', {'id': c.id}) }}">Modifier</a>
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
</div>
{% endif %}
{% endblock %}