<div {{ attributes.defaults(stimulus_controller('ferienpass/admin-notification', {
    'dismiss-after': dismissAfter ?? null,
})) }} class="pointer-events-auto w-full max-w-sm translate-y-0 transform rounded-lg bg-white dark:bg-gray-900 opacity-100 shadow-lg outline-1 outline-black/5 dark:outline-white/10 dark:-outline-offset-1 transition duration-300 ease-out sm:translate-x-0 starting:translate-y-2 starting:opacity-0 starting:sm:translate-x-2 starting:sm:translate-y-0"
       data-turbo-temporary>
    <div class="p-4">
        <div class="flex items-start">
            {% if type == 'success' %}
                <div class="shrink-0">
                    <twig:ux:icon name="ph:check-circle" data-slot="icon" aria-hidden="true" class="size-6 text-green-400" />
                </div>
            {% elseif type == 'error' %}
                <div class="shrink-0">
                    <twig:ux:icon name="ph:x-circle" data-slot="icon" aria-hidden="true" class="size-6 text-red-400" />
                </div>
            {% elseif type == 'archived' %}
                <div class="shrink-0">
                    <twig:ux:icon name="ph:archive-box" data-slot="icon" aria-hidden="true" class="size-6 text-gray-400" />
                </div>
            {% elseif type == 'deleted' %}
                <div class="shrink-0">
                    <twig:ux:icon name="ph:trash" data-slot="icon" aria-hidden="true" class="size-6 text-red-400" />
                </div>
            {% elseif type == 'mail_sent' %}
                <div class="shrink-0">
                    <twig:ux:icon name="ph:paper-plane-tilt" data-slot="icon" aria-hidden="true" class="size-6 text-blue-400" />
                </div>
            {% endif %}
            <div class="{% if type in ['success', 'error', 'archived', 'deleted', 'mail_sent'] %}ml-3 {% endif %}w-0 flex-1 pt-0.5">
                <div class="flex flex-1 justify-between">
                    <p class="w-0 flex-1 text-sm font-medium text-gray-900 dark:text-white">{{ title ?? message }}</p>
                    {% if actionLink %}
                        <a href="{{ actionLink }}"
                           class="ml-3 shrink-0 rounded-md bg-white dark:bg-gray-900 text-sm font-medium text-primary-600 dark:text-primary-400 hover:text-primary-500 dark:hover:text-primary-300 focus:outline-2 focus:outline-offset-2 focus:outline-primary-500">{{ actionTitle }}</a>
                    {% endif %}
                </div>
                <div class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                    {% block content %}<p>{{ message }}</p>{% endblock %}
                </div>
                {% if primaryActionLink or secondaryActionLink %}
                    <div class="mt-3 flex space-x-7">
                        {% if primaryActionLink %}
                            <a href="{{ primaryActionLink }}"
                               class="rounded-md text-sm font-medium text-primary-600 dark:text-primary-400 hover:text-primary-500 dark:hover:text-primary-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                                {{ primaryActionTitle }}
                            </a>
                        {% endif %}
                        {% if secondaryActionLink %}
                            <a href="{{ secondaryActionLink }}"
                               class="rounded-md text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-gray-500 dark:hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                                {{ secondaryActionTitle }}
                            </a>
                        {% elseif primaryActionLink %}
                            <button type="button" data-action="ferienpass--admin-notification#dismiss"
                                    class="rounded-md text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-gray-500 dark:hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                                {{ 'notifications.dismiss'|trans({}, 'admin') }}
                            </button>
                        {% endif %}
                    </div>
                {% endif %}
            </div>
            <div class="ml-4 flex shrink-0">
                <button data-action="ferienpass--admin-notification#dismiss" type="button"
                        class="cursor-pointer inline-flex rounded-md text-gray-400 hover:text-gray-500 dark:hover:text-white focus:outline-2 focus:outline-offset-2 focus:outline-primary-600 dark:focus:outline-primary-500">
                    <span class="sr-only">Close</span>
                    <twig:ux:icon name="ph:x" data-slot="icon" aria-hidden="true" class="size-5" />
                </button>
            </div>
        </div>
    </div>
</div>