{% load static %}

<header class="fixed top-0 left-0 w-full bg-white/50 backdrop-blur shadow z-10 font-semibold">
    <div class="max-w-7xl mx-auto px-6 ">
        <div class="flex items-center justify-end relative">
            <!-- Logo (može biti veći i da „štrči” van h-20) -->
            <div class="absolute top-1/3 left-0">
                <a href="{% url 'home' %}">
                    <img src="{% static 'img/website/logo.png' %}" alt="Logo"
                         class="h-24 md:h-32 w-auto object-contain shadow rounded-full"/>
                </a>
            </div>
            <!-- Navigation (desno) -->
            <nav class="ml-auto hidden lg:block">
                <ul class="flex">
                    <li><a href="{% url 'admin:index' %}" class="hover:text-black/80 hover:bg-blue-50/30 p-5 block">Admin</a>
                    </li>
                    <li><a href="{% url 'home' %}" class="hover:text-black/80 hover:bg-blue-50/30 p-5 block">Početna</a>
                    </li>
                    <li><a href="{% url 'locations' %}"
                           class="hover:text-black/80 hover:bg-blue-50 p-5 block">Lokacije</a></li>
                    <li><a href="{% url 'shop' %}" class="hover:text-black/80 hover:bg-blue-50 p-5 block">Prodavnica</a></li>
                    <li><a href="{% url 'contact' %}" class="hover:text-black/80 hover:bg-blue-50 p-5 block">Kontakt</a>
                    </li>
                    <li class="relative group">
                        <div class="hover:text-black/80 hover:bg-blue-50 p-5 block flex justify-center items-center">
                            Ostalo
                            <!-- Strelica nagore-dole (opciono) -->
                            <svg class="w-4 h-4 ml-1 fill-current text-gray-600 group-hover:text-blue-600 transition-transform duration-150 group-hover:rotate-180"
                                 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                <path d="M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 011.08 1.04l-4.25 4.25a.75.75 0 01-1.08 0L5.21 8.27a.75.75 0 01.02-1.06z"/>
                            </svg>
                        </div>
                        <!-- Podmeni (skriven dok se ne hovuje roditelj) -->
                        <ul class="absolute left-0 top-full w-48 bg-white border border-gray-200 rounded-md shadow-lg opacity-0 invisible group-hover:visible group-hover:opacity-100 transition-opacity duration-150 z-20">
                            <li>
                                <a href="{% url 'blog' %}" class="block px-4 py-2 hover:bg-gray-100">
                                    Blog
                                </a>
                            </li>
                            <li>
                                <a href="{% url 'timeline' %}" class="block px-4 py-2 hover:bg-gray-100">
                                    Istorijat
                                </a>
                            </li>
                            <li>
                                <a href="{% url 'programs' %}" class="block px-4 py-2 hover:bg-gray-100">
                                    Naši programi
                                </a>
                            </li>
                            <li>
                                <a href="{% url 'masters' %}" class="block px-4 py-2 hover:bg-gray-100">
                                    Naši majstori
                                </a>
                            </li>
                            <li>
                                <a href="{% url 'instructors' %}" class="block px-4 py-2 hover:bg-gray-100">
                                    Naši instruktori
                                </a>
                            </li>

                        </ul>
                    </li>
                </ul>
            </nav>

            <!-- Burger (Mobile) -->
            <div class="lg:hidden z-30 p-5">
                <button id="mobile-menu-toggle" class="relative w-8 h-8 focus:outline-none">
                    <span class="sr-only">Open main menu</span>
                    <!-- 3 lines for burger -->
                    <div class="absolute w-full h-0.5 bg-black transition-all duration-300 top-1 origin-center"
                         id="line1"></div>
                    <div class="absolute w-full h-0.5 bg-black transition-all duration-300 top-1/2 -translate-y-1/2"
                         id="line2"></div>
                    <div class="absolute w-full h-0.5 bg-black transition-all duration-300 bottom-1 origin-center"
                         id="line3"></div>
                </button>
            </div>

        </div>
    </div>
</header>
<!-- Mobile menu (off-canvas) -->
<div id="mobile-menu"
     class="fixed top-0 left-0 h-full w-64 bg-white shadow-lg transform -translate-x-full transition-transform duration-300 z-20 lg:hidden overflow-y-auto">
    <ul class="flex flex-col mt-20 text-lg">
        <li><a href="{% url 'home' %}" class="px-6 py-4 border-b hover:bg-blue-50 block">Početna</a></li>
        <li><a href="{% url 'locations' %}" class="px-6 py-4 border-b hover:bg-blue-50 block">Lokacije</a></li>
        <li><a href="{% url 'shop' %}" class="px-6 py-4 border-b hover:bg-blue-50 block">Prodavnica</a></li>
        <li><a href="{% url 'contact' %}" class="px-6 py-4 border-b hover:bg-blue-50 block">Kontakt</a></li>
        <!-- Usluge with submenu toggle -->
        <li class="border-b">
            <button
                    class="w-full text-left px-6 py-4 flex justify-between items-center hover:bg-blue-50"
                    onclick="toggleMobileSubmenu()"
            >
                Ostalo
                <svg id="submenu-arrow" class="w-4 h-4 transition-transform duration-200" fill="none"
                     stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                    <path d="M19 9l-7 7-7-7"/>
                </svg>
            </button>
            <ul id="mobile-submenu" class="hidden flex-col bg-blue-50 text-base">
                <li><a href="{% url 'blog' %}" class="px-8 py-3 hover:bg-blue-100 block">Blog</a></li>
                <li><a href="{% url 'programs' %}" class="px-8 py-3 hover:bg-blue-100 block">Naši programi</a></li>
                <li><a href="{% url 'instructors' %}" class="px-8 py-3 hover:bg-blue-100 block">Naši Instruktori</a></li>
                <li><a href="{% url 'masters' %}" class="px-8 py-3 hover:bg-blue-100 block">Naši Majstori</a></li>
                <li><a href="{% url 'timeline' %}" class="px-8 py-3 hover:bg-blue-100 block">Istorijat</a></li>
            </ul>
        </li>

    </ul>
</div>


<!-- JS za toggle -->
<script>
    const toggleBtn = document.getElementById('mobile-menu-toggle');
    const menu = document.getElementById('mobile-menu');
    const line1 = document.getElementById('line1');
    const line2 = document.getElementById('line2');
    const line3 = document.getElementById('line3');

    toggleBtn.addEventListener('click', () => {
      menu.classList.toggle('-translate-x-full');
      line1.classList.toggle('rotate-45');
      line1.classList.toggle('top-2');
      line2.classList.toggle('opacity-0');
      line3.classList.toggle('-rotate-45');
      line3.classList.toggle('bottom-2');
    });
</script>

<script>
    function toggleMobileSubmenu() {
      const submenu = document.getElementById('mobile-submenu');
      const arrow = document.getElementById('submenu-arrow');

      submenu.classList.toggle('hidden');
      arrow.classList.toggle('rotate-180');
    }
</script>