{% load static %}
<!--<div id="social" class="mx-auto">-->
 <!-- Header -->
    <header id="main-header" class="hover:bg-gray-800 fixed top-0 left-0 w-full z-40 {% if request.resolver_match.url_name != 'home' %}bg-gray-800{% endif %}  ">
        <div class="max-w-[1200px] mx-auto px-10 py-[10px] text-white">
          <nav class="hidden lg:flex gap-10 items-center justify-between px-10">
            <div class="flex gap-16">
                <div class=" group">
                    <a href="{% url 'admin:index' %}" class="hover:text-gray-300">Admin</a>
                </div>
                <div class=" group">
                    <a href="{% url 'home' %}" class="hover:text-gray-300">POČETNA</a>
                </div>
                <div class="group">
                    <a href="{% url 'all_products' %}" class="hover:text-gray-300">PRODAJA PLOVILA</a>
                        <div class="absolute left-0 top-[50px] w-full bg-gray-800 scale-y-0 group-hover:opacity-100 group-hover:scale-y-100 transition-all duration-300 origin-top">
                            <div class="px-64 pt-10 pb-5 grid grid-cols-6 gap-5 z-10 text-black items-center justify-center ">
                                <a href="{% url 'new_products' %}" class="">
                                    <div class="  rounded-lg overflow-hidden cursor-pointer flex flex-col items-center justify-center p-5">
                                        <img src="{% static 'img/services/org.png'%}" alt="" class="w-16 object-cover transition-transform duration-300 ease-in-out hover:scale-105"/>
                                        <p class="text-white font-semibold text-center">NOVA PLOVILA</p>
                                    </div>
                                </a>
                                <a href="{% url 'used_products' %}" class="">
                                    <div class="  rounded-lg overflow-hidden cursor-pointer flex flex-col items-center justify-center p-5">
                                        <img src="{% static 'img/services/transfer.png'%}" alt="" class="w-16 object-cover transition-transform duration-300 ease-in-out hover:scale-105"/>
                                        <p class="text-white font-semibold text-center">POLOVNA PLOVILA</p>
                                    </div>
                                </a>
                            </div>
                        </div>
                </div>
                <div class="group">
                    <a href="{% url 'services' %}" class="hover:text-gray-300">USLUGE</a>
                    <div class="absolute left-0 top-[50px] w-full bg-gray-800 opacity-100 scale-y-0 group-hover:opacity-100 group-hover:scale-y-100 transition-all duration-300 origin-top">
                        <div class="px-64 pt-10 pb-5 grid grid-cols-6 gap-5 z-10 text-black ">
                            <a href="" class="">
                                <div class="  rounded-lg overflow-hidden cursor-pointer flex flex-col items-center justify-center p-5">
                                    <img src="{% static 'img/services/org.png'%}" alt="" class="w-16 object-cover transition-transform duration-300 ease-in-out hover:scale-105"/>
                                    <p class="text-white font-semibold text-center">Organizacija „Survey“ pregleda</p>
                                </div>
                            </a>
                            <a href="" class="">
                                <div class="  rounded-lg overflow-hidden cursor-pointer flex flex-col items-center justify-center p-5">
                                    <img src="{% static 'img/services/transfer.png'%}" alt="" class="w-16 object-cover transition-transform duration-300 ease-in-out hover:scale-105"/>
                                    <p class="text-white font-semibold text-center">Transfer plovila</p>
                                </div>
                            </a>
                            <a href="" class="">
                                <div class="  rounded-lg overflow-hidden cursor-pointer flex flex-col items-center justify-center p-5">
                                    <img src="{% static 'img/services/registration.png'%}" alt="" class="w-16 object-cover transition-transform duration-300 ease-in-out hover:scale-105"/>
                                    <p class="text-white font-semibold text-center">Posredovanje pri registraciji plovila</p>
                                </div>
                            </a>
                            <a href="" class="">
                                <div class="  rounded-lg overflow-hidden cursor-pointer flex flex-col items-center justify-center p-5">
                                    <img src="{% static 'img/services/care.png'%}" alt="" class="w-16 object-cover transition-transform duration-300 ease-in-out hover:scale-105"/>
                                    <p class="text-white font-semibold text-center">Vansezonska briga o plovilu</p>
                                </div>
                            </a>
                            <a href="" class="">
                                <div class="  rounded-lg overflow-hidden cursor-pointer flex flex-col items-center justify-center p-5">
                                    <img src="{% static 'img/services/services.png'%}" alt="" class="w-16 object-cover transition-transform duration-300 ease-in-out hover:scale-105"/>
                                    <p class=" text-white font-semibold text-center">Usluge dockinga i održavanje plovila</p>
                                </div>
                            </a>
                            <a href="" class="">
                                <div class="  rounded-lg overflow-hidden cursor-pointer flex flex-col items-center justify-center p-5">
                                    <img src="{% static 'img/services/customerservice.png'%}" alt="" class="w-16 object-cover transition-transform duration-300 ease-in-out hover:scale-105"/>
                                    <p class="text-white font-semibold text-center">Tehnička podrška i servis</p>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="hidden lg:flex justify-center items-center z-40">
                <a href="{% url 'home' %}" class="">
                    <img src="{% static 'img/logo1.png' %}" alt="Logo" class=" h-[60px]"/>
                </a>
            </div>
            <div>
                <a href="{% url 'about' %}" class="hover:text-gray-300">O NAMA</a>
                <div class="absolute left-0 w-full bg-white text-black hidden group-hover:block p-4">
                    <p class="text-center">Services description here</p>
                    <img src="" alt="Services" class="w-full h-auto">
                </div>
            </div>
            <div>
                <a href="#" class="hover:text-gray-300">DODATNA OPREMA</a>
                <div class="absolute left-0 w-full bg-white text-black hidden group-hover:block p-4">
                    <p class="text-center">Services description here</p>
                    <img src="" alt="Services" class="w-full h-auto">
                </div>
            </div>
            <div>
                <a href="#" class="hover:text-gray-300">KONTAKT</a>
                <div class="absolute left-0 w-full bg-white text-black hidden group-hover:block p-4">
                    <p class="text-center">Services description here</p>
                    <img src="" alt="Services" class="w-full h-auto">
                </div>
            </div>
          </nav>

          <div class="lg:hidden flex items-center justify-between w-full">
            <a href="{% url 'home' %}" class="">
                <img src="{% static 'img/logo1.png' %}" alt="Logo" class="w-[80px]"/>
            </a>
            <div class="flex items-center">
                <button class="text-white" id="mobileMenuToggle">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-10 h-10">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                    </svg>
                </button>
            </div>
            </div>
        </div>

       <!-- Mobilni meni -->
        <div id="mobileMenu" class="lg:hidden fixed inset-0 shadow-md rounded-md text-white max-h-0 bg-gray-800 overflow-y-auto transition-all duration-500 ease-in-out">

            <div class="px-10 py-5 flex justify-end">
                <p id="closeMobileMenu" class="text-3xl text-end cursor-pointer w-fit">X</p>
            </div>
            <div class="flex justify-center items-center">
                <img src="{% static 'img/logo1.png' %}" alt="Logo" class="w-[80px]" />
            </div>
            <br>
            <a href="{% url 'home' %}" class="text-2xl block px-6 py-6 hover:bg-gray-600">POČETNA</a>
            <div>
                <button id="servicesBtn1" class="text-2xl text-left w-full px-6 py-6 hover:bg-gray-600">
                    PRODAJA PLOVILA ▾
                </button>
                <div id="servicesMenu1" class=" overflow-hidden max-h-0 bg-gray-700 shadow-md rounded-md transition-all duration-300 ease-in-out">
                    <a href="{% url 'new_products' %}" class="text-xl block px-8 py-4 hover:bg-gray-600">NOVA PLOVILA</a>
                    <a href="{% url 'used_products' %}" class="text-xl block px-8 py-4 hover:bg-gray-600">POLOVNA PLOVILA</a>
                </div>
            </div>

            <!-- Dropdown za Services -->
            <div>
                <button id="servicesBtn" class="text-2xl text-left w-full px-6 py-6 hover:bg-gray-600">
                    USLUGE ▾
                </button>
                <div id="servicesMenu" class="overflow-hidden max-h-0 bg-gray-700 shadow-md rounded-md transition-all duration-300 ease-in-out">
                    <a href="#" class="text-xl block px-8 py-4 hover:bg-gray-600">Organizacija „Survey“ pregleda</a>
                    <a href="#" class="text-xl block px-8 py-4 hover:bg-gray-600">Transfer plovila</a>
                    <a href="#" class="text-xl block px-8 py-4 hover:bg-gray-600">Posredovanje pri registraciji plovila</a>
                    <a href="#" class="text-xl block px-8 py-4 hover:bg-gray-600">Vansezonska briga o plovilu</a>
                    <a href="#" class="text-xl block px-8 py-4 hover:bg-gray-600">Usluge dockinga i održavanje plovila</a>
                    <a href="#" class="text-xl block px-8 py-4 hover:bg-gray-600">Tehnička podrška i servis</a>
                </div>
            </div>
            <a href="{% url 'about' %}" class="text-2xl block px-6 py-6 hover:bg-gray-600">O NAMA</a>
            <a href="#" class="text-2xl block px-6 py-6 hover:bg-gray-600">DODATNA OPREMA</a>
            <a href="#" class="text-2xl block px-6 py-6 hover:bg-gray-600">KONTAKT</a>
        </div>

    </header>


