{% if messages %}
<div class="container mx-auto px-4 pt-4">
    {% for message in messages %}
    <div class="alert {% if message.tags == 'success' %}alert-success{% elif message.tags == 'error' %}alert-error{% elif message.tags == 'warning' %}alert-warning{% else %}alert-info{% endif %} mb-2"
         role="alert">
        <span>{{ message }}</span>
        <button type="button" class="btn btn-ghost btn-xs"
                onclick="this.parentElement.remove()">✕</button>
    </div>
    {% endfor %}
</div>
{% endif %}
