{# Offer-specific extra questions (per participant, this offer) — unboxed list.
   Bound to the `extra` LiveProp keyed by question uuid; persisted with the
   attendance on apply. Types: 'yn' (two equal buttons, no preselection),
   'int' (number input), free text (textarea).

   All inputs update the model WITHOUT a server round-trip (norender /
   Stimulus controller); values ride along with the next live action.

   Include with: { extras, extra, scope } #}

{% set extras = extras|default([]) %}
{% set scope = scope|default('') %}
{% set ctl = 'ferienpass--cms-application-form' %}
{% if extras is not empty %}
    <div class="border-t border-gray-200 pt-5 dark:border-gray-700">
        {% for i, question in extras %}
            {% set inputId = 'extra_' ~ i ~ (scope ? '_' ~ scope : '') %}
            {% set value = extra[question.uuid]|default('') %}
            <div class="border-t border-dashed border-gray-200 py-4 first:border-t-0 first:pt-0 last:pb-0 dark:border-gray-700"
                 data-ferienpass--cms-application-form-target="decision"
                 data-mode="extra">
                <label for="{{ inputId }}" class="block text-sm font-semibold text-gray-900 dark:text-gray-100">
                    {{ question.question|machine_translate }}
                </label>

                <div class="group/q mt-2.5 flex flex-wrap items-center gap-3">
                    {% if 'yn' == question.type %}
                        {% set pill_base = 'flex cursor-pointer select-none items-center justify-center gap-2 rounded-md px-3 py-2 text-sm font-semibold transition [&:not([data-on]):hover]:bg-white/60 [&:not([data-on]):hover]:text-gray-900 dark:[&:not([data-on]):hover]:bg-gray-800/60 dark:[&:not([data-on]):hover]:text-gray-100' %}
                        {% set pill_off = 'text-gray-500 dark:text-gray-400' %}
                        {% set pill_yes = 'bg-white shadow-sm text-[#245a46] dark:bg-gray-800 dark:text-[#9cc4ae]' %}
                        {% set pill_no = 'bg-white shadow-sm text-red-600 dark:bg-gray-800 dark:text-red-400' %}
                        <span data-seg class="inline-grid grid-cols-2 gap-1.5 rounded-lg bg-gray-100 p-1 dark:bg-gray-700">
                            <label {% if value == 'y' %}data-on{% endif %}
                                   data-on-classes="{{ pill_yes }}" data-off-classes="{{ pill_off }}"
                                   class="{{ pill_base }} {{ value == 'y' ? pill_yes : pill_off }}">
                                <input type="radio" id="{{ inputId }}_y" class="peer sr-only"
                                       name="{{ inputId }}" value="y"
                                       {% if value == 'y' %}checked{% endif %}
                                       data-decide="radio"
                                       data-model-name="extra.{{ question.uuid }}"
                                       data-action="{{ ctl }}#decide">
                                <twig:ux:icon name="lucide:check" class="size-3.5 {{ value == 'y' ? '' : 'hidden' }}" />
                                {{ 'applicationForm.extra.yes'|trans({}, 'cms') }}
                            </label>
                            <label {% if value == 'n' %}data-on{% endif %}
                                   data-on-classes="{{ pill_no }}" data-off-classes="{{ pill_off }}"
                                   class="{{ pill_base }} {{ value == 'n' ? pill_no : pill_off }}">
                                <input type="radio" id="{{ inputId }}_n" class="peer sr-only"
                                       name="{{ inputId }}" value="n"
                                       {% if value == 'n' %}checked{% endif %}
                                       data-decide="radio"
                                       data-model-name="extra.{{ question.uuid }}"
                                       data-action="{{ ctl }}#decide">
                                <twig:ux:icon name="lucide:x" class="size-3.5 {{ value == 'n' ? '' : 'hidden' }}" />
                                {{ 'applicationForm.extra.no'|trans({}, 'cms') }}
                            </label>
                        </span>
                        <span data-caption class="items-center gap-1.5 text-xs font-semibold text-amber-600 [&:not(.hidden)]:inline-flex dark:text-amber-400 {{ value in ['y', 'n'] ? 'hidden' }}">
                            <twig:ux:icon name="lucide:shield-alert" class="size-4" />
                            {{ 'applicationForm.pleaseDecide'|trans({}, 'cms') }}
                        </span>
                    {% elseif 'int' == question.type %}
                        <input type="number" step="1" id="{{ inputId }}"
                               data-model="norender|extra.{{ question.uuid }}"
                               data-action="{{ ctl }}#sync"
                               class="block w-full max-w-40 rounded-md border-0 py-2 text-sm text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 dark:bg-gray-900 dark:text-gray-100 dark:ring-gray-600">
                    {% else %}
                        <textarea rows="2" id="{{ inputId }}"
                                  data-model="norender|extra.{{ question.uuid }}"
                                  data-action="{{ ctl }}#sync"
                                  class="block w-full resize-y rounded-md border-0 py-2 text-sm leading-6 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 dark:bg-gray-900 dark:text-gray-100 dark:ring-gray-600">{{ value }}</textarea>
                    {% endif %}
                </div>
            </div>
        {% endfor %}
    </div>
{% endif %}
