<script>
    import {localePath} from "$lib/config/localePath.js";
    import {locale, t} from "$lib/translations.js";
    import {slide} from 'svelte/transition'
    // import Close from "svelte-material-icons/Close.svelte"
    // import { Close } from "@iconify/svelte";


    export let openMobileMenu;
    export let menu;


    import {writable} from "svelte/store";

    let toggleMatches = writable(false);

    let toggleMedia = writable(false);

</script>
<div class="mobile-menu  absolute ltr:left-0 md:ltr:-left-12 lg:left-0 rtl:right-0  top-0 z-50 w-full h-[1000px] bg-sky-500  flex-col { openMobileMenu ? 'flex' : 'hidden'} px-4 py-2"
     transition:slide={{axis:'x'}}>

    <div class="flex flex-row justify-between rtl:text-left ltr:text-right">
        <div class="logo">


            <a href="/{$locale}">
                <img src="/logo.png" alt="" class="h-10 md:h-12">
            </a>

        </div>

        <button on:click={menu}>
            <!-- <Close color="white" size="24"/> -->
        </button>

    </div>

    <div class="mt-5 text-white font-semibold text-nowrap">
        <ul>
            <li class="border-b border-sky-600 py-2">
                <a href="{localePath($locale,'/')}"
                   class="group-hover:border-b-2  flex  transition-border  duration-100  ">
                    { $t('common.home') }
                </a>
            </li>
            <li class="border-b border-sky-600 py-2">
                <a href="{localePath($locale,'/about')}"
                   class="group-hover:border-b-2  flex  transition-border duration-100">
                    { $t('common.about-acb') }
                </a>
            </li>

            <li class="border-b border-sky-600 py-2 group"
            >
                <!--{localePath($locale,'/matches/international')}-->
                <a href="/" on:click={ ()=>{$toggleMatches = !$toggleMatches} }
                   class="flex">
                    {$t('common.matches')}
                </a>

                {#if $toggleMatches}
                    <div class="flex flex-row  px-2   transition duration-100"
                         transition:slide={{axis:'y'}}>

                        <ul class="flex flex-col py-2  text-sm px-2 w-full">
                            <li class="hover:text-gray-300 transition duration-100 border-b  border-gray-300 py-2">
                                <a href="{localePath($locale,'/matches/international')}">
                                    {$t('common.international')}
                                </a>
                            </li>
                            <li class="hover:text-gray-300 transition duration-100 border-b  border-gray-300 py-2">
                                <a href="{localePath($locale,'/matches/domestic')}">
                                    {$t('common.domestic')}
                                </a>

                            </li>


                        </ul>
                    </div>
                {/if}
            </li>

            <li class="border-b border-sky-600 py-2  ">

                <!--{localePath($locale,'/media/latest-news')}-->
                <a href="/" class=" flex" on:click={ ()=>{ $toggleMedia = !$toggleMedia } }>
                    {$t('common.media')}
                </a>

                {#if $toggleMedia}

                    <div class="flex flex-row  px-2   transition duration-100"
                         transition:slide={{axis:'y'}}>
                        <ul class="flex flex-col py-2  text-sm px-2 w-full">

                            <li class="hover:text-gray-300 transition duration-100 border-b border-gray-300 py-2">
                                <a href="/media/press-release">

                                    {$t('common.press-release')}
                                </a>
                            </li>

                            <li class="hover:text-gray-300 transition duration-100 border-b  border-gray-300 py-2">
                                <a href="/media/latest-news">

                                    {$t('common.news')}
                                </a>

                            </li>
                            <li class="hover:text-gray-300 transition duration-100 border-b  border-gray-300 py-2">
                                <a href="/media/magazine">
                                    {$t('common.magazines')}
                                </a>

                            </li>
                            <li class="hover:text-gray-300 transition duration-100 border-b border-gray-300 py-2">
                                <a href="/media/match-report">
                                    {$t('common.match-report')}
                                </a>

                            </li>
                            <li class="hover:text-gray-300 transition duration-100  py-2">
                                <a href="/media/video">
                                    {$t('common.video')}
                                </a>

                            </li>
                        </ul>
                    </div>

                {/if}


            </li>
            <li class="border-b border-sky-600 py-2 ">
                <a href="/" class="flex  transition-border duration-100">
                    {$t('common.players')}
                </a>


            </li>
            <li class="border-b border-sky-600 py-2">
                <a href="/" class="flex  transition-border duration-100">
                    {$t('common.development')}
                </a>


            </li>
            <li class=" py-2">
                <a href="/" class="flex  transition-border duration-100">
                    {$t('common.opportunities')}
                </a>


            </li>
        </ul>
    </div>

</div>