<script>

    // import Search from "svelte-material-icons/SearchWeb.svelte";
    // import Language from "svelte-material-icons/Earth.svelte";
    // import { Search, Language } from "@iconify/svelte";
    import {t} from '$lib/translations.js';
    import {slide} from "svelte/transition";
    import Icon from "@iconify/svelte";

    import {page} from "$app/stores";

    function replaceLocaleInUrl(url, locale, full = false) {

        const [, , ...rest] = url.pathname.split('/')


        return `${url.origin}/${[locale, ...rest].join('/')}`;


        // const new_pathname = `/${[locale, ...rest].join('/')}`
        //
        // if (!full) {
        //     return `${new_pathname}${url.search}`
        // }
        //
        // const newUrl = new URL(url.toString())
        // newUrl.pathname = new_pathname
        // return newUrl.toString()
    }

    let toggleSearch = false;


</script>

<section class="top-header w-full  py-2 from-blue-950  to-blue-900 bg-gradient-to-l">

    <div class="max-w-6xl flex ltr:flex-row rtl:flex-row-reverse justify-between md:justify-end items-center space-x-4 m-auto px-4 lg:px-0">


        <div class="flex ltr:flex-row rtl:flex-row-reverse md:hidden items-center ">
            <button class="border border-white absolute top-1 px-1 rounded-full py-1 mt-[4px]"
                    on:click={()=>{toggleSearch = true;}}>
                <Icon icon="mdi:search" size="22" class="text-white"/>
            </button>

            {#if toggleSearch}
                <input transition:slide="{{axis: 'x'}}"
                       class="border border-white bg-transparent rounded-2xl text-white ltr:pl-8 rtl:pr-2 pr-3 rtl:w-40 ltr:w-44 focus:outline-0 "
                       placeholder="{$t('common.search')}">
            {/if}
        </div>


        <div class="search hidden md:flex relative ">
            <button class="ltr:border-r  rtl:border-l border-gray-400 absolute top-1 px-3">
                <Icon icon="mdi:search" size="22" class="text-white"/>
            </button>

            <input class="border border-white bg-transparent rounded-2xl text-white ltr:pl-12 rtl:pr-12 pr-3 w-44 focus:outline-0 "
                   placeholder="{$t('common.search')}">
        </div>


        <div class="lang-bar pr-0 md:pr-4 flex text-white items-center  space-x-4">
            <Icon icon="mdi:earth" size="20" class=" rtl:ml-3"/>


            <ul class="flex flex-row text-white space-x-4 items-center font-bold">

                <!--                <LocaleSwitcher/>-->


                <!--                <LocaleSwitcher/>-->


                <li class="rtl:ml-4">
                    <a href="{replaceLocaleInUrl($page.url , 'en-us')}" data-sveltekit-reload>English</a>
                </li>
                <li>
                    <a class="titr-bold" href="{replaceLocaleInUrl($page.url , 'ps-af')}" data-sveltekit-reload>پښتو</a>
                </li>
                <li>
                    <a class="titr-bold" href="{replaceLocaleInUrl($page.url , 'fa-af')}" data-sveltekit-reload>دری</a>
                </li>


            </ul>


        </div>
    </div>
</section>