{% extends 'parent/base.html.twig' %}
{% block title %}Documents utiles | {{ ecole.nom }}{% endblock %}
{% block portal_title %}Documents utiles{% endblock %}
{% block portal_subtitle %}Règlement, programme, emploi du temps et ressources de la section de vos enfants.{% endblock %}

{% block content %}
<section class="portal-documents-shell-pro">
    <div class="portal-documents-intro portal-card">
        <div>
            <span class="portal-documents-eyebrow">Ressources</span>
            <h2>Documents mis à disposition</h2>
            <p>Retrouvez ici les fichiers importants publiés par {{ ecole.nom }} : règlement, programme, emploi du temps, liste des fournitures et guides.</p>
        </div>
        <div class="portal-documents-counter">
            <strong>{{ documents|length }}</strong>
            <span>document(s)</span>
        </div>
    </div>

    {% if documents is empty %}
        <div class="portal-card portal-documents-empty">
            <span class="material-symbols-outlined">folder_open</span>
            <h2>Aucun document disponible</h2>
            <p>Les documents liés aux sections de vos enfants apparaîtront ici dès publication.</p>
        </div>
    {% else %}
        <div class="portal-documents-grid-pro">
            {% for document in documents %}
                {% set target = document.classe ? document.classe.nom : (document.section ? document.section.nom : 'Document général') %}
                <article class="portal-document-card-pro {{ document.obligatoire ? 'is-important' : '' }}">
                    <div class="portal-document-icon-pro">
                        <span class="material-symbols-outlined">{{ document.typeDocument == 'REGLEMENT' ? 'gavel' : (document.typeDocument == 'EMPLOI_TEMPS' ? 'calendar_month' : (document.typeDocument == 'FOURNITURES' ? 'inventory_2' : 'description')) }}</span>
                    </div>
                    <div class="portal-document-content-pro">
                        <div class="portal-document-meta-pro">
                            <span class="portal-badge {{ document.obligatoire ? 'portal-badge-warning' : '' }}">{{ document.typeLabel }}</span>
                            {% if document.obligatoire %}<span class="portal-document-important-pro">Important</span>{% endif %}
                        </div>
                        <h3>{{ document.titre }}</h3>
                        <p class="portal-document-target-pro"><span class="material-symbols-outlined">adjust</span>{{ target }}</p>
                        {% if document.description %}<p class="portal-document-desc-pro">{{ document.description }}</p>{% endif %}
                    </div>
                    <a class="portal-btn portal-btn-primary portal-document-download-pro" href="{{ path('document_secure_download', {token: document.downloadToken}) }}" target="_blank" rel="noopener">
                        <span class="material-symbols-outlined">download</span> Télécharger
                    </a>
                </article>
            {% endfor %}
        </div>
    {% endif %}
</section>

<style>
.portal-documents-shell-pro{display:grid;gap:1.1rem}.portal-documents-intro{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:linear-gradient(135deg,#fff,var(--portal-soft))}.portal-documents-eyebrow{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--portal-muted);font-weight:950}.portal-documents-intro h2{margin:.35rem 0 .25rem;font-weight:950;letter-spacing:-.035em;font-size:clamp(1.45rem,3vw,2rem)}.portal-documents-intro p{margin:0;color:var(--portal-muted);font-weight:700;line-height:1.6}.portal-documents-counter{min-width:130px;border-radius:1.4rem;background:var(--portal-primary);color:#fff;text-align:center;padding:1rem}.portal-documents-counter strong{display:block;font-size:2.2rem;font-weight:950;line-height:1}.portal-documents-counter span{display:block;margin-top:.3rem;font-weight:800;color:rgba(255,255,255,.8)}.portal-documents-empty{display:grid;place-items:center;text-align:center;gap:.45rem;padding:2.5rem}.portal-documents-empty .material-symbols-outlined{font-size:3.5rem;color:var(--portal-primary)}.portal-documents-empty h2{margin:0;font-weight:950}.portal-documents-empty p{margin:0;color:var(--portal-muted);font-weight:700}.portal-documents-grid-pro{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.portal-document-card-pro{position:relative;background:var(--portal-surface);border:1px solid var(--portal-border);border-radius:1.55rem;box-shadow:0 18px 42px rgba(15,23,42,.07);padding:1rem;display:grid;grid-template-columns:62px minmax(0,1fr);gap:.9rem;align-items:flex-start;overflow:hidden}.portal-document-card-pro.is-important{border-color:rgba(194,65,12,.22);box-shadow:0 18px 42px rgba(194,65,12,.08)}.portal-document-card-pro.is-important::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:#f59e0b}.portal-document-icon-pro{width:62px;height:62px;border-radius:1.15rem;display:grid;place-items:center;background:color-mix(in srgb,var(--portal-primary) 10%,transparent);color:var(--portal-primary)}.portal-document-icon-pro .material-symbols-outlined{font-size:2rem}.portal-document-content-pro{min-width:0}.portal-document-meta-pro{display:flex;gap:.45rem;flex-wrap:wrap;align-items:center}.portal-document-important-pro{display:inline-flex;border-radius:999px;padding:.35rem .65rem;font-size:.72rem;font-weight:950;text-transform:uppercase;background:#fff7ed;color:#c2410c}.portal-document-card-pro h3{margin:.55rem 0 .25rem;font-size:1.12rem;font-weight:950;letter-spacing:-.025em}.portal-document-target-pro{margin:0;color:var(--portal-muted);font-weight:800;display:flex;gap:.35rem;align-items:center}.portal-document-target-pro .material-symbols-outlined{font-size:1rem}.portal-document-desc-pro{margin:.55rem 0 0;color:var(--portal-muted);font-weight:650;line-height:1.55}.portal-document-download-pro{grid-column:1/-1;margin-top:.2rem;width:100%}@media(max-width:850px){.portal-documents-grid-pro{grid-template-columns:1fr}.portal-documents-intro{align-items:flex-start;flex-direction:column}.portal-documents-counter{width:100%;display:flex;align-items:center;justify-content:center;gap:.65rem}.portal-documents-counter strong{font-size:1.8rem}}@media(max-width:480px){.portal-document-card-pro{grid-template-columns:1fr}.portal-document-icon-pro{width:54px;height:54px}.portal-documents-intro{padding:1rem}}
</style>
{% endblock %}
