{# Widget « Compte à rebours » — décompte jusqu'à une date.

   Le calcul est fait dans le navigateur, à partir d'une date ISO absolue avec
   décalage horaire : un décompte calculé côté serveur serait figé à l'instant du
   rendu et faux dès la première seconde (et complètement faux derrière un
   cache).

   Le rendu initial affiche déjà des valeurs cohérentes côté serveur : sans cela
   la page clignoterait sur des zéros avant l'exécution du script. #}

<div class="izi-countdown-widget izi-countdown--{{ background }}"
     id="{{ uid }}"
     data-target="{{ targetIso }}"
     data-expired-text="{{ expiredText }}"
     style="--izi-countdown-accent: {{ accentColor }};">

    <div class="izi-countdown__inner">
        {% if title %}
            <h3 class="izi-countdown__title">{{ title }}</h3>
        {% endif %}

        {% if subtitle %}
            <p class="izi-countdown__subtitle">{{ subtitle }}</p>
        {% endif %}

        {% if not targetIso %}
            <p class="izi-countdown__empty">
                <i class="fa-regular fa-clock" aria-hidden="true"></i>
                Aucune date cible renseignée.
            </p>
        {% else %}
            {# aria-live="off" : annoncer chaque seconde noierait un lecteur
               d'écran. La date cible reste lisible dans le texte alternatif. #}
            <div class="izi-countdown__units izi-countdown--{{ style }}"
                 role="timer"
                 aria-live="off"
                 aria-label="Compte à rebours jusqu'au {{ targetLabel }}">

                {% for unit in units %}
                    <div class="izi-countdown__unit" data-unit="{{ unit.key }}">
                        <span class="izi-countdown__value" data-countdown-value="{{ unit.key }}">{{ unit.value }}</span>
                        <span class="izi-countdown__label">{{ unit.label }}</span>
                    </div>
                {% endfor %}
            </div>

            <p class="izi-countdown__expired" data-countdown-expired hidden>{{ expiredText }}</p>

            {% if targetLabel %}
                <p class="izi-countdown__target">{{ targetLabel }}</p>
            {% endif %}
        {% endif %}

        {% if ctaText and ctaLink %}
            <a class="izi-countdown__cta" href="{{ ctaLink }}">{{ ctaText }}</a>
        {% endif %}
    </div>
</div>

<style>
    .izi-countdown-widget {
        padding: 0 20px;
        width: 100%;
    }

    .izi-countdown__inner {
        max-width: 900px;
        margin: 0 auto;
        text-align: center;
        padding: 40px 24px;
        border-radius: var(--radius-xl, 16px);
    }

    .izi-countdown--surface .izi-countdown__inner {
        background: var(--color-surface, #f8fafc);
        border: 1px solid var(--color-surface-alt, #e2e8f0);
    }

    .izi-countdown--primary .izi-countdown__inner {
        background: var(--izi-countdown-accent);
        color: #ffffff;
    }

    .izi-countdown--transparent .izi-countdown__inner {
        background: transparent;
        padding: 20px 0;
    }

    .izi-countdown__title {
        margin: 0 0 8px 0;
        font-size: 26px;
        font-weight: 700;
        color: var(--color-text, #1e293b);
    }

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

    .izi-countdown--primary .izi-countdown__title,
    .izi-countdown--primary .izi-countdown__subtitle,
    .izi-countdown--primary .izi-countdown__target {
        color: #ffffff;
    }

    .izi-countdown--primary .izi-countdown__subtitle,
    .izi-countdown--primary .izi-countdown__target {
        opacity: 0.9;
    }

    .izi-countdown__empty {
        color: var(--color-text-muted, #94a3b8);
        margin: 0;
    }

    .izi-countdown__units {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 14px;
    }

    .izi-countdown__unit {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-width: 96px;
        padding: 18px 14px;
        border-radius: var(--radius-lg, 12px);
    }

    .izi-countdown--boxes .izi-countdown__unit {
        background: #ffffff;
        box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
        border: 1px solid var(--color-surface-alt, #e2e8f0);
    }

    .izi-countdown--primary .izi-countdown--boxes .izi-countdown__unit {
        background: rgba(255, 255, 255, 0.15);
        border-color: rgba(255, 255, 255, 0.25);
        box-shadow: none;
    }

    .izi-countdown--inline .izi-countdown__unit {
        padding: 6px 10px;
        min-width: 72px;
    }

    /* `tabular-nums` évite que la largeur du bloc saute à chaque changement de
       chiffre — sans cela le décompte tressaute une fois par seconde. */
    .izi-countdown__value {
        font-size: 40px;
        font-weight: 800;
        line-height: 1;
        color: var(--izi-countdown-accent);
        font-variant-numeric: tabular-nums;
    }

    .izi-countdown--primary .izi-countdown__value {
        color: #ffffff;
    }

    .izi-countdown--inline .izi-countdown__value {
        font-size: 30px;
    }

    .izi-countdown__label {
        margin-top: 8px;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--color-text-light, #64748b);
    }

    .izi-countdown--primary .izi-countdown__label {
        color: rgba(255, 255, 255, 0.85);
    }

    .izi-countdown__expired {
        margin: 0;
        font-size: 20px;
        font-weight: 700;
        color: var(--izi-countdown-accent);
    }

    .izi-countdown--primary .izi-countdown__expired {
        color: #ffffff;
    }

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

    .izi-countdown__cta {
        display: inline-block;
        margin-top: 24px;
        padding: 13px 30px;
        border-radius: var(--radius-md, 8px);
        background: var(--izi-countdown-accent);
        color: #ffffff;
        font-weight: 600;
        text-decoration: none;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .izi-countdown--primary .izi-countdown__cta {
        background: #ffffff;
        color: var(--izi-countdown-accent);
    }

    .izi-countdown__cta:hover,
    .izi-countdown__cta:focus-visible {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
    }

    .container-on-dark .izi-countdown--transparent .izi-countdown__title,
    .container-on-dark .izi-countdown--transparent .izi-countdown__value { color: #ffffff; }
    .container-on-dark .izi-countdown--transparent .izi-countdown__subtitle,
    .container-on-dark .izi-countdown--transparent .izi-countdown__label,
    .container-on-dark .izi-countdown--transparent .izi-countdown__target { color: var(--primitive-gray-200, #e2e8f0); }

    @media (max-width: 560px) {
        .izi-countdown__inner {
            padding: 30px 16px;
        }

        .izi-countdown__units {
            gap: 10px;
        }

        .izi-countdown__unit {
            min-width: 70px;
            padding: 14px 8px;
        }

        .izi-countdown__value {
            font-size: 30px;
        }

        .izi-countdown__label {
            font-size: 10px;
            letter-spacing: 0.05em;
        }

        .izi-countdown__title {
            font-size: 22px;
        }
    }
</style>

<script>
(function () {
    var root = document.getElementById({{ uid|json_encode|raw }});
    if (!root) { return; }

    var target = Date.parse(root.getAttribute('data-target'));
    if (isNaN(target)) { return; }

    var values = {};
    root.querySelectorAll('[data-countdown-value]').forEach(function (el) {
        values[el.getAttribute('data-countdown-value')] = el;
    });

    var unitsBlock = root.querySelector('.izi-countdown__units');
    var expiredBlock = root.querySelector('[data-countdown-expired]');
    var timer = null;

    function pad(n) { return n < 10 ? '0' + n : String(n); }

    function tick() {
        var diff = target - Date.now();

        if (diff <= 0) {
            if (unitsBlock) { unitsBlock.hidden = true; }
            if (expiredBlock) { expiredBlock.hidden = false; }
            if (timer) { clearInterval(timer); }
            return;
        }

        var totalSeconds = Math.floor(diff / 1000);
        var days = Math.floor(totalSeconds / 86400);
        var hours = Math.floor((totalSeconds % 86400) / 3600);
        var minutes = Math.floor((totalSeconds % 3600) / 60);
        var seconds = totalSeconds % 60;

        // Quand le bloc « jours » est masqué par la configuration, les heures
        // doivent absorber les jours restants, sinon le décompte affiche moins
        // de temps qu'il n'en reste réellement.
        if (!values.days && values.hours) {
            hours += days * 24;
            days = 0;
        }

        if (values.days) { values.days.textContent = String(days); }
        if (values.hours) { values.hours.textContent = values.days ? pad(hours) : String(hours); }
        if (values.minutes) { values.minutes.textContent = pad(minutes); }
        if (values.seconds) { values.seconds.textContent = pad(seconds); }
    }

    tick();
    timer = setInterval(tick, 1000);
})();
</script>