<!-- Template: messages.html -->

{% 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>


<style>
    /* Wrapper to hold all messages */
    .messages-wrapper {
        position: fixed;
        bottom: 20px; /* Distance from the bottom */
        right: 20px;  /* Distance from the right */
        z-index: 1000; /* Ensure it appears above other elements */
        display: flex;
        flex-direction: column; /* Stack messages vertically */
        gap: 10px; /* Space between messages */
    }

    /* Common styles for all message containers */
    .message-container {
        padding: 15px 20px;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        min-width: 400px; /* Optional: Set a minimum width */
        max-width: 600px; /* Optional: Set a maximum width */
        opacity: 1; /* Initial opacity */
        transition: opacity 0.5s ease-out, transform 0.5s ease-out; /* Transition for fade-out and slight upward movement */
    }
    
    /* Specific styles for error messages */
    .alert-message-error {
        background-color: #f8d7da; /* Light red background */
        color: #721c24;           /* Dark red text */
    }

    /* Specific styles for success messages */
    .alert-message-success {
        background-color: #d4edda; /* Light green background */
        color: #155724;           /* Dark green text */
    }

    /* Styles for the inner message content */
    .alert-message {
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .alert-message-info {
        background-color: #cce5ff; /* Light blue background */
        color: #004085;           /* Dark blue text */
    }

    .alert-icon {
        padding-right: 5px;
        height: 24px;
    }

    .alert-close {
        cursor: pointer;
        height: 20px;
    }

    .fade-out {
        opacity: 0;
        transform: translateY(-20px); /* Optional: Move the message slightly upwards */
    }

</style>
