{% if messages %}
<div class="toast toast-top toast-end top-24 right-4 lg:right-24 z-50">
  <ol class="grid gap-4 max-w-2xl mx-auto">
    {% for message in messages %}
    <li class="alert alert-horizontal alert-{{ message.tags }}">
      <i data-lucide="circle-check" class="size-4 lg:size-6"></i>
      <p>{{ message }}</p>
    </li>
    {% endfor %}
  </ol>
</div>
{% endif %}