{% trans_default_domain 'admin' %}

{% set avatar_bg = {admin: 'bg-purple-500', host: 'bg-blue-600', account: 'bg-green-700'} %}

<div {{ attributes.defaults({ class: 'inline-block' }) }}>
    <el-dropdown {{ stimulus_controller('ferienpass/admin-dropdown') }} class="inline-block">
        <button type="button" class="relative inline-flex items-center p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200" aria-label="Benachrichtigungen">
            <twig:ux:icon name="ph:bell" class="size-6" />
            {% if unread_count > 0 %}
                <span class="absolute top-1 right-1 block h-4 min-w-4 px-1 rounded-full bg-red-500 text-white text-[10px] font-bold flex items-center justify-center">{{ unread_count > 9 ? '9+' : unread_count }}</span>
            {% endif %}
        </button>

        <el-menu anchor="bottom end" popover class="w-96 max-w-[calc(100vw-2rem)] origin-top-right rounded-lg bg-white dark:bg-gray-950 shadow-lg outline-1 outline-black/5 dark:outline-white/10 transition transition-discrete [--anchor-gap:--spacing(2)] data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-100 data-enter:ease-out data-leave:duration-75 data-leave:ease-in">
            <div class="flex items-center gap-x-2 border-b border-gray-100 dark:border-white/5 px-4 py-3">
                <b class="text-sm font-semibold text-gray-900 dark:text-white">Benachrichtigungen</b>
                {% if unread_count > 0 %}<span class="inline-flex items-center rounded-full bg-primary-100 dark:bg-primary-500/15 px-2 py-0.5 text-xs font-medium text-primary-700 dark:text-primary-300">{{ unread_count }} neu</span>{% endif %}
                {% if unread_count > 0 %}
                    <button type="button" class="ml-auto text-xs text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100" data-action="live#action" data-live-action-param="markAllRead">Alle gelesen</button>
                {% endif %}
            </div>

            <div class="max-h-[26rem] overflow-y-auto divide-y divide-gray-100 dark:divide-white/5">
                {% for r in rows %}
                    <button type="button" class="flex w-full items-start gap-x-3 px-4 py-3 text-left hover:bg-gray-50 dark:hover:bg-white/5 {{ r.unread ? 'bg-primary-50/40 dark:bg-primary-500/5' : '' }}"
                            data-action="live#action" data-live-action-param="open" data-live-uuid-param="{{ r.uuid }}">
                        <span class="flex-none inline-flex items-center justify-center h-8 w-8 rounded-full {{ avatar_bg[r.role]|default('bg-gray-500') }}">
                            <span class="text-[11px] font-semibold leading-none text-white">{{ r.initials }}</span>
                        </span>
                        <span class="min-w-0 flex-1">
                            <span class="block text-sm text-gray-900 dark:text-gray-100"><b class="font-medium">{{ r.actor }}</b> <span class="text-gray-500 dark:text-gray-400">{{ r.verb }}</span></span>
                            <span class="mt-0.5 block truncate text-sm text-gray-600 dark:text-gray-300">„{{ r.quote }}"</span>
                            <span class="mt-1 flex items-center gap-x-1.5 text-xs text-gray-400">
                                <span class="truncate font-medium text-gray-500 dark:text-gray-400">{{ r.entity }}</span>
                                <span>·</span>
                                <span class="inline-flex items-center gap-x-0.5"><twig:ux:icon name="{{ r.via == 'email' ? 'ph:envelope-simple' : 'ph:chat-circle-dots' }}" class="size-3" />{{ r.via == 'email' ? 'E-Mail' : 'App' }}</span>
                                <span>·</span>
                                <time datetime="{{ r.createdAt|date('c') }}">{{ r.createdAt|ago }}</time>
                            </span>
                        </span>
                        {% if r.unread %}<span class="mt-1 size-2 flex-none rounded-full bg-primary-500"></span>{% endif %}
                    </button>
                {% else %}
                    <div class="flex flex-col items-center justify-center gap-y-2 px-4 py-10 text-center text-gray-400">
                        <twig:ux:icon name="ph:bell" class="size-7" />
                        <span class="text-sm">Keine Benachrichtigungen</span>
                    </div>
                {% endfor %}
            </div>
        </el-menu>
    </el-dropdown>
</div>
