{% trans_default_domain 'admin' %}

{# The file answer of one extra question: preview + download + replace/remove.
   Laid out like the media file drawer (@FerienpassAdmin/components/Files/Details)
   so the two feel like the same thing.

   The preview loads through the access-controlled preview endpoint — the storage
   has no public URI, on purpose: these are files uploaded by families. #}

{% set file = this.file %}
{% set canEdit = this.canEdit %}
{% set kinds = question.fileTypes|default(['image', 'pdf']) %}
{% set accept = 'image' in kinds ? ('pdf' in kinds ? 'image/*,application/pdf' : 'image/*') : 'application/pdf' %}
{% set routeParams = { uuid: attendance.uuid.toBase58, question: question.urlId } %}

<div {{ attributes.defaults({ class: '@container' }) }}>
    <div class="relative flex h-full flex-col bg-white dark:bg-gray-900">
        <div class="flex-1 overflow-y-auto">

            {# ── header: the same gray band every other drawer opens with ── #}
            <div class="bg-gray-50 px-4 py-6 sm:px-6 dark:bg-gray-800/50">
                <div class="space-y-1">
                    <h2 id="drawer-title" class="text-base font-semibold text-gray-900 @lg:text-xl @lg:font-bold @lg:tracking-tight dark:text-white @lg:dark:text-gray-50">{{ question.question }}</h2>
                    <p class="text-sm text-gray-500 dark:text-gray-400">
                        {{ 'attendanceFile.subtitle'|trans({
                            participant: attendance.participant ? attendance.participant.name : 'attendanceShow.deletedParticipant'|trans,
                            offer: attendance.offer.name,
                        }) }}
                    </p>
                </div>
                {% if question.required|default(false) %}
                    <span class="mt-2.5 inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wide text-red-700 bg-red-50 dark:bg-red-900/30 dark:text-red-300">{{ 'attendances.requirement.required'|trans }}</span>
                {% endif %}
            </div>

            <div class="space-y-6 px-4 py-6 sm:px-6">

                {% if error %}
                    <twig:Admin:Alert type="error" :message="error.key|trans(error.params|default({}), 'cms')" />
                {% endif %}

                {% if file %}
                    {# ── preview ── #}
                    <div>
                        <div class="relative block w-full overflow-hidden rounded-lg bg-gray-100 dark:bg-gray-800">
                            {% if file.isImage %}
                                <img src="{{ path('admin_attendance_file_preview', routeParams) }}" alt="{{ file.name }}"
                                     class="max-h-[28rem] w-full object-contain">
                            {% elseif file.isPdf %}
                                <embed src="{{ path('admin_attendance_file_preview', routeParams) }}"
                                       class="w-full" height="420" type="application/pdf">
                            {% else %}
                                <div class="flex h-40 items-center justify-center">
                                    <twig:ux:icon name="ph:file" class="size-12 text-gray-400 dark:text-gray-500" />
                                </div>
                            {% endif %}
                        </div>

                        <div class="mt-4">
                            <h3 class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ file.name }}</h3>
                            <p class="text-sm font-medium text-gray-500 dark:text-gray-400">{{ (file.size / 1000 / 1000)|format_number(2) }} MB</p>
                        </div>
                    </div>

                    {# ── metadata ── #}
                    <div>
                        <h3 class="font-medium text-gray-900 dark:text-gray-100">{{ 'attendanceFile.info'|trans }}</h3>
                        <dl class="mt-2 divide-y divide-gray-200 border-b border-t border-gray-200 dark:divide-gray-800 dark:border-gray-800">
                            <div class="flex justify-between py-3 text-sm font-medium">
                                <dt class="text-gray-500 dark:text-gray-400">{{ 'attendanceFile.uploadedAt'|trans }}</dt>
                                <dd class="whitespace-nowrap text-gray-900 dark:text-gray-200">{{ file.createdAt|format_datetime }}</dd>
                            </div>
                            <div class="flex justify-between py-3 text-sm font-medium">
                                <dt class="text-gray-500 dark:text-gray-400">{{ 'attendanceFile.type'|trans }}</dt>
                                <dd class="whitespace-nowrap text-gray-900 dark:text-gray-200">{{ file.mimeType }}</dd>
                            </div>
                        </dl>
                    </div>

                    {# ── actions ── #}
                    <div class="flex items-center gap-x-3">
                        <twig:Admin:Button href="{{ path('admin_attendance_file_download', routeParams) }}" variant="primary" class="flex-1" data-turbo="false">
                            {{ 'attendanceFile.download'|trans }}
                        </twig:Admin:Button>

                        {% if canEdit %}
                            <twig:Admin:Dropdown dropdownClass="w-56">
                                <twig:block name="toggle">
                                    <button class="flex items-center rounded-full text-gray-400 hover:text-gray-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600">
                                        <span class="sr-only">{{ 'attendanceFile.options'|trans }}</span>
                                        <twig:ux:icon name="ph:dots-three-vertical-bold" data-slot="icon" aria-hidden="true" class="size-5" />
                                    </button>
                                </twig:block>
                                <twig:block name="dropdown">
                                    <div class="py-1">
                                        <button type="button"
                                                data-action="live#action"
                                                data-live-action-param="delete"
                                                onclick="return confirm('{{ 'attendanceFile.deleteConfirm'|trans }}')"
                                                class="block w-full px-4 py-2 text-left text-sm text-red-600 focus:bg-gray-100 focus:outline-hidden dark:text-red-400 dark:focus:bg-gray-700">
                                            {{ 'attendanceFile.delete'|trans }}
                                        </button>
                                    </div>
                                </twig:block>
                            </twig:Admin:Dropdown>
                        {% endif %}
                    </div>
                {% else %}
                    <twig:Admin:Alert type="warning" :message="'attendanceFile.empty'|trans" />
                {% endif %}

                {# ── replace / add ── #}
                {% if canEdit %}
                    <div>
                        <h3 class="font-medium text-gray-900 dark:text-gray-100">{{ (file ? 'attendanceFile.replace' : 'attendanceFile.add')|trans }}</h3>
                        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{{ 'attendanceFile.replaceHint'|trans({ max: 10 }) }}</p>

                        <div class="group relative mt-3" {{ stimulus_controller('symfony/ux-dropzone/dropzone') }}
                             data-action="change->live#action" data-live-action-param="files|upload">
                            <input type="file" name="extraFile" accept="{{ accept }}"
                                   class="absolute inset-0 z-10 h-full w-full cursor-pointer opacity-0"
                                   data-symfony--ux-dropzone--dropzone-target="input">
                            <div class="rounded-lg border-2 border-dashed border-gray-300 py-8 text-center transition-colors group-hover:border-primary-500 dark:border-gray-600"
                                 data-symfony--ux-dropzone--dropzone-target="placeholder">
                                <p class="text-sm text-gray-500 dark:text-gray-400">{{ 'attendanceFile.dropzone'|trans }}</p>
                            </div>
                            <div class="hidden rounded-lg border-2 border-dashed border-gray-300 py-8 text-center transition-colors dark:border-gray-600"
                                 data-symfony--ux-dropzone--dropzone-target="preview">
                                <div data-symfony--ux-dropzone--dropzone-target="previewImage" class="hidden"></div>
                                <div data-symfony--ux-dropzone--dropzone-target="previewFilename" class="text-sm font-medium"></div>
                                <button type="button" data-symfony--ux-dropzone--dropzone-target="previewClearButton"
                                        class="mt-2 text-xs text-red-600 hover:text-red-800 dark:text-red-500 dark:hover:text-red-400">{{ 'attendanceFile.clear'|trans }}</button>
                            </div>
                        </div>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
