{# Widget « Documents » — liste de fichiers à télécharger.

   Répond au besoin le plus banal d'une association : distribuer des PDF (fiche
   d'inscription, règlement, convocation) sans les noyer dans un bloc de texte.
   Chaque entrée annonce son type, sa taille et sa date, pour qu'on sache ce
   qu'on télécharge avant de cliquer.

   `fileType` est résolu côté PHP à partir de l'extension : l'éditeur n'a donc
   rien à saisir dans le cas courant. #}

{% set typeStyles = {
    'pdf':   {'icon': 'fa-file-pdf',        'color': '#dc2626', 'label': 'PDF'},
    'doc':   {'icon': 'fa-file-word',       'color': '#2563eb', 'label': 'Word'},
    'xls':   {'icon': 'fa-file-excel',      'color': '#16a34a', 'label': 'Excel'},
    'ppt':   {'icon': 'fa-file-powerpoint', 'color': '#ea580c', 'label': 'PowerPoint'},
    'image': {'icon': 'fa-file-image',      'color': '#7c3aed', 'label': 'Image'},
    'zip':   {'icon': 'fa-file-zipper',     'color': '#ca8a04', 'label': 'Archive'},
    'link':  {'icon': 'fa-arrow-up-right-from-square', 'color': '#0891b2', 'label': 'Lien'},
    'file':  {'icon': 'fa-file-lines',      'color': '#64748b', 'label': 'Fichier'}
} %}

<div class="izi-documents-widget izi-documents--{{ layout }}"
     style="--izi-doc-accent: {{ accentColor }}; --izi-doc-columns: {{ columns }};">

    {% if title %}
        <h3 class="izi-documents__title">{{ title }}</h3>
    {% endif %}

    {% if items is empty %}
        <p class="izi-documents__empty">
            <i class="fa-solid fa-folder-open" aria-hidden="true"></i>
            Aucun document pour le moment.
        </p>
    {% else %}
        <ul class="izi-documents__list">
            {% for item in items %}
                {% set style = typeStyles[item.fileType|default('file')]|default(typeStyles['file']) %}
                {% set isExternal = item.newTab|default(false) %}
                <li class="izi-documents__item">
                    <a class="izi-documents__link"
                       href="{{ item.url|default('#') }}"
                       style="--izi-doc-type-color: {{ style.color }};"
                       {% if isExternal %}target="_blank" rel="noopener noreferrer"{% endif %}
                       {% if item.fileType|default('file') != 'link' %}download{% endif %}>

                        {% if showIcon %}
                            <span class="izi-documents__icon" aria-hidden="true">
                                <i class="fa-solid {{ style.icon }}"></i>
                            </span>
                        {% endif %}

                        <span class="izi-documents__body">
                            <span class="izi-documents__label">{{ item.label|default('Document') }}</span>

                            {% if item.description|default('') %}
                                <span class="izi-documents__description">{{ item.description }}</span>
                            {% endif %}

                            <span class="izi-documents__meta">
                                <span class="izi-documents__badge">{{ style.label }}</span>
                                {% if showSize and item.size|default('') %}
                                    <span class="izi-documents__metaitem">{{ item.size }}</span>
                                {% endif %}
                                {% if showDate and item.date|default('') %}
                                    <span class="izi-documents__metaitem">{{ item.date }}</span>
                                {% endif %}
                            </span>
                        </span>

                        {# Le libellé est repris en texte masqué : « Télécharger »
                           seul, répété par un lecteur d'écran, ne dit pas quoi. #}
                        <span class="izi-documents__action">
                            <i class="fa-solid {{ item.fileType|default('file') == 'link' ? 'fa-arrow-right' : 'fa-download' }}" aria-hidden="true"></i>
                            <span class="izi-documents__sr">
                                {{ item.fileType|default('file') == 'link' ? 'Ouvrir' : 'Télécharger' }} : {{ item.label|default('document') }}
                            </span>
                        </span>
                    </a>
                </li>
            {% endfor %}
        </ul>
    {% endif %}
</div>

<style>
    .izi-documents-widget {
        padding: 0 20px;
        max-width: 1200px;
        margin: 0 auto;
        width: 100%;
    }

    .izi-documents__title {
        margin: 0 0 20px 0;
        font-size: 22px;
        font-weight: 700;
        color: var(--color-text, #1e293b);
    }

    .izi-documents__empty {
        padding: 32px;
        text-align: center;
        color: var(--color-text-muted, #94a3b8);
        background: var(--color-surface, #f8fafc);
        border: 2px dashed var(--color-surface-alt, #e2e8f0);
        border-radius: var(--radius-lg, 12px);
    }

    .izi-documents__list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        gap: 12px;
    }

    .izi-documents--grid .izi-documents__list {
        grid-template-columns: repeat(var(--izi-doc-columns, 2), minmax(0, 1fr));
        gap: 16px;
    }

    .izi-documents__link {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 16px 18px;
        background: #ffffff;
        border: 1px solid var(--color-surface-alt, #e2e8f0);
        border-radius: var(--radius-lg, 12px);
        text-decoration: none;
        color: inherit;
        transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
        height: 100%;
    }

    .izi-documents__link:hover,
    .izi-documents__link:focus-visible {
        transform: translateY(-2px);
        border-color: var(--izi-doc-accent);
        box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
    }

    .izi-documents__link:focus-visible {
        outline: 2px solid var(--izi-doc-accent);
        outline-offset: 2px;
    }

    .izi-documents__icon {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        font-size: 22px;
        border-radius: var(--radius-md, 8px);
        color: var(--izi-doc-type-color, #64748b);
        background: color-mix(in srgb, var(--izi-doc-type-color, #64748b) 12%, #ffffff);
    }

    .izi-documents__body {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .izi-documents__label {
        font-weight: 600;
        font-size: 16px;
        color: var(--color-text, #1e293b);
        line-height: 1.35;
    }

    .izi-documents__description {
        font-size: 14px;
        color: var(--color-text-light, #64748b);
        line-height: 1.5;
    }

    .izi-documents__meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        margin-top: 4px;
        font-size: 12px;
        color: var(--color-text-muted, #94a3b8);
    }

    .izi-documents__badge {
        display: inline-block;
        padding: 2px 8px;
        border-radius: var(--radius-full, 9999px);
        font-weight: 700;
        font-size: 11px;
        letter-spacing: 0.03em;
        color: var(--izi-doc-type-color, #64748b);
        background: color-mix(in srgb, var(--izi-doc-type-color, #64748b) 12%, #ffffff);
    }

    .izi-documents__metaitem::before {
        content: "·";
        margin-right: 8px;
    }

    .izi-documents__action {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: var(--radius-full, 9999px);
        color: var(--izi-doc-accent);
        background: color-mix(in srgb, var(--izi-doc-accent) 10%, #ffffff);
        transition: background 0.2s ease, color 0.2s ease;
    }

    .izi-documents__link:hover .izi-documents__action {
        background: var(--izi-doc-accent);
        color: #ffffff;
    }

    .izi-documents__sr {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .container-on-dark .izi-documents__title { color: #ffffff; }

    @media (max-width: 900px) {
        .izi-documents--grid .izi-documents__list {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 600px) {
        .izi-documents--grid .izi-documents__list {
            grid-template-columns: 1fr;
        }

        .izi-documents__link {
            gap: 12px;
            padding: 14px;
        }

        .izi-documents__icon {
            width: 40px;
            height: 40px;
            font-size: 18px;
        }

        .izi-documents__label {
            font-size: 15px;
        }
    }
</style>