
{% load static %}

<!-- Wrapper for all messages -->
<div class="messages-wrapper">
    {% for message in messages %}
        <div class="
            message-container 
            {% if message.tags == 'error' %}
                alert-message-error
            {% elif message.tags == 'success' %}
                alert-message-success
            {% elif message.tags == 'info' %}
                alert-message-info
            {% endif %}
            shadow">
            <div 
                class="alert-message">
                    <img 
                        {% if message.tags == 'error' %}
                            src="{% static 'bloomerp/icons/error.svg' %}"
                        {% elif message.tags == 'success' %}
                            src="{% static 'bloomerp/icons/success.svg' %}"
                        {% elif message.tags == 'info' %}
                            src="{% static 'bloomerp/icons/info.svg' %}"
                        {% endif %}

                        class ="alert-icon"
                    >
                    <div>
                        {{ message }}
                    </div>
                    <!-- Close icon -->
                    <img 
                        src="{% static 'bloomerp/icons/close.svg' %}" 
                        alt="X" 
                        width="20" 
                        height="20"
                        class ="alert-close"
                    >
                </div>
            </div>
    {% endfor %}
</div>

<script>
    // Close the message when the close icon is clicked
    document.querySelectorAll('.alert-close').forEach(function (closeButton) {
        closeButton.addEventListener('click', function () {
            closeButton.parentElement.parentElement.remove();
        });
    });

    document.addEventListener("DOMContentLoaded", function() {
        // Select all message containers
        const messages = document.querySelectorAll('.message-container');

        messages.forEach(function(message) {
            // Set a timeout to add the fade-out class after 10 seconds
            setTimeout(function() {
                message.classList.add('fade-out');
            }, 10000); // 10000 milliseconds = 10 seconds

            // Listen for the end of the transition to remove the message from the DOM
            message.addEventListener('transitionend', function(event) {
                if (event.propertyName === 'opacity' && message.classList.contains('fade-out')) {
                    message.remove();
                }
            });
        });
    });

</script>



