<div{{ attributes.defaults({ class: 'rounded-md dark:bg-opacity-50 p-4 ' ~ (type == "confirm" ? "bg-green-50 dark:bg-green-900" : (type == "error" ? "bg-red-50 dark:bg-red-900" : (type == "warning" ? "bg-yellow-100/50 dark:bg-yellow-900" : "bg-blue-50 dark:bg-blue-900"))) })|raw }}>
    <div class="flex">
        <div class="flex-shrink-0">
            {% set alertIcon = type == "confirm" ? 'lucide:check-circle' : (type == "error" ? 'lucide:x-circle' : 'lucide:info') %}
            {{ ux_icon(alertIcon, {class: 'block h-5 w-5 ' ~ (type == "confirm" ? "text-green-500 dark:text-green-300" : (type == "error" ? "text-red-400 dark:text-red-300" : (type == "warning" ? "text-yellow-500 dark:text-yellow-300" : "text-blue-400 dark:text-blue-300")))}) }}
        </div>
        <p class="ml-2 text-sm leading-5 {{ type == "confirm" ? "text-green-700 dark:text-green-200" : (type == "error" ? "text-red-700 dark:text-red-200" : (type == "warning" ? "text-yellow-700 dark:text-yellow-200" : "text-blue-700 dark:text-blue-200")) }}">
            {% block content %}{{ message|trans }}{% endblock %}
        </p>
    </div>
</div>
