{# partials/flash_messages.html — toast notifications #}
{% set messages = get_flash_messages(request) | default([]) %}
{% if messages %}
<div class="fixed top-4 right-4 z-50 space-y-2" style="display: none;" x-data="{ show: true }" x-init="show = true">
  {% for msg in messages %}
  <div x-data="{ show: true }"
       x-init="setTimeout(() => show = false, 4000)"
       x-show="show"
       x-transition:enter="transition ease-out duration-300"
       x-transition:enter-start="opacity-0 translate-y-2"
       x-transition:enter-end="opacity-100 translate-y-0"
       x-transition:leave="transition ease-in duration-200"
       x-transition:leave-start="opacity-100 translate-y-0"
       x-transition:leave-end="opacity-0 translate-y-2"
       class="toast toast-{{ msg.level | default('info') }} max-w-sm w-full bg-white shadow-lg rounded-lg border p-4"
       style="display: none;">
    <div class="flex items-start gap-3">
      <div class="shrink-0">
        {% if msg.level == 'success' %}
        {{ icon("check", size="20px", class="text-[var(--color-success)]") }}
        {% elif msg.level == 'error' %}
        {{ icon("x-mark", size="20px", class="text-[var(--color-danger)]") }}
        {% elif msg.level == 'warning' %}
        {{ icon("exclamation-triangle", size="20px", class="text-[var(--color-warning)]") }}
        {% else %}
        {{ icon("information-circle", size="20px", class="text-[var(--color-info)]") }}
        {% endif %}
      </div>
      <div class="flex-1">
        <p class="text-sm text-[var(--color-gray-900)]">{{ msg.text }}</p>
      </div>
      <button @click="show = false" class="shrink-0 text-[var(--color-gray-400)] hover:text-[var(--color-gray-600)]">
        {{ icon("x-mark") }}
      </button>
    </div>
  </div>
  {% endfor %}
</div>
{% endif %}