{% trans_default_domain 'admin' %}

<div {{ attributes }} class="rounded border border-gray-200 dark:border-gray-800 overflow-hidden lg:flex">

    <section aria-labelledby="message-heading"
             class="flex h-full min-w-0 flex-1 flex-col overflow-hidden lg:order-last">

        <div class="flex-shrink-0 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900">

            <div class="h-16">
                <div class="px-4 sm:px-6 lg:px-8">
                    {% if message is not null %}
                        <div class="flex justify-between py-3">
                            <div>
                                <div class="isolate inline-flex rounded-md shadow-sm sm:space-x-3 sm:shadow-none">
                                    <span class="space-x-3 flex">
                                        <twig:Admin:Button class="relative -ml-px gap-x-1.5 hover:z-10 focus:z-10">
                                            <span class="-ml-0.5 h-5 w-5 text-gray-400 dark:text-gray-500">
                                                {{ ux_icon('ph:arrow-bend-up-right') }}
                                            </span>
                                            Erneut versenden
                                        </twig:Admin:Button>
                                    </span>
                                </div>
                            </div>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>

        {% if message is not null %}
            <div class="min-h-0 flex-1 overflow-y-auto bg-white dark:bg-gray-900">
                <div class="bg-white dark:bg-gray-900 pb-6 pt-5 shadow relative z-10">
                    <div class="px-4 sm:px-6 lg:px-8">

                        {% if message.logEntry is not null %}
                            <div class="-mt-2 mb-2 flex items-center gap-1.5">
                                <p class="text-primary-600 dark:text-primary-400 text-xs font-medium">
                                    {{ "outbox.message.#{message.logEntry.message}"|trans }}
                                </p>
                                <span class="w-4 h-4 text-gray-500 dark:text-gray-400">
                                    {{ ux_icon('ph:caret-right') }}
                                </span>
                                {% for user in message.logEntry.users %}
                                    <a href="{{ path('admin_accounts_show', {uuid: user.uuid.toBase58}) }}"
                                       data-turbo-frame="slideover"
                                       class="inline-flex items-center gap-x-1 rounded px-2 py-1 text-xs font-medium text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700">
                                        <span class="h-4 w-4">
                                            {{ ux_icon('ph:user') }}
                                        </span>
                                        {{ user.name }}
                                    </a>
                                {% endfor %}
                                {% for attendance in message.logEntry.attendances %}
                                    <a href="{{ path('admin_participants_show', { uuid: attendance.participant.uuid.toBase58 }) }}"
                                       data-turbo-frame="slideover"
                                       class="inline-flex items-center gap-x-1 rounded px-2 py-1 text-xs font-medium text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700">
                                        <span class="h-4 w-4">
                                            {{ ux_icon('ph:user') }}
                                        </span>
                                        {{ attendance.participant.name }}
                                    </a>
                                    <a href="{{ path('admin_offers_show', { uuid: attendance.offer.uuid.toBase58 }) }}"
                                       data-turbo-frame="slideover"
                                       class="inline-flex items-center gap-x-1 rounded px-2 py-1 text-xs font-medium text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700">
                                        <span class="h-4 w-4">
                                            <twig:ux:icon name="ph:calendar" class="h-4 w-4" />
                                        </span>
                                        {{ attendance.offer.name }}
                                    </a>
                                {% endfor %}
                                {% for offer in message.logEntry.offers %}
                                    <a href="{{ path('admin_offers_show', { uuid: offer.uuid.toBase58}) }}"
                                       data-turbo-frame="slideover"
                                       class="inline-flex items-center gap-x-1 rounded px-2 py-1 text-xs font-medium text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700">
                                        <twig:ux:icon name="ph:calendar" class="h-4 w-4" />
                                        {{ offer.name }}
                                    </a>
                                {% endfor %}
                            </div>
                        {% endif %}

                        {% if message.subject|default %}
                            <h1 id="message-heading"
                                class="text-lg font-medium text-gray-900 dark:text-gray-100">{{ message.subject }}</h1>
                        {% endif %}
                        {% if message.from|default %}
                            <p class="mt-1 truncate text-sm text-gray-500 dark:text-gray-400"><span
                                        class="text-gray-700 dark:text-gray-300 font-medium">Von:</span> {{ message.from }}</p>
                        {% endif %}
                        {% if message.to|default %}
                            <p class="mt-1 truncate text-sm text-gray-500 dark:text-gray-400"><span
                                        class="text-gray-700 dark:text-gray-300 font-medium">An:</span> {{ message.to }}</p>
                        {% endif %}
                        {% if message.replyTo|default %}
                            <p class="mt-1 truncate text-sm text-gray-500 dark:text-gray-400"><span class="text-gray-700 dark:text-gray-300 font-medium">Antwort
                                    an:</span> {{ message.replyTo }}</p>
                        {% endif %}
                        {% if message.engagements is not empty %}
                            <div class="mt-1 flex items-center space-x-2">
                                {% for engagement in message.engagements %}
                                    <twig:Admin:Badge :notification="engagement" size="sm" />
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>
                </div>

                {% if message.html|default %}
                    <div id="preview-{{ message.id }}" {{ stimulus_controller('ferienpass/admin-shadow-root') }}>
                        <template shadowrootmode="open">
                            {{ message.html|raw }}
                        </template>
                    </div>
                {% endif %}
            </div>
        {% else %}
            <div class="text-center py-12 bg-white dark:bg-gray-900">
                <twig:ux:icon name="ph:folder-open" class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-500" aria-hidden="true" />
                <h3 class="mt-2 text-sm font-semibold text-gray-900 dark:text-gray-100">Nachrichtenvorschau</h3>
                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Wählen Sie eine Nachricht zum Anzeigen aus.</p>
            </div>

        {% endif %}
    </section>

    <aside class="hidden lg:order-first lg:block lg:flex-shrink-0">
        <div class="relative flex h-full w-96 flex-col border-r border-gray-200 dark:border-gray-800 bg-gray-100 dark:bg-gray-900">
            <div class="flex-shrink-0">
                <div class="flex h-16 flex-col justify-center bg-white dark:bg-gray-900 px-6">
                    <div class="flex items-baseline space-x-3">
                        <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">{{ 'outbox.title'|trans }}</h2>
                        <p class="text-sm font-medium text-gray-500 dark:text-gray-400">{{ pagination.numResults }} Nachrichten</p>
                    </div>
                </div>
                <div class="border-b border-t border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-800 px-5 py-2 flex justify-between space-x-2">
                    <div class="flex-1">
                        <label for="search" class="sr-only">Nachrichten durchsuchen</label>
                        <div class="relative">
                            <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                                <span class="h-5 w-5 text-gray-400 dark:text-gray-500">
                                    {{ ux_icon('ph:magnifying-glass') }}
                                </span>
                            </div>
                            <input type="search"
                                   data-model="query"
                                   name="search"
                                   id="search"
                                   class="block w-full rounded-md border-0 py-1.5 pl-10 text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-700 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6"
                                   placeholder="Suchen…">
                        </div>
                    </div>
                    <twig:Admin:Dropdown class="flex items-center">
                        <twig:block name="toggle">
                            <button class="cursor-pointer inline-block h-5 w-5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300">
                                {{ source('@FerienpassCore/Icons/filter-solid.svg') }}
                            </button>
                        </twig:block>

                        <twig:block name="dropdown">

                            <div class="py-2">

                                {% if mailings is not empty %}

                                    <h3 class="px-4 py-1 text-gray-600 dark:text-gray-400 text-xs tracking-wide uppercase font-bold">
                                        Rundmails</h3>

                                    {% for mailing in mailings %}
                                        <button type="button"
                                                data-action="live#action"
                                                data-live-action-param="selectGroup"
                                                data-live-message-param="{{ mailing.logEntry.group.id }}"
                                                class="text-left w-full group px-4 py-2 text-sm leading-4 {{ mailing.logEntry.group is same as group ? 'text-primary-600 dark:text-primary-400' : 'text-gray-700 dark:text-gray-300' }} hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-gray-100 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-800 focus:text-gray-900 dark:focus:text-gray-100"
                                        >
                                            <span>
                                                {{ mailing.subject }}
                                            </span>
                                            <span class="text-gray-500">{{ mailing.createdAt|ago }}</span>
                                        </button>
                                    {% endfor %}
                                {% endif %}
                            </div>

                        </twig:block>
                    </twig:Admin:Dropdown>
                </div>
            </div>

            {% if group is not null %}
                <div class="border-b border-gray-200 dark:border-gray-800 px-5 py-2 flex justify-between space-x-2 bg-white dark:bg-gray-900">
                    <a href="{{ path('admin_tools_dispatch', { uuid: group.uuid.toBase58 }) }}"
                       class="font-semibold text-sm text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300"
                    >
                        Zur Versandnachverfolgung dieser Rundmail &rarr;
                    </a>
                </div>
            {% endif %}

            <nav aria-label="Message list" class="min-h-0 flex-1 overflow-y-auto bg-white dark:bg-gray-900">
                <ul role="list" class="divide-y divide-gray-200 dark:divide-gray-800 border-b border-gray-200 dark:border-gray-800">
                    {% for item in pagination.results %}
                        <li id="{{ "msg_#{item.id}" }}"
                            class="relative px-6 py-5 {{ item.id == message.id|default ? 'bg-gray-50 dark:bg-gray-800' : 'bg-white dark:bg-gray-900' }} focus-within:ring-2 focus-within:ring-inset focus-within:ring-blue-600 hover:bg-gray-50 dark:hover:bg-gray-800">
                            <div class="flex justify-between space-x-3">
                                <div class="min-w-0 flex-1">
                                    <a class="block focus:outline-none"
                                       data-action="live#emit:prevent"
                                       data-live-event-param="open"
                                       data-live-message-param="{{ item.id }}">
                                        <span class="absolute inset-0" aria-hidden="true"></span>
                                        <p class="truncate text-sm font-medium text-gray-900 dark:text-gray-100 flex items-center gap-1">

                                            {% if item.isEmail %}
                                            <span class="w-4 h-4 text-gray-500 dark:text-gray-400">{{ ux_icon('ph:envelope') }}</span
                                            {% elseif item.isSms %}
                                            <span class="w-4 h-4 text-gray-500 dark:text-gray-400">{{ ux_icon('ph:device-mobile') }}</span
                                                    {% endif %}>
                                            <span class="min-w-0">{{ item.to }}</span>
                                        </p>
                                        {% if item.subject is defined %}
                                            <p class="truncate text-sm text-gray-500 dark:text-gray-400">{{ item.subject }}</p>
                                        {% endif %}
                                    </a>
                                </div>
                                <time datetime="{{ item.createdAt|date('c') }}"
                                      class="flex-shrink-0 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">{{ item.createdAt|ago }}
                                </time>
                            </div>
                            <div class="mt-1">
                                <p class="line-clamp-2 text-sm text-gray-600 dark:text-gray-400">{{ item.text|slice(0, 100) }}</p>
                            </div>
                        </li>
                    {% endfor %}
                </ul>

                {% if pagination.hasNextPage %}
                    <div class="flex justify-center py-2">
                        <button type="button"
                                data-action="live#emit"
                                data-live-event-param="loadMore"
                                class="relative items-center gap-x-1.5 rounded px-2 py-1 text-sm font-semibold text-gray-900 dark:text-gray-100 hover:bg-gray-200/50 dark:hover:bg-gray-700/50 inline-flex">
                            <span class="-ml-0.5 h-5 w-5 text-gray-500 dark:text-gray-400">
                                {{ ux_icon('ph:plus') }}
                            </span>
                            Mehr laden
                        </button>
                    </div>
                {% endif %}

            </nav>
        </div>
    </aside>

</div>
