{% comment %}
    SweetAlert Messages Component
    
    Usage: Include this template in any page that needs to display Django messages as SweetAlert toasts.
    Add this just before the closing </body> tag or in your extra_js block.
    
    Example:
    {% include 'components/sweetalert_messages.html' %}
{% endcomment %}

{% if messages %}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const messages = [
                {% for message in messages %}
                {
                    type: '{{ message.tags }}',
                    title: getMessageTitle('{{ message.tags }}'),
                    text: '{{ message|escapejs }}',
                    extra_tags: '{% if message.extra_tags %}{{ message.extra_tags|escapejs }}{% endif %}'
                }{% if not forloop.last %},{% endif %}
                {% endfor %}
            ];
            
            function getMessageTitle(type) {
                const titles = {
                    'success': 'Success!',
                    'error': 'Error!',
                    'danger': 'Error!',
                    'warning': 'Warning!',
                    'info': 'Information',
                    'debug': 'Debug'
                };
                return titles[type] || 'Message';
            }
            
            function mapMessageType(type) {
                const typeMap = {
                    'success': 'success',
                    'error': 'error',
                    'danger': 'error',
                    'warning': 'warning',
                    'info': 'info',
                    'debug': 'info'
                };
                return typeMap[type] || 'info';
            }
            
            // Display each message with a slight delay to prevent overlap
            messages.forEach(function(message, index) {
                setTimeout(function() {
                    Swal.fire({
                        icon: mapMessageType(message.type),
                        title: message.title,
                        text: message.text,
                        position: 'bottom-end',
                        timer: 8000, // 8 seconds
                        timerProgressBar: true,
                        toast: true,
                        showConfirmButton: false,
                        showCloseButton: true,
                        customClass: {
                            popup: 'swal-toast-' + message.type
                        },
                        didOpen: function(toast) {
                            toast.addEventListener('mouseenter', Swal.stopTimer);
                            toast.addEventListener('mouseleave', Swal.resumeTimer);
                        }
                    });
                }, index * 300); // 300ms delay between messages
            });
        });
    </script>
{% endif %}