{% load traduction_tags config_tags cms_tags %}
{% get_menu 'front-menu' as nav_menu %}
<!-- Navigation -->
<nav class="bg-primary text-white sticky top-0 z-50 shadow-lg"
     x-data="{ scrolled: false }"
     x-init="window.addEventListener('scroll', () => { scrolled = window.scrollY > 60 })"
     @scroll.window="scrolled = window.scrollY > 60">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex items-center justify-between h-16">
            <!-- Logo - visible uniquement quand on a scrolle (topbar n'est plus visible) -->
            <div class="flex items-center transition-all duration-300"
                 :class="scrolled ? 'opacity-100 translate-x-0' : 'opacity-0 -translate-x-4 pointer-events-none'"
                 x-cloak>
                <a href="{% url 'core:home' %}" class="flex items-center space-x-3">
                    {% if settings.logo_menu %}
                    <img src="{{ settings.logo_menu }}" alt="{{ settings.site_name }}" class="h-10 max-h-10 w-auto object-contain">
                    {% else %}
                    <div class="w-10 h-10 bg-accent rounded-full flex items-center justify-center font-bold text-primary">EU</div>
                    {% endif %}
                    <span class="font-bold text-xl">{{ settings.site_name }}</span>
                </a>
            </div>

            <!-- Desktop Navigation -->
            <div class="hidden md:block">
                <div class="flex items-center space-x-1">
                    {% if nav_menu %}
                        {% for item in nav_menu.get_root_items %}
                            {% if item.has_children %}
                                <!-- Element avec sous-menu -->
                                <div class="relative" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false">
                                    <a href="{{ item.get_url }}"
                                       class="px-3 py-2 rounded-md text-sm font-medium hover:bg-secondary transition inline-flex items-center"
                                       {% if item.open_in_new_tab %}target="_blank" rel="noopener noreferrer"{% endif %}>
                                        {% if item.icon %}
                                            <i class="{{ item.icon.group.libelle }} {{ item.icon.libelle }} mr-2"></i>
                                        {% endif %}
                                        {{ item.title }}
                                        <svg class="ml-1 w-4 h-4 transition-transform" :class="{ 'rotate-180': open }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                                        </svg>
                                    </a>
                                    <!-- Dropdown -->
                                    <div x-show="open"
                                         x-transition:enter="transition ease-out duration-100"
                                         x-transition:enter-start="transform opacity-0 scale-95"
                                         x-transition:enter-end="transform opacity-100 scale-100"
                                         x-transition:leave="transition ease-in duration-75"
                                         x-transition:leave-start="transform opacity-100 scale-100"
                                         x-transition:leave-end="transform opacity-0 scale-95"
                                         class="absolute left-0 mt-0 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-50"
                                         style="display: none;">
                                        <div class="py-1">
                                            {% for child in item.get_children %}
                                                <a href="{{ child.get_url }}"
                                                   class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                                                   {% if child.open_in_new_tab %}target="_blank" rel="noopener noreferrer"{% endif %}>
                                                    <div class="flex items-center">
                                                        {% if child.icon %}
                                                            <i class="{{ child.icon.group.libelle }} {{ child.icon.libelle }} mr-2 text-primary"></i>
                                                        {% else %}
                                                            <svg class="w-4 h-4 mr-2 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                                                            </svg>
                                                        {% endif %}
                                                        {{ child.title }}
                                                    </div>
                                                </a>
                                            {% endfor %}
                                        </div>
                                    </div>
                                </div>
                            {% else %}
                                <!-- Element simple -->
                                <a href="{{ item.get_url }}"
                                   class="px-3 py-2 rounded-md text-sm font-medium hover:bg-secondary transition inline-flex items-center"
                                   {% if item.open_in_new_tab %}target="_blank" rel="noopener noreferrer"{% endif %}>
                                    {% if item.icon %}
                                        <i class="{{ item.icon.group.libelle }} {{ item.icon.libelle }} mr-2"></i>
                                    {% endif %}
                                    {{ item.title }}
                                </a>
                            {% endif %}
                        {% endfor %}
                    {% endif %}

                    <!-- Selecteur de langue -->
                    {% get_languages as languages %}
                    {% current_language as current_lang %}
                    {% if languages %}
                    <div class="relative ml-4" x-data="{ open: false }">
                        <button @click="open = !open" class="flex items-center space-x-2 hover:bg-secondary transition px-3 py-2 rounded-md">
                            {% if current_lang.flag_code %}
                            <span class="text-lg">{{ current_lang.flag_code|country_flag }}</span>
                            {% else %}
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"/>
                            </svg>
                            {% endif %}
                            <span class="text-sm font-medium">{{ current_language_code|default:"FR"|upper }}</span>
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                            </svg>
                        </button>
                        <div x-show="open" @click.away="open = false"
                             x-transition:enter="transition ease-out duration-100"
                             x-transition:enter-start="transform opacity-0 scale-95"
                             x-transition:enter-end="transform opacity-100 scale-100"
                             x-transition:leave="transition ease-in duration-75"
                             x-transition:leave-start="transform opacity-100 scale-100"
                             x-transition:leave-end="transform opacity-0 scale-95"
                             class="absolute right-0 mt-2 w-40 bg-white rounded-md shadow-lg z-50 py-1"
                             style="display: none;">
                            {% for lang in languages %}
                            <a href="?lang={{ lang.code }}"
                               class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 {% if lang.code == current_language_code %}bg-blue-50 text-blue-600{% endif %}">
                                {% if lang.flag_code %}<span class="mr-2">{{ lang.flag_code|country_flag }}</span>{% endif %}
                                {{ lang.name }}
                                {% if lang.is_default %}<span class="text-xs text-gray-400 ml-1">(defaut)</span>{% endif %}
                            </a>
                            {% endfor %}
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>

            <!-- Mobile menu button -->
            <div class="md:hidden">
                <button id="mobile-menu-button" type="button" class="p-2 rounded-md hover:bg-secondary transition">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
                    </svg>
                </button>
            </div>
        </div>
    </div>

    <!-- Mobile Navigation Menu -->
    <div id="mobile-menu" class="hidden md:hidden bg-primary border-t border-white/10">
        <div class="px-2 pt-2 pb-3 space-y-1">
            {% if nav_menu %}
                {% for item in nav_menu.get_root_items %}
                    {% if item.has_children %}
                        <!-- Element avec sous-menu mobile -->
                        <div x-data="{ open: false }">
                            <button @click="open = !open" class="w-full flex justify-between items-center px-3 py-2 rounded-md text-base font-medium hover:bg-secondary transition">
                                <span class="flex items-center">
                                    {% if item.icon %}
                                        <i class="{{ item.icon.group.libelle }} {{ item.icon.libelle }} mr-2"></i>
                                    {% endif %}
                                    {{ item.title }}
                                </span>
                                <svg class="w-4 h-4 transition-transform" :class="{ 'rotate-180': open }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                                </svg>
                            </button>
                            <div x-show="open" x-collapse class="pl-4 space-y-1">
                                {% for child in item.get_children %}
                                    <a href="{{ child.get_url }}"
                                       class="flex items-center px-3 py-2 rounded-md text-sm hover:bg-secondary/50 transition"
                                       {% if child.open_in_new_tab %}target="_blank" rel="noopener noreferrer"{% endif %}>
                                        {% if child.icon %}
                                            <i class="{{ child.icon.group.libelle }} {{ child.icon.libelle }} mr-2 text-accent"></i>
                                        {% else %}
                                            <svg class="w-4 h-4 mr-2 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                                            </svg>
                                        {% endif %}
                                        {{ child.title }}
                                    </a>
                                {% endfor %}
                            </div>
                        </div>
                    {% else %}
                        <!-- Element simple mobile -->
                        <a href="{{ item.get_url }}"
                           class="flex items-center px-3 py-2 rounded-md text-base font-medium hover:bg-secondary transition"
                           {% if item.open_in_new_tab %}target="_blank" rel="noopener noreferrer"{% endif %}>
                            {% if item.icon %}
                                <i class="{{ item.icon.group.libelle }} {{ item.icon.libelle }} mr-2"></i>
                            {% endif %}
                            {{ item.title }}
                        </a>
                    {% endif %}
                {% endfor %}
            {% endif %}

            <!-- Selecteur de langue mobile -->
            {% get_languages as languages %}
            {% if languages %}
            <div class="border-t border-white/10 mt-2 pt-2">
                <div class="px-3 py-2 text-sm text-white/70">Langue</div>
                <div class="flex flex-wrap gap-2 px-3">
                    {% for lang in languages %}
                    <a href="?lang={{ lang.code }}"
                       class="flex items-center px-3 py-1.5 rounded-md text-sm {% if lang.code == current_language_code %}bg-secondary{% else %}bg-white/10 hover:bg-white/20{% endif %} transition">
                        {% if lang.flag_code %}<span class="mr-1.5">{{ lang.flag_code|country_flag }}</span>{% endif %}
                        {{ lang.code|upper }}
                    </a>
                    {% endfor %}
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</nav>