{% if messages %}
  <div class="flex flex-col gap-2">
    {% for message in messages %}
      <div class="alert {% if message.tags %}alert-{{ message.tags }} text-(--color-{{ message.tags }}-content){% else %}alert-info text-(--color-info-content){% endif %} font-semibold mb-4 flex justify-between items-center">
        <span>{{ message }}</span>
        <button class="btn btn-xs btn-circle border-none bg-black/20" onclick="this.parentElement.remove();" aria-label="Dismiss">✕</button>
      </div>
    {% endfor %}
  </div>
{% endif %}