{% trans_default_domain 'admin' %}
{% import "@ContaoCore/Image/Studio/_macros.html.twig" as studio %}

<div {{ attributes }}>
    {% if item is not null %}
        <div class="space-y-6 pb-16">
            <div>
                <div class="aspect-h-7 aspect-w-10 group relative block w-full overflow-hidden rounded-lg bg-gray-100 dark:bg-gray-800">

                    {% if item.mimeType starts with 'image/' %}
                        {% if mediaModel is not null %}
                        {% set importantPart = mediaModel.importantPart|default(null) %}
                        <div class="absolute inset-0 z-10 group-hover:bg-gray-900/40 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none">
                            {% if importantPart and (importantPart.width > 0 or importantPart.height > 0) %}
                                <div class="absolute border-2 border-white shadow-[0_0_0_9999px_rgba(0,0,0,0.4)]"
                                     style="left: {{ importantPart.x * 100 }}%; top: {{ importantPart.y * 100 }}%; width: {{ importantPart.width * 100 }}%; height: {{ importantPart.height * 100 }}%;">
                                </div>
                            {% endif %}
                        </div>
                            {% endif %}

                        {% set figure = figure(item, picture_config({
                            width: 600,
                            height: 800,
                            resizeMode: 'box',
                            densities: '1,2',
                        }), {options: { attr: { class: 'object-cover' }}}) %}

                        {{- studio.figure(figure) -}}
                    {% elseif item.mimeType == 'application/pdf' %}
                        <embed src="{{ item.storage.generatePublicUri(item.path) }}"
                               class="w-full"
                               height="375"
                               type="application/pdf">
                    {% else %}
                        <div class="flex h-full 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 flex items-start justify-between">
                    <div>
                        <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100"><span class="sr-only">Details
                                for </span>{{ item.name }}
                        </h2>
                        <p class="text-sm font-medium text-gray-500 dark:text-gray-400">{{ (item.fileSize / 1000 / 1000)|format_number }}
                            MB</p>
                    </div>
                    <button type="button"
                            class="relative ml-4 flex h-8 w-8 items-center justify-center rounded-full bg-white dark:bg-gray-800 text-gray-400 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-500 dark:hover:text-gray-400 focus:outline-none focus:ring-2 focus:ring-primary-500">
                        <span class="absolute -inset-1.5"></span>
                        <twig:ux:icon name="ph:heart" class="h-6 w-6" aria-hidden="true" />
                        <span class="sr-only">Favorite</span>
                    </button>
                </div>
            </div>
            <div>
                <h3 class="font-medium text-gray-900 dark:text-gray-100">Informationen</h3>
                <dl class="mt-2 divide-y divide-gray-200 dark:divide-gray-800 border-b border-t border-gray-200 dark:border-gray-800">
                    <div class="flex justify-between py-3 text-sm font-medium">
                        <dt class="text-gray-500 dark:text-gray-400">Hochgeladen von</dt>
                        <dd class="whitespace-nowrap text-gray-900 dark:text-gray-200">
                            {{ item.extraMetadata.model.uploadedBy.username|default(item.extraMetadata.model.uploadedBy|default('–')) }}
                        </dd>
                    </div>
                    <div class="flex justify-between py-3 text-sm font-medium">
                        <dt class="text-gray-500 dark:text-gray-400">Erstellt</dt>
                        <dd class="whitespace-nowrap text-gray-900 dark:text-gray-200">{{ item.extraMetadata.model.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">Geändert</dt>
                        <dd class="whitespace-nowrap text-gray-900 dark:text-gray-200">{{ item.extraMetadata.model.lastModified|format_datetime }}</dd>
                    </div>
                    {% if figure is defined %}
                        <div class="flex justify-between py-3 text-sm font-medium">
                            <dt class="text-gray-500 dark:text-gray-400">Abmessungen</dt>
                            <dd class="whitespace-nowrap text-gray-900 dark:text-gray-200">
                                {{ figure.image.originalDimensions.size.width }}
                                x {{ figure.image.originalDimensions.size.height }}
                            </dd>
                        </div>
                    {% endif %}
                </dl>
            </div>
            {% if mediaModel is not null %}
                <div>
                    <h3 class="font-medium text-gray-900 dark:text-gray-100">Alternativer Text</h3>
                    {% if isEditing == 'alt' %}
                        {% set error = this.getError('mediaModel.alt') %}
                        <form class="mt-2 flex items-center space-x-3">
                            <div class="flex-1">
                                <input type="text" data-model="mediaModel.alt"
                                       class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 {{ error ? 'border-red-500 ring-red-500' }}"
                                       autofocus>
                                {% if error %}
                                    <p class="mt-1 text-xs text-red-600">{{ error.message }}</p>
                                {% endif %}
                            </div>
                            <twig:Admin:Button variant="primary" size="sm" data-action="live#action:prevent" data-live-action-param="save">Speichern</twig:Admin:Button>
                        </form>
                    {% else %}
                        <div class="mt-2 flex items-center justify-between">
                            <p class="text-sm {% if not mediaModel.alt %}italic{% endif %} text-gray-500 dark:text-gray-400">
                                {{ mediaModel.alt|default('Kein Alternativer Text hinterlegt.') }}
                            </p>
                            <button type="button"
                                    data-action="live#action"
                                    data-live-action-param="activateEditing"
                                    data-live-field-param="alt"
                                    class="relative flex h-8 w-8 items-center justify-center rounded-full bg-white dark:bg-gray-800 text-gray-400 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-500 dark:hover:text-gray-400 focus:outline-none focus:ring-2 focus:ring-primary-500">
                                <span class="absolute -inset-1.5"></span>
                                <twig:ux:icon name="ph:pencil" class="h-5 w-5" aria-hidden="true" />
                                <span class="sr-only">Alternativen Text bearbeiten</span>
                            </button>
                        </div>
                    {% endif %}
                </div>
                <div>
                    <h3 class="font-medium text-gray-900 dark:text-gray-100">Urheber (Bildnachweis)</h3>
                    {% if isEditing == 'creator' %}
                        {% set error = this.getError('mediaModel.creator') %}
                        <form class="mt-2 flex items-center space-x-3">
                            <div class="flex-1">
                                <input type="text" data-model="mediaModel.creator"
                                       class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 {{ error ? 'border-red-500 ring-red-500' }}"
                                       autofocus>
                                {% if error %}
                                    <p class="mt-1 text-xs text-red-600">{{ error.message }}</p>
                                {% endif %}
                            </div>
                            <twig:Admin:Button variant="primary" size="sm" data-action="live#action:prevent" data-live-action-param="save">Speichern</twig:Admin:Button>
                        </form>
                    {% else %}
                        <div class="mt-2 flex items-center justify-between">
                            <p class="text-sm {% if not mediaModel.creator %}italic{% endif %} text-gray-500 dark:text-gray-400">
                                {{ mediaModel.creator|default('Kein Urheber hinterlegt.') }}
                            </p>
                            <button type="button"
                                    data-action="live#action"
                                    data-live-action-param="activateEditing"
                                    data-live-field-param="creator"
                                    class="relative flex h-8 w-8 items-center justify-center rounded-full bg-white dark:bg-gray-800 text-gray-400 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-500 dark:hover:text-gray-400 focus:outline-none focus:ring-2 focus:ring-primary-500">
                                <span class="absolute -inset-1.5"></span>
                                <twig:ux:icon name="ph:pencil" class="h-5 w-5" aria-hidden="true" />
                                <span class="sr-only">Urheber bearbeiten</span>
                            </button>
                        </div>
                    {% endif %}
                </div>
            {% endif %}

            {% if attachmentModel is not null %}
                <div>
                    <h3 class="font-medium text-gray-900 dark:text-gray-100">Titel</h3>
                    {% if isEditing == 'title' %}
                        {% set error = this.getError('attachmentModel.title') %}
                        <form class="mt-2 flex items-center space-x-3">
                            <div class="flex-1">
                                <input type="text" data-model="attachmentModel.title"
                                       class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 {{ error ? 'border-red-500 ring-red-500' }}"
                                       autofocus>
                                {% if error %}
                                    <p class="mt-1 text-xs text-red-600">{{ error.message }}</p>
                                {% endif %}
                            </div>
                            <twig:Admin:Button variant="primary" size="sm" data-action="live#action:prevent" data-live-action-param="save">Speichern</twig:Admin:Button>
                        </form>
                    {% else %}
                        <div class="mt-2 flex items-center justify-between">
                            <p class="text-sm {% if not attachmentModel.title %}italic{% endif %} text-gray-500 dark:text-gray-400">
                                {{ attachmentModel.title|default('Kein Titel hinterlegt.') }}
                            </p>
                            <button type="button"
                                    data-action="live#action"
                                    data-live-action-param="activateEditing"
                                    data-live-field-param="title"
                                    class="relative flex h-8 w-8 items-center justify-center rounded-full bg-white dark:bg-gray-800 text-gray-400 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-500 dark:hover:text-gray-400 focus:outline-none focus:ring-2 focus:ring-primary-500">
                                <span class="absolute -inset-1.5"></span>
                                <twig:ux:icon name="ph:pencil" class="h-5 w-5" aria-hidden="true" />
                                <span class="sr-only">Titel bearbeiten</span>
                            </button>
                        </div>
                    {% endif %}
                </div>
            {% endif %}

            {% if item.extraMetadata.model.offers is defined %}
                <div>
                    <div class="flex items-center justify-between">
                        <h3 class="font-medium text-gray-900 dark:text-gray-100">Eingebunden</h3>
                        <button type="button"
                                data-action="live#action"
                                data-live-action-param="toggleAddToOffer"
                                class="relative flex h-8 w-8 items-center justify-center rounded-full bg-white dark:bg-gray-800 text-gray-400 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-500 dark:hover:text-gray-400 focus:outline-none focus:ring-2 focus:ring-primary-500">
                            <span class="absolute -inset-1.5"></span>
                            <twig:ux:icon name="ph:plus" class="h-5 w-5" aria-hidden="true" />
                            <span class="sr-only">Zu Angebot hinzufügen</span>
                        </button>
                    </div>
                    {% set _offers = item.extraMetadata.model.offers %}
                    {% if not is_granted('ROLE_ADMIN') %}
                        {% set _offers = _offers|filter(v => v.offer.hosts|filter(h => h in app.user.hosts)|length > 0) %}
                    {% endif %}
                    <ul role="list" class="mt-2 divide-y divide-gray-200 dark:divide-gray-800 border-b border-t border-gray-200 dark:border-gray-800">
                        {% for model in _offers %}
                            <li class="group relative flex items-center justify-between py-3">
                                <div class="flex items-center">
                                    <div class="h-8 w-8 rounded bg-gray-300 dark:bg-gray-700 text-white font-medium text-[.6rem] flex items-center justify-center">
                                        <p>#<span class="font-normal">{{ model.offer.id }}</span></p>
                                    </div>
                                    <p class="flex-1 ml-4 text-sm font-medium text-gray-900 dark:text-gray-200 leading-none">
                                        <span class="block">
                                            {{ model.offer.name }}
                                        </span>
                                        {% if not model.offer.dates.empty %}
                                            {% set startDate = model.offer.dates|first.begin %}
                                            <span class="block text-xs text-gray-600 dark:text-gray-400 font-normal">
                                                {% if startDate %}
                                                    {{ startDate|format_datetime }}
                                                {% else %}
                                                    <span class="inline-flex items-center text-orange-600">
                                                        {{ ux_icon('ph:warning', {class: 'mr-1 size-3.5'}) }}
                                                        <span>Termin fehlt</span>
                                                    </span>
                                                {% endif %}
                                            </span>
                                        {% endif %}
                                    </p>
                                </div>
                                <span
                                        class="group-hover:underline inline-block ml-6 rounded-md text-sm font-medium text-primary-600 dark:text-primary-400 hover:text-primary-500 dark:hover:text-primary-300 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2">
                                    Öffnen</span>
                                <a href="{{ path('admin_offers_show', { edition: model.offer.edition.alias, uuid: model.offer.uuid.toBase58 }) }}"
                                   data-turbo-frame="slideover"
                                   class="absolute left-0 top-0 w-full h-full indent-[-99999px]">Öffnen</a>
                            </li>
                        {% else %}
                            <li>
                                <twig:Admin:Alert type="warning"
                                                  message="Diese Datei wird von keinem Angebot verwendet."/>
                            </li>
                        {% endfor %}
                    </ul>
                </div>

                {% if addToOffer %}
                    <div>
                        <h3 class="font-medium text-gray-900 dark:text-gray-100">Zu Angebot hinzufügen</h3>
                        <div class="mt-2">
                            <input type="text" data-model="offerSearch" placeholder="Angebot suchen..."
                                   class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100"
                                   autofocus>
                            {% if offerSearch|length >= 2 %}
                                <ul class="mt-2 border border-gray-200 dark:border-gray-700 rounded-md divide-y divide-gray-200 dark:divide-gray-800 overflow-hidden">
                                    {% for offer in this.offers %}
                                        <li class="p-2 flex justify-between items-center bg-white dark:bg-gray-800">
                                            <span class="text-sm text-gray-900 dark:text-gray-100">{{ offer.name }} (#{{ offer.id }})</span>
                                            <button type="button"
                                                    data-action="live#action"
                                                    data-live-action-param="assignToOffer"
                                                    data-live-id-param="{{ offer.id }}"
                                                    class="text-xs font-semibold text-primary-600 hover:text-primary-500">Hinzufügen</button>
                                        </li>
                                    {% else %}
                                        <li class="p-2 text-sm text-gray-500 italic">Keine Angebote gefunden</li>
                                    {% endfor %}
                                </ul>
                            {% endif %}
                        </div>
                    </div>
                {% endif %}
            {% endif %}

            {% if item.extraMetadata.model.hosts is defined %}
                <div>
                    <h3 class="font-medium text-gray-900 dark:text-gray-100">Gehört zu</h3>
                    <ul role="list" class="mt-2 divide-y divide-gray-200 dark:divide-gray-800 border-b border-t border-gray-200 dark:border-gray-800">
                        {% for host in item.extraMetadata.model.hosts %}
                            <li class="group relative flex items-center justify-between py-3">
                                <div class="flex items-center">
                                    <div class="h-8 w-8 rounded bg-gray-300 dark:bg-gray-700 text-white font-medium text-[.6rem] flex items-center justify-center">
                                        <p>#<span class="font-normal">{{ host.id }}</span></p>
                                    </div>
                                    <p class="flex-1 ml-4 text-sm font-medium text-gray-900 dark:text-gray-200 leading-none">
                                        {{ host.name }}
                                    </p>
                                </div>
                                <span
                                        class="group-hover:underline inline-block ml-6 rounded-md text-sm font-medium text-primary-600 dark:text-primary-400 hover:text-primary-500 dark:hover:text-primary-300 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2">
                                    Öffnen</span>
                                <a href="{{ path('admin_hosts_edit', { uuid: host.uuid.toBase58 }) }}"
                                   class="absolute left-0 top-0 w-full h-full indent-[-99999px]">Öffnen</a>
                            </li>
                        {% else %}
                            <li>
                                <twig:Admin:Alert type="warning"
                                                  message="Diese Datei wird von keinem Veranstalter verwendet."/>
                            </li>
                        {% endfor %}
                    </ul>
                </div>
            {% endif %}

            <div class="flex gap-x-3 items-center">
                {% if offerUuid %}
                    <twig:Admin:Button variant="primary" class="flex-1" data-action="live#action" data-live-action-param="assignToCurrentOffer">Zum Angebot hinzufügen</twig:Admin:Button>
                {% else %}
                    <twig:Admin:Button href="{{ item.storage.generatePublicUri(item.path) }}" variant="primary" class="flex-1" target="_blank">Download</twig:Admin:Button>

                    {% if is_granted('ROLE_ADMIN') %}
                        <twig:Admin:Dropdown dropdownClass="w-42">
                            <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-indigo-600">
                                    <span class="sr-only">Optionen öffnen</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('Möchten Sie diese Datei wirklich endgültig löschen?')"
                                            class="block w-full px-4 py-2 text-left text-sm text-red-600 dark:text-red-400 focus:bg-gray-100 dark:focus:bg-gray-700 focus:outline-hidden">
                                        Löschen
                                    </button>
                                </div>
                            </twig:block>
                        </twig:Admin:Dropdown>
                    {% endif %}
                {% endif %}
            </div>
        </div>
    {% endif %}
</div>
