{% extends "@FerienpassAdmin/layout/base.html.twig" %}
{% trans_default_domain 'admin' %}

{% block main %}
  <div class="relative isolate overflow-hidden -mx-4 px-4 sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8">
    <twig:Admin:Edition:Header edition="{{ edition }}"/>
  </div>

  <div class="mt-8 space-y-16">
    {% for item in notifications|sort((a, b) => "notifications.#{a.type}.0"|trans <=> "notifications.#{b.type}.0"|trans) %}
      <div>
        <div class="px-4 sm:px-0 flex items-center justify-between">
          <div>
            <h3 class="text-base/7 font-semibold text-gray-900 dark:text-white">{{ "notifications.#{item.type}.0"|trans }}</h3>
            <p class="mt-1 max-w-2xl text-sm/6 text-gray-500 dark:text-gray-400">{{ "notifications.#{item.type}.1"|trans }}</p>
          </div>
          <div class="flex items-center gap-4">
            {% if item.is_overridden %}
              <span class="inline-flex items-center rounded-full bg-yellow-100 px-2 py-0.5 text-xs font-medium text-yellow-800 dark:bg-yellow-400/10 dark:text-yellow-500">
                Anpassung
              </span>
              <a href="{{ path('admin_notifications', { type: item.type, edition: edition.alias }) }}" class="text-sm font-semibold text-primary-600 hover:text-primary-500 dark:text-primary-400 dark:hover:text-primary-300">
                {{ 'editions.action.edit'|trans }} <span aria-hidden="true">&rarr;</span>
              </a>
            {% else %}
              <span class="inline-flex items-center rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800 dark:bg-green-400/10 dark:text-green-500">
                Standard
              </span>
              <a href="{{ path('admin_notifications', { type: item.type }) }}" class="text-sm font-semibold text-primary-600 hover:text-primary-500 dark:text-primary-400 dark:hover:text-primary-300">
                {{ 'editions.action.edit'|trans }} <span aria-hidden="true">&rarr;</span>
              </a>
              <a href="{{ path('admin_notifications_new', { type: item.type, edition: edition.alias }) }}" class="text-sm font-semibold text-primary-600 hover:text-primary-500 dark:text-primary-400 dark:hover:text-primary-300">
                {{ 'notifications.override'|trans }} <span aria-hidden="true">&rarr;</span>
              </a>
            {% endif %}
          </div>
        </div>
        <div class="mt-6 border-t border-gray-100 dark:border-white/10">
          <dl class="divide-y divide-gray-100 dark:divide-white/5">
            {% if item.emailSubject %}
              <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
                <dt class="text-sm/6 font-medium text-gray-900 dark:text-white">{{ 'notifications.emailSubject'|trans }}</dt>
                <dd class="mt-1 text-sm/6 text-gray-700 dark:text-gray-300 sm:col-span-2 sm:mt-0">{{ item.emailSubject }}</dd>
              </div>
            {% endif %}
            {% if item.emailText %}
              <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
                <dt class="text-sm/6 font-medium text-gray-900 dark:text-white">{{ 'notifications.emailText'|trans }}</dt>
                <dd class="mt-1 text-sm/6 text-gray-700 dark:text-gray-300 sm:col-span-2 sm:mt-0">{{ item.emailText|nl2br }}</dd>
              </div>
            {% endif %}
            {% if item.smsText %}
              <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
                <dt class="text-sm/6 font-medium text-gray-900 dark:text-white">{{ 'notifications.smsText'|trans }}</dt>
                <dd class="mt-1 text-sm/6 text-gray-700 dark:text-gray-300 sm:col-span-2 sm:mt-0">{{ item.smsText }}</dd>
              </div>
            {% endif %}
            {% if item.notification and item.notification.emailAttachment %}
              <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
                <dt class="text-sm/6 font-medium text-gray-900 dark:text-white">{{ 'notifications.attachment'|trans }}</dt>
                <dd class="mt-2 text-sm text-gray-900 dark:text-gray-100 sm:col-span-2 sm:mt-0">
                  <ul role="list" class="divide-y divide-gray-100 dark:divide-white/10 rounded-md border border-gray-200 dark:border-white/10">
                    <li class="flex items-center justify-between py-4 pr-5 pl-4 text-sm/6">
                      <div class="flex w-0 flex-1 items-center">
                        <twig:ux:icon name="ph:link" class="size-5 shrink-0 text-gray-400" aria-hidden="true" />
                        <div class="ml-4 flex min-w-0 flex-1 gap-2">
                          <span class="truncate font-medium">{{ item.notification.emailAttachment.path|split('/')|last }}</span>
                        </div>
                      </div>
                    </li>
                  </ul>
                </dd>
              </div>
            {% endif %}
          </dl>
        </div>
      </div>
    {% else %}
      <div class="px-4 py-4 sm:px-6 text-sm text-gray-500 dark:text-gray-400 text-center">
        Keine Benachrichtigungen gefunden.
      </div>
    {% endfor %}
  </div>
{% endblock %}
