{% load notification_tags %}

<div
    @notify.window="add($event)"
    x-data="{
        notifications: [],
        init() {
            this.notifications = {% django_messages_to_json messages %}
        },
        add(e) {
            this.notifications.push({
                'id': e.timeStamp,
                'type': e.detail.type,
                'message': e.detail.message
            });
            setTimeout(() => this.remove(e.timeStamp), 5000); // Auto-remove after 5 seconds
        },
        remove(id) {
            this.notifications = this.notifications.filter(i => i.id !== id);
        }
    }"
>
    <div class="position-fixed top-0 end-0 m-3" style="z-index: 1050;">
        <template x-for="notification in notifications" :key="notification.id">
            <div
                class="mb-3 p-3 rounded border bg-dark text-white shadow"
                :class="{
                    'border-success': notification.type === 'success',
                    'border-app-warning': notification.type === 'warning',
                    'border-app-danger': notification.type === 'error',
                    'border-app-primary': notification.type === 'info'
                }"
                style="max-width: 400px; pointer-events: auto;"
            >
                <div class="d-flex justify-content-between align-items-center">
                    <div x-text="notification.message"></div>
                    <button @click="remove(notification.id)" class="btn-close btn-close-white ms-3"></button>
                </div>
            </div>
        </template>
    </div>

    <div>
        <button @click="$dispatch('notify', { message: 'This is a success message!', type: 'success' })" class="btn btn-app-success">Show Success</button>
        <button @click="$dispatch('notify', { message: 'This is a warning message!', type: 'warning' })" class="btn btn-app-warning">Show Warning</button>
        <button @click="$dispatch('notify', { message: 'This is an error message!', type: 'error' })" class="btn btn-app-danger">Show Error</button>
        <button @click="$dispatch('notify', { message: 'This is an info message!', type: 'info' })" class="btn btn-app-primary">Show Info</button>
    </div>
</div>
