{% load static %}
<!DOCTYPE html>
<html lang="de" class="dark:bg-gray-900 h-full">
<head>
    <link rel="icon" type="image/png" href="{% static 'icons/favicon.png' %}">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{% static 'css/t-style.css' %}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/@tsparticles/confetti@3.0.3/tsparticles.confetti.bundle.min.js"></script>
    <title>qivip</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
     integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
     crossorigin=""/>
</head>
<body class="flex flex-col min-h-screen">
    <main class="grow"> 
    {% include 'partials/_nav.html' %}
    {% block content%}{% endblock %}
    {% block faqs%}{% endblock %}
    </main>
    {% include 'partials/_footer.html' %}
  
    <!-- Toast Container -->
    <div id="toast-container" class="fixed top-4 right-4 z-50"></div>

    <!-- Django Messages to Toast -->
    {% if messages %}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            {% for message in messages %}
                // Use the existing toast.create function
                toast.create("{{ message }}", "{{ message.tags }}");
            {% endfor %}
        });
    </script>
    {% endif %}

    <script>
        // WebSocket Utility
        const wsUtil = {
            handleClose: function(e) {
                if (e.code === 1000 || e.code === 1001) {
                    console.log('Socket closed normally');
                } else {
                    console.error('Socket closed unexpectedly', e.code);
                }
            }
        };

        // Toast Notification System
        const toast = {
            create: function(message, type = 'info', duration = 3000) {
                const toast = document.createElement('div');
                toast.className = `mb-4 p-4 rounded-lg shadow-lg transform transition-all duration-300 ease-in-out
                    ${type === 'success' ? 'bg-green-100 border-l-4 border-green-500 text-green-700' :
                    type === 'error' ? 'bg-red-100 border-l-4 border-red-500 text-red-700' :
                    type === 'warning' ? 'bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700' :
                    'bg-blue-100 border-l-4 border-blue-500 text-blue-700'}`;
                toast.innerHTML = message;
                
                const container = document.getElementById('toast-container');
                container.appendChild(toast);

                // Animate in
                setTimeout(() => toast.classList.add('translate-x-0', 'opacity-100'), 100);
                toast.classList.add('-translate-x-4', 'opacity-0');

                // Remove after duration
                setTimeout(() => {
                    toast.classList.add('-translate-x-4', 'opacity-0');
                    setTimeout(() => toast.remove(), 300);
                }, duration);
            }
        };

    </script>
    {% block extra_js %}{% endblock %}
    <style>html {
        overflow-y: scroll;
      }</style>
      
</body>
</html>