<script>
    import Logo from "$lib/images/gif/maxwell-cat.gif";
	import Icon from "./icon.svelte";

    import MenuIcon from "$lib/images/icons/ui/menu.svg";
    import LanguageIcon from "$lib/images/icons/ui/language.svg";
    import DarkmodeIcon from "$lib/images/icons/ui/darkmode.svg";
	
	import Searchbar from "./searchbar.svelte";
    
</script>

<header class="header" data-sveltekit-preload-data="hover">

    <div class="container header-left">
        <Icon class="header__menu-button" image={MenuIcon} size="64px"/>

        <img class="header__logo" alt="WeirdCat.su" src={Logo}>

        <a class="header__link"  href="/">Home</a>
        <a class="header__link" href="/blog">Blog</a>
        <a class="header__link" href="/services">Services</a>
    </div>

    <Searchbar id="searchbar"/>

    <div class="container header-right">
        
        <Icon class="header__language-button" image={LanguageIcon} size="40px"/>
        <Icon class="header__darkmode-button" image={DarkmodeIcon} size="40px"/>
    </div>

</header>

<style>
    .header {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;

        gap: 20px;
        padding: 5px 10px;

        height: 74px;

        background-color: var(--col_panel);
        box-shadow: 0px 6px 5px -5px rgba(0,0,0,0.3);
    }

    .container {
        display: flex;
        align-items: inherit;
        justify-self: right;

        padding: inherit;
        gap: inherit;
    }

    .header-left {
        margin-right: auto;
    }

    .header__logo {
        height: 64px;
        width: 64px;
    }

    :global(.header__menu-button) {
        display: none;
    }

    .header__link {
        font-size: 28px;
        text-decoration: none; 
        color: var(--col_text_panel);
    }

    .header__link:hover {
        color: var(--col_text_hint);
    }

    .header-right {
        justify-self: right;
    }

    @media only screen and (max-width: 1036px) {
        .header {
            grid-template-columns: auto auto auto;
        }
    }

    @media only screen and (max-width: 935px) {
        .header {
            grid-template-columns: auto auto 1fr;
        }
    }

    @media only screen and (max-width: 730px) {
        .header {
            grid-template-columns: auto auto auto;
        }
        
        :global(.header__menu-button) {
            display: block;
        }

        .container > .header__link {
            display: none;
        }

        .container > :global(.header__language-button), :global(.container > .header__darkmode-button) {
            display: none;
        }
    }

    @media only screen and (max-width: 622px) {
        .header {
            grid-template-columns: 1fr 1fr;
        }
    }
</style>