{# 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.

   'file' is the exception: a file cannot ride along, because the browser clears
   file inputs on every live re-render — so it is uploaded and stored immediately
   ({@see ApplicationForm::uploadExtraFile}) and only its id travels in the props.

   Include with: { extras, extra, scope, form, fileErrors, missing } #}

{% set extras = extras|default([]) %}
{% set scope = scope|default('') %}
{% set fileErrors = fileErrors|default({}) %}
{% set missing = missing|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('') %}
            {% set isMissing = question.uuid in missing %}
            <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"
                 {# The submit gate only blocks on questions the admin marked as
                    required; optional ones may stay empty. #}
                 data-required="{{ question.required|default(false) ? '1' : '0' }}">
                <label for="{{ inputId }}" class="block text-sm font-semibold text-gray-900 dark:text-gray-100">
                    {{ question.question|machine_translate }}
                    {% if not question.required|default(false) %}
                        <span class="ml-1 text-xs font-medium text-gray-400 dark:text-gray-500">{{ 'applicationForm.extra.optional'|trans({}, 'cms') }}</span>
                    {% endif %}
                </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 'file' == question.type %}
                        {% set file = form is defined and form is not null ? form.extraFile(question.uuid) : null %}
                        {% set fileError = fileErrors[question.uuid]|default(null) %}
                        {% set kinds = question.fileTypes|default(['image', 'pdf']) %}
                        {% set accept = 'image' in kinds ? ('pdf' in kinds ? 'image/*,application/pdf' : 'image/*') : 'application/pdf' %}
                        <div class="w-full" data-extra-file="{{ file ? '1' : '0' }}">
                            {% if file %}
                                {# Already attached: name + size, and the two ways out. No
                                   preview is fetched — the bytes are only readable through an
                                   access-controlled endpoint, and the applicant just picked
                                   the file anyway. #}
                                <div class="flex flex-wrap items-center gap-3 rounded-lg border border-[#cce0d4] bg-[#e5efe9] p-3 dark:border-[#245a46]/60 dark:bg-[#2f6f57]/15">
                                    <span class="grid size-10 flex-none place-items-center rounded-md bg-white text-[#2f6f57] dark:bg-gray-900 dark:text-[#5f9a7e]">
                                        <twig:ux:icon name="{{ file.isPdf ? 'lucide:file-text' : 'lucide:image' }}" class="size-5" />
                                    </span>
                                    <span class="min-w-0 flex-1 text-sm leading-5">
                                        <b class="block truncate font-semibold text-[#1f4a3a] dark:text-[#d9e7df]">{{ file.name }}</b>
                                        <span class="text-xs font-medium text-gray-600 dark:text-gray-300">{{ (file.size / 1024 / 1024)|round(2) }} MB</span>
                                    </span>
                                    <span class="flex flex-none flex-wrap gap-2">
                                        <label class="cursor-pointer rounded-md bg-white px-2.5 py-1.5 text-xs font-semibold text-gray-700 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-200 dark:ring-gray-600">
                                            {{ 'applicationForm.extra.file.replace'|trans({}, 'cms') }}
                                            <input type="file" name="extraFile" class="sr-only" accept="{{ accept }}"
                                                   data-action="change->live#action"
                                                   data-live-action-param="files|uploadExtraFile"
                                                   data-live-question-param="{{ question.uuid }}">
                                        </label>
                                        <button type="button"
                                                class="rounded-md px-2.5 py-1.5 text-xs font-semibold text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20"
                                                data-action="live#action"
                                                data-live-action-param="removeExtraFile"
                                                data-live-question-param="{{ question.uuid }}">
                                            {{ 'applicationForm.extra.file.remove'|trans({}, 'cms') }}
                                        </button>
                                    </span>
                                </div>
                            {% else %}
                                <div class="rounded-lg border-[1.5px] border-dashed {{ isMissing or fileError ? 'border-red-400 bg-red-50/40 dark:border-red-500 dark:bg-red-900/10' : 'border-gray-300 dark:border-gray-600' }} p-3">
                                    <div class="flex flex-wrap gap-2">
                                        <label class="inline-flex cursor-pointer items-center gap-2 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-700 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-200 dark:ring-gray-600">
                                            <twig:ux:icon name="lucide:paperclip" class="size-4" />
                                            {{ 'applicationForm.extra.file.pick'|trans({}, 'cms') }}
                                            <input type="file" id="{{ inputId }}" name="extraFile" class="sr-only" accept="{{ accept }}"
                                                   data-action="change->live#action"
                                                   data-live-action-param="files|uploadExtraFile"
                                                   data-live-question-param="{{ question.uuid }}">
                                        </label>
                                        {% if 'image' in kinds %}
                                            {# `capture` opens the camera straight away on a phone;
                                               on a desktop browser it is ignored, which is why it
                                               sits on a SECOND input next to the plain picker. #}
                                            <label class="inline-flex cursor-pointer items-center gap-2 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-700 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:hidden dark:bg-gray-800 dark:text-gray-200 dark:ring-gray-600">
                                                <twig:ux:icon name="lucide:camera" class="size-4" />
                                                {{ 'applicationForm.extra.file.capture'|trans({}, 'cms') }}
                                                <input type="file" name="extraFile" class="sr-only" accept="image/*" capture="environment"
                                                       data-action="change->live#action"
                                                       data-live-action-param="files|uploadExtraFile"
                                                       data-live-question-param="{{ question.uuid }}">
                                            </label>
                                        {% endif %}
                                    </div>
                                    <p class="mt-2 text-xs leading-5 text-gray-500 dark:text-gray-400">
                                        {{ 'applicationForm.extra.file.hint'|trans({ types: ('image' in kinds ? ('pdf' in kinds ? 'applicationForm.extra.file.types.both' : 'applicationForm.extra.file.types.image') : 'applicationForm.extra.file.types.pdf')|trans({}, 'cms'), max: 10 }, 'cms') }}
                                    </p>
                                </div>
                            {% endif %}

                            {% if fileError %}
                                <p class="mt-2 flex items-center gap-1.5 text-xs font-semibold text-red-600 dark:text-red-400">
                                    <twig:ux:icon name="lucide:alert-circle" class="size-4 flex-none" />
                                    {{ fileError.key|trans(fileError.params|default({}), 'cms') }}
                                </p>
                            {% elseif isMissing %}
                                <p class="mt-2 text-xs font-semibold text-red-600 dark:text-red-400">{{ 'applicationForm.extra.requiredField'|trans({}, 'cms') }}</p>
                            {% endif %}
                        </div>
                    {% 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>

                {# Required-but-empty marker for the non-file types (the file branch
                   renders its own, next to the upload box). #}
                {% if isMissing and 'file' != question.type %}
                    <p class="mt-2 text-xs font-semibold text-red-600 dark:text-red-400">{{ 'applicationForm.extra.requiredField'|trans({}, 'cms') }}</p>
                {% endif %}
            </div>
        {% endfor %}
    </div>
{% endif %}
