{# messages.html #}
{% comment %}
Usage: {% include 'components/messages.html' %}

Message types and their icons:
- success: check-circle
- info: info-circle
- warning: exclamation-triangle
- error/danger: exclamation-circle
{% endcomment %}

{% if messages %}
    {% for message in messages %}
        <div class="alert alert-{{ message.tags }} alert-dismissible fade show mb-4" role="alert">
            <div class="d-flex align-items-center">
                <div class="alert-icon me-3">
                    {% if message.tags == 'success' %}
                        <i class="fas fa-check-circle fa-lg"></i>
                    {% elif message.tags == 'info' %}
                        <i class="fas fa-info-circle fa-lg"></i>
                    {% elif message.tags == 'warning' %}
                        <i class="fas fa-exclamation-triangle fa-lg"></i>
                    {% elif message.tags == 'error' or message.tags == 'danger' %}
                        <i class="fas fa-exclamation-circle fa-lg"></i>
                    {% endif %}
                </div>
                <div class="alert-content flex-grow-1">
                    {{ message }}
                </div>
                <button type="button" class="btn-close ms-3" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        </div>
    {% endfor %}
{% endif %}