{# Availability banner.

   firstcome: free spots + progress meter — green / amber (≤2 left) /
   gray (waitlist only). lot: no concrete numbers, just the fairness
   note and the chance of getting a spot.

   Required context: offer, applicationSystem, vacant, firstComeAvailability #}

{% if applicationSystem.type == 'lot' %}

    {% set chance = not offer.maxParticipants ? 1 : min(1, max(0, offer.maxParticipants / max(1, offer.attendancesNotHidden|length + 1))) %}
    {% set chance_color = chance >= 0.7 ? 'text-[#2f6f57] dark:text-[#5f9a7e]' : (chance >= 0.4 ? 'text-amber-600 dark:text-amber-400' : 'text-red-600 dark:text-red-400') %}
    <div class="flex items-center gap-3.5 rounded-lg border border-blue-200 bg-blue-50 p-4 dark:border-blue-900/50 dark:bg-blue-900/15">
        <div class="grid size-10 flex-none place-items-center rounded-md bg-white text-blue-600 dark:bg-gray-900 dark:text-blue-400">
            <twig:ux:icon name="lucide:ticket" class="size-5" />
        </div>
        <div class="min-w-0 flex-1">
            <b class="text-sm font-bold text-blue-950 dark:text-blue-100">{{ 'applicationForm.spots.lot'|trans({}, 'cms') }}</b>
            <span class="mt-px block text-xs font-medium text-gray-600 dark:text-gray-300">{{ 'applicationForm.spots.lotSub'|trans({}, 'cms') }}</span>
        </div>
        <div class="flex-none text-right">
            <div class="text-2xl font-bold leading-none tracking-tight {{ chance_color }}">{{ '%d'|format(chance * 100) }}%</div>
            <div class="mt-1 text-[10px] font-semibold text-gray-500 dark:text-gray-400">{{ 'applicationForm.spots.lotCap'|trans({}, 'cms') }}</div>
        </div>
    </div>

{% else %}

    {% if vacant is not null and vacant <= 0 %}
        {% set palette = { box: 'border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-gray-800/60', icon: 'text-gray-500 dark:text-gray-400', title: 'text-gray-700 dark:text-gray-200', fill: 'bg-gray-400' } %}
        {% set title = 'applicationForm.spots.full'|trans({}, 'cms') %}
        {# Only promise a waiting list where the season actually keeps one. #}
        {% set sub = (firstComeAvailability|default('open') == 'open' ? 'applicationForm.spots.fullSub' : 'applicationForm.spots.fullNoWaitlistSub')|trans({}, 'cms') %}
    {% elseif vacant is not null and vacant <= 2 %}
        {% set palette = { box: 'border-amber-200 bg-amber-50 dark:border-amber-900/50 dark:bg-amber-900/15', icon: 'text-amber-600 dark:text-amber-400', title: 'text-amber-950 dark:text-amber-100', fill: 'bg-amber-500' } %}
        {% set title = 'applicationForm.spots.free'|trans({count: vacant}, 'cms') %}
        {% set sub = 'applicationForm.spots.tightSub'|trans({}, 'cms') %}
    {% elseif vacant is not null %}
        {% set palette = { box: 'border-[#cce0d4] bg-[#e5efe9] dark:border-[#245a46]/60 dark:bg-[#2f6f57]/15', icon: 'text-[#2f6f57] dark:text-[#5f9a7e]', title: 'text-[#1f4a3a] dark:text-[#d9e7df]', fill: 'bg-[#2f6f57]' } %}
        {% set title = 'applicationForm.spots.free'|trans({count: vacant}, 'cms') %}
        {% set sub = 'applicationForm.spots.freeSub'|trans({}, 'cms') %}
    {% else %}
        {% set palette = { box: 'border-[#cce0d4] bg-[#e5efe9] dark:border-[#245a46]/60 dark:bg-[#2f6f57]/15', icon: 'text-[#2f6f57] dark:text-[#5f9a7e]', title: 'text-[#1f4a3a] dark:text-[#d9e7df]', fill: 'bg-[#2f6f57]' } %}
        {% set title = 'applicationForm.spots.open'|trans({}, 'cms') %}
        {% set sub = 'applicationForm.spots.freeSub'|trans({}, 'cms') %}
    {% endif %}

    <div class="flex items-center gap-3.5 rounded-lg border p-4 {{ palette.box }}">
        <div class="grid size-10 flex-none place-items-center rounded-md bg-white dark:bg-gray-900 {{ palette.icon }}">
            <twig:ux:icon name="lucide:users" class="size-5" />
        </div>
        <div class="min-w-0 flex-1">
            <b class="text-sm font-bold {{ palette.title }}">{{ title }}</b>
            <span class="mt-px block text-xs font-medium text-gray-600 dark:text-gray-300">{{ sub }}</span>
        </div>
        {% if vacant is not null and offer.maxParticipants > 0 %}
            <div class="w-24 flex-none">
                <div class="h-1.5 overflow-hidden rounded-full bg-black/10 dark:bg-white/10">
                    <div role="progressbar"
                         class="h-full rounded-full {{ palette.fill }}"
                         style="width:{{ '%d'|format(vacant / offer.maxParticipants * 100) }}%"
                         aria-valuenow="{{ vacant }}"
                         aria-valuemin="0"
                         aria-valuemax="{{ offer.maxParticipants }}"></div>
                </div>
                <div class="mt-1 text-right text-[10px] font-semibold text-gray-500 dark:text-gray-400">
                    {{ 'applicationForm.spots.cap'|trans({free: vacant, total: offer.maxParticipants}, 'cms') }}
                </div>
            </div>
        {% endif %}
    </div>

{% endif %}
