{# Widget « Tableau » — données tabulaires génériques.

   Remplace les tableaux HTML collés dans un bloc WYSIWYG : ceux-là débordaient
   sur mobile et n'étaient pas éditables sans toucher au code. Ici la structure
   est décrite en données (colonnes + lignes), donc le rendu peut s'adapter.

   Deux stratégies mobiles, au choix de l'éditeur :
   - `scroll` : le tableau garde sa forme et défile horizontalement. La zone est
     focusable au clavier, sinon le contenu débordant serait inatteignable sans
     souris.
   - `stack`  : chaque ligne devient une carte, chaque cellule reprend son
     en-tête via `data-label`. Préférable quand il y a peu de colonnes. #}

{% set alignMap = {'left': 'left', 'center': 'center', 'right': 'right'} %}

<div class="izi-table-widget" style="--izi-table-accent: {{ accentColor }};">
    {% if title %}
        <h3 class="izi-table__title">{{ title }}</h3>
    {% endif %}

    <div class="izi-table__scroll"
         {% if responsiveMode == 'scroll' %}tabindex="0" role="region" aria-label="{{ title|default(caption)|default('Tableau de données') }}"{% endif %}>
        <table class="izi-table izi-table--head-{{ headerStyle }} izi-table--{{ responsiveMode }}{{ striped ? ' izi-table--striped' : '' }}{{ bordered ? ' izi-table--bordered' : '' }}{{ compact ? ' izi-table--compact' : '' }}">
            {% if caption %}
                <caption class="izi-table__caption">{{ caption }}</caption>
            {% endif %}

            {% if columns is not empty %}
                <thead>
                    <tr>
                        {% for col in columns %}
                            <th scope="col"
                                style="text-align: {{ alignMap[col.align|default('left')]|default('left') }};{% if col.width is defined and col.width %} width: {{ col.width }};{% endif %}">
                                {{ col.label|default('') }}
                            </th>
                        {% endfor %}
                    </tr>
                </thead>
            {% endif %}

            <tbody>
                {% for row in rows %}
                    {% set cells = row.cells|default([]) %}
                    <tr{{ row.highlight|default(false) ? ' class="izi-table__row--highlight"' : '' }}>
                        {% for cell in cells %}
                            {% set col = columns[loop.index0]|default({}) %}
                            {% set isHead = loop.first and firstColumnStrong %}
                            {% if isHead %}
                                <th scope="row"
                                    data-label="{{ col.label|default('') }}"
                                    style="text-align: {{ alignMap[col.align|default('left')]|default('left') }};">{{ cell }}</th>
                            {% else %}
                                <td data-label="{{ col.label|default('') }}"
                                    style="text-align: {{ alignMap[col.align|default('left')]|default('left') }};">{{ cell }}</td>
                            {% endif %}
                        {% endfor %}
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    {% if footnote %}
        <p class="izi-table__footnote">{{ footnote }}</p>
    {% endif %}
</div>

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

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

    /* Le défilement horizontal est porté par ce conteneur, pas par la page :
       une largeur de tableau ne doit jamais faire défiler le body. */
    .izi-table__scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: var(--radius-lg, 12px);
    }

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

    .izi-table {
        width: 100%;
        border-collapse: collapse;
        background: #ffffff;
        font-size: 15px;
        line-height: 1.5;
        color: var(--color-text, #1e293b);
        border-radius: var(--radius-lg, 12px);
        overflow: hidden;
        box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.1));
    }

    .izi-table__caption {
        caption-side: bottom;
        padding: 12px 4px 0;
        font-size: 13px;
        color: var(--color-text-light, #64748b);
        text-align: left;
    }

    .izi-table th,
    .izi-table td {
        padding: 14px 18px;
        vertical-align: middle;
    }

    .izi-table--compact th,
    .izi-table--compact td {
        padding: 9px 14px;
        font-size: 14px;
    }

    .izi-table thead th {
        font-weight: 700;
        font-size: 13px;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .izi-table--head-primary thead th {
        background: var(--izi-table-accent);
        color: #ffffff;
    }

    .izi-table--head-surface thead th {
        background: var(--color-surface-alt, #f1f5f9);
        color: var(--color-text, #1e293b);
        border-bottom: 2px solid var(--izi-table-accent);
    }

    .izi-table--head-plain thead th {
        background: transparent;
        color: var(--color-text-light, #64748b);
        border-bottom: 2px solid var(--color-surface-alt, #f1f5f9);
    }

    .izi-table tbody th {
        font-weight: 600;
    }

    .izi-table--bordered tbody tr + tr th,
    .izi-table--bordered tbody tr + tr td {
        border-top: 1px solid var(--color-surface-alt, #f1f5f9);
    }

    .izi-table--striped tbody tr:nth-child(even) th,
    .izi-table--striped tbody tr:nth-child(even) td {
        background: var(--color-surface, #f8fafc);
    }

    /* Ligne mise en avant : l'accent est porté par une bordure gauche et un fond
       très léger. Un aplat saturé rendrait le texte difficile à lire et
       casserait le contraste avec les lignes voisines. */
    .izi-table__row--highlight th,
    .izi-table__row--highlight td {
        background: color-mix(in srgb, var(--izi-table-accent) 10%, #ffffff) !important;
        font-weight: 600;
    }

    .izi-table__row--highlight th:first-child,
    .izi-table__row--highlight td:first-child {
        box-shadow: inset 3px 0 0 0 var(--izi-table-accent);
    }

    .izi-table__footnote {
        margin: 14px 0 0 0;
        font-size: 13px;
        color: var(--color-text-light, #64748b);
    }

    /* Texte clair sur conteneur sombre : le tableau garde son fond blanc, donc
       seuls le titre et la note doivent être repeints. */
    .container-on-dark .izi-table__title { color: #ffffff; }
    .container-on-dark .izi-table__footnote { color: var(--primitive-gray-200, #e2e8f0); }

    @media (max-width: 640px) {
        /* Mode « carte » : l'en-tête disparaît visuellement mais reste lisible
           par les lecteurs d'écran, et chaque cellule réaffiche son intitulé. */
        .izi-table--stack {
            box-shadow: none;
            background: transparent;
        }

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

        .izi-table--stack tbody tr {
            display: block;
            background: #ffffff;
            border: 1px solid var(--color-surface-alt, #f1f5f9);
            border-radius: var(--radius-lg, 12px);
            box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.1));
            margin-bottom: 12px;
            padding: 6px 0;
            overflow: hidden;
        }

        .izi-table--stack tbody th,
        .izi-table--stack tbody td {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            gap: 16px;
            border: 0 !important;
            background: transparent !important;
            padding: 8px 16px;
            text-align: right !important;
        }

        .izi-table--stack tbody th::before,
        .izi-table--stack tbody td::before {
            content: attr(data-label);
            font-weight: 600;
            font-size: 13px;
            color: var(--color-text-light, #64748b);
            text-align: left;
            flex-shrink: 0;
        }

        /* Sans intitulé de colonne le pseudo-élément serait une puce vide qui
           décale le contenu : on rend alors la cellule pleine largeur. */
        .izi-table--stack tbody th[data-label=""]::before,
        .izi-table--stack tbody td[data-label=""]::before {
            display: none;
        }

        .izi-table--stack .izi-table__row--highlight {
            border-color: var(--izi-table-accent);
            box-shadow: inset 3px 0 0 0 var(--izi-table-accent);
        }
    }
</style>