<script>
    const mobileMenuToggle = document.getElementById('mobileMenuToggle');
    const mobileMenu = document.getElementById('mobileMenu');
    const closeMobileMenu = document.getElementById('closeMobileMenu');

<!--    const servicesBtn = document.getElementById('servicesBtn');-->
<!--    const servicesMenu = document.getElementById('servicesMenu');-->


    // Funkcija za toggle menija
    mobileMenuToggle.addEventListener('click', function() {

        if (mobileMenu.classList.contains('max-h-0')) {
            mobileMenu.classList.remove('max-h-0');
            mobileMenu.classList.add('max-h-[100vh]'); // Otvori meni sa animacijom
        } else {
            mobileMenu.classList.remove('max-h-[100vh]');
            mobileMenu.classList.add('max-h-0'); // Zatvori meni sa animacijom
        }
    });

<!--    // Funkcija za toggle Services menija-->
<!--    servicesBtn.addEventListener('click', function() {-->
<!--        if (servicesMenu.style.maxHeight) {-->
<!--            servicesMenu.style.maxHeight = null;-->
<!--        } else {-->
<!--            servicesMenu.style.maxHeight = servicesMenu.scrollHeight + 'px';  // Automatski visina menija-->
<!--        }-->
<!--    });-->

    // Funkcija za zatvaranje menija
    closeMobileMenu.addEventListener('click', function() {
        mobileMenu.classList.remove('max-h-[100vh]');
        mobileMenu.classList.add('max-h-0'); // Zatvori meni sa animacijom
    });
</script>