{% extends 'base.html.twig' %}

{% block title %}Hello HomeController!{% endblock %}

{% block body %}
    <!-- component -->
    <div class="rounded-r bg-slate-400 md:hidden flex justify-between w-full p-6 items-center ">
        <!--- more free and premium Tailwind CSS components at https://tailwinduikit.com/ --->
        <div class="flex justify-between  items-center space-x-3">
            <img src="{{ asset('logo.png') }}" width="48" height="48">
            <p class="text-2xl leading-6 text-white">Recip'Eat</p>
        </div>
        <div aria-label="toggler" class="flex justify-center items-center">
            <button aria-label="open" id="open" onclick="showNav(true)" class="hidden focus:outline-none focus:ring-2">
                <svg class="" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M4 6H20" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M4 12H20" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M4 18H20" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
            </button>
            <button aria-label="close" id="close" onclick="showNav(false)" class=" focus:outline-none focus:ring-2">
                <svg class="" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M18 6L6 18" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M6 6L18 18" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
            </button>
        </div>
    </div>
    <div id="Main" class="xl:rounded-r transform  xl:translate-x-0  ease-in-out transition duration-500 flex justify-start items-start h-screen w-full sm:w-64 bg-slate-400 flex-col sm:max-sm:hidden">
        <!--- more free and premium Tailwind CSS components at https://tailwinduikit.com/ --->

        <div class="flex justify-start p-6 items-center space-x-3 w-full">
            <img src="{{ asset('logo.png') }}" width="48" height="48">
            <p class="text-2xl leading-6 text-white">Recip'Eat</p>
        </div>
        <div class="mt-6 flex flex-col justify-start items-center  pl-4 w-full space-y-3 pb-5 ">
            <button class="flex jusitfy-start items-center space-x-6 w-full  focus:outline-none  focus:text-indigo-400  text-white rounded ">
                <svg class="fill-stroke " width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                    {{ ux_icon('hugeicons:bread-01') }}
                </svg>
                <p class="text-base leading-4 ">Mes Recettes</p>
            </button>
            <button class="flex jusitfy-start items-center w-full  space-x-6 focus:outline-none text-white focus:text-indigo-400   rounded ">
                <svg class="fill-stroke" width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                    {{ ux_icon('mdi:calendar-outline') }}
                </svg>
                <p class="text-base leading-4 ">Calendrier</p>
            </button>
            <button class="flex jusitfy-start items-center w-full  space-x-6 focus:outline-none text-white focus:text-indigo-400   rounded ">
                <svg class="fill-stroke" width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                    {{ ux_icon('gg:list') }}
                </svg>
                <p class="text-base leading-4 ">Liste de courses</p>
            </button>
            <button class="flex jusitfy-start items-center w-full  space-x-6 focus:outline-none text-white focus:text-indigo-400   rounded ">
                <svg class="fill-stroke" width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                    {{ ux_icon('tabler:salad') }}
                </svg>
                <p class="text-base leading-4 ">Recettes publiques</p>
            </button>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    <script>let icon1 = document.getElementById("icon1");
        let menu1 = document.getElementById("menu1");
        const showMenu1 = (flag) => {
            if (flag) {
                icon1.classList.toggle("rotate-180");
                menu1.classList.toggle("hidden");
            }
        };
        let icon2 = document.getElementById("icon2");

        const showMenu2 = (flag) => {
            if (flag) {
                icon2.classList.toggle("rotate-180");
            }
        };
        let icon3 = document.getElementById("icon3");

        const showMenu3 = (flag) => {
            if (flag) {
                icon3.classList.toggle("rotate-180");
            }showMenu1()
        };

        let Main = document.getElementById("Main");
        let open = document.getElementById("open");
        let close = document.getElementById("close");

        const showNav = (flag) => {
            console.log(open)
            console.log(flag)
            if (flag) {
                Main.classList.toggle("-translate-x-full");
                Main.classList.toggle("translate-x-0");
                open.classList.toggle("hidden");
                close.classList.toggle('hidden');
            } else {
                //Main.classList.toggle("-translate-x-full");
                //Main.classList.toggle("translate-x-0");
                open.style.display = 'block'
                close.style.display = 'none'
                open.classList.toggle("hidden");
                close.classList.toggle("hidden");
            }
        };
    </script>
{% endblock %}