{% extends "@FerienpassAdmin/layout/base.html.twig" %}
{% set title = 'Benachrichtigungen' %}

{% trans_default_domain 'admin' %}
{% set translationPrefix = app.request.get('_route')|split('_')[1] %}

{% block content %}

    <twig:Admin:PageHeader title="notifications.title" subtitle="Bearbeiten Sie die Nachrichten, die das System automatisch an Eltern, Veranstaltende und Teilnehmende verschickt." />

    {# Per-type icons picked from the Phosphor catalogue. #}
    {% set notificationIcons = {
        account_activated: 'ph:user-circle-check',
        account_created: 'ph:user-circle-plus',
        account_registration_help: 'ph:user-circle',
        user_invitation: 'ph:envelope-open',
        user_password: 'ph:key',
        host_created: 'ph:storefront',
        attendance_confirmed: 'ph:check-circle',
        attendance_newly_confirmed: 'ph:confetti',
        attendance_decisions: 'ph:dice-three',
        attendance_withdrawn: 'ph:x-circle',
        remind_attendance: 'ph:alarm',
        offer_cancelled: 'ph:calendar-x',
        offer_relaunched: 'ph:arrow-counter-clockwise',
        offer_finalized: 'ph:paper-plane-tilt',
        offer_completed: 'ph:flag-checkered',
        offer_complete: 'ph:clock-counter-clockwise',
        applications_closed: 'ph:list-checks',
        proofs: 'ph:check-square',
        payment_created: 'ph:receipt',
    } %}

    {# Group the notification types by category for the in-page master nav. #}
    {% set notificationGroups = {} %}
    {% for type in types %}
        {% if type starts with 'attendance_' or type starts with 'payment_' or type == 'remind_attendance' %}
            {% set groupName = 'Anmeldeverfahren' %}
        {% elseif type starts with 'account_' or type starts with 'user_' or type starts with 'host_' %}
            {% set groupName = 'Account & Registrierung' %}
        {% elseif type starts with 'offer_' or type in ['applications_closed', 'proofs'] %}
            {% set groupName = 'Workflow' %}
        {% else %}
            {% set groupName = 'Sonstiges' %}
        {% endif %}
        {% set notificationGroups = notificationGroups|merge({ (groupName): (notificationGroups[groupName]|default([]))|merge([type]) }) %}
    {% endfor %}

    <div class="lg:flex lg:gap-x-16">
        <twig:Admin:VerticalNav>
            <twig:block name="items">
                {% for groupName in ['Anmeldeverfahren', 'Account & Registrierung', 'Workflow', 'Sonstiges'] %}
                    {% if notificationGroups[groupName] is defined %}
                        <li class="px-2 pt-3 pb-1 first:pt-0 text-[11px] font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500">{{ groupName }}</li>
                        {% for type in notificationGroups[groupName]|sort((a, b) => "notifications.#{a}.0"|trans <=> "notifications.#{b}.0"|trans) %}
                            {% set active = app.request.get('type') == type %}
                            {% set notification = notifier.get(type, null) %}

                            <twig:Admin:VerticalNavItem
                                    :name="('notifications.' ~ type ~ '.0')|trans"
                                    :description="('notifications.' ~ type ~ '.1')|trans"
                                    href="{{ path('admin_notifications', { type }) }}"
                                    icon="{{ notificationIcons[type]|default('ph:envelope') }}"
                                    :active="active"
                            >
                                <twig:block name="name_suffix">
                                    <span class="ml-1 w-2.5 h-2.5 inline-block {{ notification ? (notification.getEdition() is not null ? 'bg-yellow-600' : 'bg-green-600') : 'bg-red-600' }} rounded-full"
                                          aria-hidden="true"></span>
                                </twig:block>
                            </twig:Admin:VerticalNavItem>
                        {% endfor %}
                    {% endif %}
                {% endfor %}
            </twig:block>
        </twig:Admin:VerticalNav>

        <div class="flex-1 xl:overflow-y-auto lg:pt-6 lg:pb-12">
            <div class="">

                {% if not app.request.get('type') %}

                    <div class="py-12 text-center">
                        <twig:ux:icon name="ph:folder-open" class="mx-auto h-12 w-12 text-gray-400" aria-hidden="true" />
                        <h3 class="mt-2 text-sm font-semibold text-gray-900 dark:text-gray-100">Benachrichtigung auswählen</h3>
                        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Wählen Sie links eine Benachrichtigung aus, die Sie
                            bearbeiten wollen.</p>

                    </div>

                {% endif %}

                {% if form is defined %}

                    {% set type = app.request.get('type') %}
                    {% set previewPath = path('admin_notifications', { type: type, edition: edition ? edition.alias : null }) %}
                    {% set editPath = edition
                        ? path('admin_notifications_edit_in_edition', { type: type, edition: edition.alias })
                        : path('admin_notifications_edit', { type: type }) %}

                    <div class="pb-6 border-b border-gray-200 dark:border-gray-800 mb-6">
                        <div class="flex flex-col @lg:flex-row @lg:items-center gap-3">
                            <h2 class="text-xl font-bold text-gray-900 dark:text-gray-50 truncate">{{ ('notifications.' ~ type ~ '.0')|trans }}</h2>
                            <div class="hidden @lg:block h-6 w-px bg-gray-300 dark:bg-gray-700"></div>
                            <nav class="flex space-x-4 overflow-x-auto py-1" aria-label="Ansicht">
                                <a href="{{ previewPath }}"
                                   class="text-sm font-medium whitespace-nowrap {{ view == 'preview' ? 'text-primary-600 dark:text-primary-400' : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300' }}"
                                   {% if view == 'preview' %}aria-current="page"{% endif %}>
                                    Vorschau
                                </a>
                                <a href="{{ editPath }}"
                                   class="text-sm font-medium whitespace-nowrap {{ view == 'edit' ? 'text-primary-600 dark:text-primary-400' : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300' }}"
                                   {% if view == 'edit' %}aria-current="page"{% endif %}>
                                    Bearbeiten
                                </a>
                            </nav>
                        </div>
                        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{{ ('notifications.' ~ type ~ '.1')|trans }}</p>
                    </div>

                    <div class="space-y-12 divide-y divide-gray-300">

                        <div>
                            {% if canEditEditions %}
                                <div>
                                    <nav class="-ml-3 flex space-x-4" aria-label="{{ 'editions.title'|trans }}">
                                        {% if editions is not empty %}
                                            {% set notification = notifier.get(type, null, true) %}
                                            {% set isStandard = edition is empty %}
                                            {% set standardPath = view == 'edit'
                                                ? path('admin_notifications_edit', { type })
                                                : path('admin_notifications', { type }) %}
                                            <a href="{{ standardPath }}"
                                               class="{{ isStandard ? 'bg-gray-100 dark:bg-gray-900 text-gray-700 dark:text-gray-100/80' : 'text-gray-500 dark:text-gray-100/50 hover:text-gray-700 dark:hover:text-gray-100/80' }} rounded-md px-3 py-2 whitespace-nowrap text-sm font-medium"
                                               {% if isStandard %}aria-current="page"{% endif %}>
                                                <span>Standard</span>
                                                <span class="ml-1 w-2.5 h-2.5 inline-block {{ notification ? 'bg-green-600 dark:bg-green-500/80' : 'bg-red-600 dark:bg-red-500/80' }} rounded-full"
                                                      aria-hidden="true"></span>
                                            </a>
                                        {% endif %}

                                        {% for editionItem in editions %}
                                            {% set notification = notifier.get(type, editionItem) %}
                                            {% set editionPath = view == 'edit'
                                                ? path('admin_notifications_edit_in_edition', { type, edition: editionItem.alias })
                                                : path('admin_notifications', { type, edition: editionItem.alias }) %}
                                            <a href="{{ editionPath }}"
                                               class="{{ editionItem.alias == app.request.get('edition') ? 'bg-gray-100 dark:bg-gray-900 text-gray-700 dark:text-gray-100/80' : 'text-gray-500 dark:text-gray-100/50 hover:text-gray-700 dark:hover:text-gray-100/80' }} rounded-md px-3 py-2 whitespace-nowrap text-sm font-medium"
                                               {% if editionItem.alias == app.request.get('edition') %}aria-current="page"{% endif %}>
                                                <span>{{ editionItem.name }}</span>
                                                <span class="ml-1 w-2.5 h-2.5 inline-block {{ (notification and notification.getEdition() is same as editionItem) ? 'bg-green-600 dark:bg-green-500/80' : 'bg-red-600 dark:bg-red-500/80' }} rounded-full"
                                                      aria-hidden="true"></span>
                                            </a>
                                        {% endfor %}
                                        {% if type and view == 'edit' %}
                                            <a href="{{ path('admin_notifications_new', { type }) }}"
                                               class="{{ (app.request.get('_route')|split('.')|first) == 'admin_notifications_new' ? 'bg-gray-100 dark:bg-gray-900 text-gray-700 dark:text-gray-100/80' : 'text-gray-500 dark:text-gray-100/50 hover:text-gray-700 dark:hover:text-gray-100/80' }} rounded-md px-3 py-2 whitespace-nowrap text-sm font-medium"
                                               {% if (app.request.get('_route')|split('.')|first) == 'admin_notifications_new' %}aria-current="page"{% endif %}>+
                                                Für eine Saison anpassen</a>
                                        {% endif %}
                                    </nav>
                                </div>
                            {% endif %}

                            {% if view == 'edit' %}
                                {% include '@FerienpassAdmin/layout/_edit.html.twig' %}
                            {% else %}
                                <div class="overflow-hidden rounded-lg bg-white shadow border border-white">
                                    <div id="preview" {{ stimulus_controller('ferienpass/admin-shadow-root') }}>
                                        <template shadowrootmode="open">
                                            {% include mockEmail.message.getHtmlTemplate() with mockEmail.message.getContext() %}
                                        </template>
                                    </div>
                                </div>
                            {% endif %}
                        </div>

                    </div>

                {% endif %}

            </div>
        </div>
    </div>



{% endblock %}

{% block success_stream %}
    <twig:Turbo:Stream:Prepend target="#notifications">
        <twig:Admin:Notification type="success" title="Daten gespeichert">
            Die Benachrichtigung wurde gespeichert.
        </twig:Admin:Notification>
    </twig:Turbo:Stream:Prepend>
{% endblock %}

{% block deleted_stream %}
    <twig:Turbo:Stream:Prepend target="#notifications">
        <twig:Admin:Notification type="success" title="Benachrichtigung gelöscht">
            Die Benachrichtigung für die Saison wurde gelöscht.
        </twig:Admin:Notification>
    </twig:Turbo:Stream:Prepend>
{% endblock %}
