<div
    x-data
    x-cloak
    x-show="$store.notifications.start"
    x-translation:enter="dropdown-enter"
    x-transition:leave="dropdown-leave"
    class="notifications"
    @click.outside="$store.notifications.close()"
    @keydown.escape.window="$store.notifications.close()"
>
    <div class="notifications-header">
        <span class="notifications-header-title">Notifications</span>
        <div class="notifications-header-actions">
            <button type="button" class="btn" x-show="$store.notifications.unread > 0" @click="$store.notifications.markAllRead()" title="Mark all as read">
                <i data-lucide="check-circle" size="14"></i>
            </button>
            <a href="{{ xfRoute('account/alerts') }}" class="btn">
                <i data-lucide="external-link" size="14"></i>
            </a>
        </div>
    </div>

    <template x-if="$store.notifications.loading">
        <div class="notifications-loading">
            <i data-lucide="loader-2" class="spin"></i>
        </div>
    </template>

    <template x-if="$store.notifications.error">
        <div class="notifications-empty">
            <i data-lucide="alert-circle" size="24"></i>
            <span>Failed to load notifications.</span>
        </div>
    </template>

    <template x-if="$store.notifications.data && !$store.notifications.loading">
        <div>

            <template x-if="$store.notifications.data.length === 0">
                <div class="notifications-empty">
                    <i data-lucide="bell-off" size="24"></i>
                    <span>No new notifications.</span>
                </div>
            </template>

            <template x-for="notif in $store.notifications.data" :key="notif.alert_id">
                <a :href="notif.alert_url" class="notifications-item" :class="{ 'unread': notif.view_date === 0 }">
                    <div class="notifications-avatar">
                        <template x-if="notif.User?.avatar_urls?.s">
                            <img :src="notif.User.avatar_urls.s" :alt="notif.username">
                        </template>
                        <template x-if="!notif.User?.avatar_urls?.s">
                            <span x-text="notif.username?.charAt(0).toUpperCase()"></span>
                        </template>
                    </div>

                    <div class="notifications-content">
                        <span class="notifications-text" x-text="notif.alert_text"></span>
                        <span class="notifications-date" x-text="new Date(notif.event_date * 1000).toLocaleDateString()"></span>
                    </div>

                    <div class="notifications-unread-dot" x-show="notif.view_date === 0"></div>
                </a>
            </template>

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