{# Widget « Horaires » — créneaux hebdomadaires par jour.

   Un planning d'entraînement décrit dans un paragraphe se relit mal et se met à
   jour encore plus mal. Ici chaque créneau est une donnée (jour, début, fin,
   public concerné, lieu), donc l'affichage peut se réorganiser selon la place.

   Le regroupement par jour est fait côté PHP : Twig reçoit `days`, déjà
   ordonné selon la semaine et purgé des jours sans créneau. #}

<div class="izi-schedule-widget izi-schedule--{{ view }}" style="--izi-schedule-accent: {{ accentColor }};">

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

    {% if days is empty %}
        <p class="izi-schedule__empty">
            <i class="fa-regular fa-clock" aria-hidden="true"></i>
            Aucun créneau renseigné.
        </p>
    {% else %}
        <div class="izi-schedule__grid">
            {% for day in days %}
                <section class="izi-schedule__day">
                    <h4 class="izi-schedule__dayname">{{ day.label }}</h4>

                    <ul class="izi-schedule__slots">
                        {% for slot in day.slots %}
                            <li class="izi-schedule__slot" style="--izi-slot-color: {{ slot.color }};">
                                <span class="izi-schedule__time">{{ slot.timeLabel }}</span>

                                <span class="izi-schedule__details">
                                    {% if slot.label %}
                                        <span class="izi-schedule__label">{{ slot.label }}</span>
                                    {% endif %}

                                    {% if slot.group %}
                                        <span class="izi-schedule__group">{{ slot.group }}</span>
                                    {% endif %}

                                    {% if showLocation and slot.location %}
                                        <span class="izi-schedule__location">
                                            <i class="fa-solid fa-location-dot" aria-hidden="true"></i>{{ slot.location }}
                                        </span>
                                    {% endif %}
                                </span>
                            </li>
                        {% endfor %}
                    </ul>
                </section>
            {% endfor %}
        </div>
    {% endif %}

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

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

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

    .izi-schedule__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);
    }

    /* `auto-fit` plutôt qu'un nombre de colonnes figé : le planning d'un club
       peut compter deux jours comme six, et un réglage manuel serait faux la
       moitié du temps. */
    .izi-schedule__grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 18px;
    }

    .izi-schedule--list .izi-schedule__grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .izi-schedule__day {
        background: #ffffff;
        border: 1px solid var(--color-surface-alt, #e2e8f0);
        border-radius: var(--radius-lg, 12px);
        overflow: hidden;
        box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.1));
    }

    .izi-schedule__dayname {
        margin: 0;
        padding: 14px 18px;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: #ffffff;
        background: var(--izi-schedule-accent);
    }

    .izi-schedule__slots {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .izi-schedule__slot {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        padding: 14px 18px;
        border-left: 3px solid var(--izi-slot-color, transparent);
    }

    .izi-schedule__slot + .izi-schedule__slot {
        border-top: 1px solid var(--color-surface-alt, #f1f5f9);
    }

    .izi-schedule--list .izi-schedule__slot {
        align-items: center;
    }

    .izi-schedule__time {
        flex-shrink: 0;
        font-weight: 700;
        font-size: 15px;
        color: var(--color-text, #1e293b);
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    .izi-schedule__details {
        display: flex;
        flex-direction: column;
        gap: 3px;
        min-width: 0;
    }

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

    .izi-schedule__group {
        font-size: 13px;
        color: var(--izi-slot-color, var(--izi-schedule-accent));
        font-weight: 600;
    }

    .izi-schedule__location {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 13px;
        color: var(--color-text-light, #64748b);
    }

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

    .container-on-dark .izi-schedule__title { color: #ffffff; }
    .container-on-dark .izi-schedule__footnote { color: var(--primitive-gray-200, #e2e8f0); }

    @media (max-width: 560px) {
        .izi-schedule__grid {
            grid-template-columns: 1fr;
        }

        .izi-schedule__slot {
            flex-direction: column;
            gap: 6px;
            padding: 12px 16px;
        }

        .izi-schedule__dayname {
            padding: 12px 16px;
            font-size: 13px;
        }
    }
</style>