{% block content %}
    {% set tone = {
        success: 'border-emerald-200 bg-emerald-50 text-emerald-700',
        warning: 'border-amber-200 bg-amber-50 text-amber-700',
        error: 'border-red-200 bg-red-50 text-red-700',
        danger: 'border-red-200 bg-red-50 text-red-700',
        info: 'border-sky-200 bg-sky-50 text-sky-700'
    }[level|default('info')] ?? 'border-primary/12 bg-white text-primary' %}

    <div
        {{ attributes.defaults({
            class: 'animate-toast flex w-full items-start gap-3 border border-primary/10 bg-[#faf5f0] p-4 text-primary shadow-[0_24px_50px_rgba(51,38,28,0.16)]'
        }) }}
        role="alert"
        x-data="heritageNotification"
        data-controller="alert"
        data-turbo-cache="false"
        data-alert-dismiss-after-value="5000">
        <div
            {{ attributes.nested('wrapper').defaults({
                class: 'flex h-11 w-11 shrink-0 items-center justify-center border ' ~ tone
            }) }}>
            {% if level in ['success'] %}
                <svg class="h-5 w-5" viewBox="0 0 20 20" fill="none" aria-hidden="true">
                    <path d="m4 10 4 4 8-8" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            {% elseif level in ['warning'] %}
                <svg class="h-5 w-5" viewBox="0 0 20 20" fill="none" aria-hidden="true">
                    <path d="M10 6.25v4.5m0 3h.01M8.574 3.598 2.73 13.75A1.5 1.5 0 0 0 4.03 16h11.94a1.5 1.5 0 0 0 1.3-2.25L11.426 3.598a1.5 1.5 0 0 0-2.852 0Z" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            {% elseif level in ['error', 'danger'] %}
                <svg class="h-5 w-5" viewBox="0 0 20 20" fill="none" aria-hidden="true">
                    <path d="M6 6l8 8m0-8-8 8" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
                    <circle cx="10" cy="10" r="7.25" stroke="currentColor" stroke-width="1.5"/>
                </svg>
            {% else %}
                <svg class="h-5 w-5" viewBox="0 0 20 20" fill="none" aria-hidden="true">
                    <path d="M10 6.5h.01M9.25 9.25h1.5v4h-1.5z" fill="currentColor"/>
                    <circle cx="10" cy="10" r="7.25" stroke="currentColor" stroke-width="1.5"/>
                </svg>
            {% endif %}
        </div>

        <div class="min-w-0 flex-1">
            <div {{ attributes.nested('message').defaults({ class: 'text-[14px] leading-6 text-primary/82' }) }}>
                {{ message|raw }}
            </div>
        </div>

        <button
            type="button"
            {{ attributes.nested('close').defaults({
                class: '-m-1 inline-flex h-9 w-9 shrink-0 cursor-pointer items-center justify-center border border-primary/10 bg-white/70 text-primary/55 transition hover:text-primary'
            }) }}
            data-action="alert#close"
            @click="close"
            aria-label="{{ 'theme.notification.close'|trans }}">
            <span class="sr-only">{{ 'theme.notification.close'|trans }}</span>
            <svg class="h-4 w-4" fill="none" viewBox="0 0 16 16" aria-hidden="true">
                <path d="M4 4l8 8m0-8-8 8" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/>
            </svg>
        </button>
    </div>
{% endblock %}
