@props([
    'isHome' => false,
    'donateBtn' => 'btn-bright-pink',
    'isContained' => true,
    'donate' => 'https://my.premier.org.uk/donate/donate-premier-plus'
])

@php
    // urls
    $home = route('home.show');

    $radio = route('home.show');
    $podcasts = route('podcasts.home');
    $music = route('music.home');
    $sermons = route('sermons.home');

    $search = '#';
    $signin = route('login');
    $my = '/my';
@endphp

<header
    class="relative z-50"
    x-data="{open: false}"
>
    <div
        x-show="open"
        x-cloak
        x-transition.duration.250ms.opacity
        class="{{ $isContained?'container-2':'' }} fixed xl:hidden bg-black/90 backdrop-blur-sm inset-0 z-60 flex flex-col pb-20"
    >
        <div class="py-3 md:pb-7 flex items-center justify-between">
            <a href="{{ $radio }}">
                @if ($animated_logo_watched)
                    <x-icon name="logo-premier-plus" class="text-white hover:opacity-75 w-[3.5em] h-[3.5em] md:w-[5.5em] md:h-[5.5em] xl:w-[7em] xl:h-[7em]" />
                @else
                    <img src="/images/common/logo-animated-50ms.gif" alt="" class="hover:opacity-75 w-[3.5em] h-[3.5em] md:w-[5.5em] md:h-[5.5em] xl:w-[7em] xl:h-[7em]">
                @endif
            </a>

            <button @click="open=false" class="btn-on-dark text-white" x-show="open">
                <x-icon name="close" size="2em" class="" />
            </button>
        </div>

        <div x-show="open" x-transition.duration.250ms.scale.delay class="container-1 flex-auto flex flex-col justify-center">
            <div class="flex-auto flex flex-col items-center justify-between w-[9rem] max-h-[550px]">
                <a class="link hover:opacity-75 hover:no-underline text-white px-2.5 py-2" href="{{ $radio }}">Radio</a>
                <a class="link hover:opacity-75 hover:no-underline text-white px-2.5 py-2" href="{{ $podcasts }}">Podcasts</a>
                <a class="link hover:opacity-75 hover:no-underline text-white px-2.5 py-2" href="{{ $music }}">Music</a>
                <a class="link hover:opacity-75 hover:no-underline text-white px-2.5 py-2" href="{{ $sermons }}">Sermons</a>

                <button
                    x-data @click="()=>{$dispatch('opensearchmodal'); open=false; }"
                    class="w-full btn-white flex items-center justify-between"
                >
                    <div class="hiddden xl:block">Search</div>
                    <x-icon name="search" size="1.5em" class="ml-4 -mr-2" />
                </button>

                <a href="{{ auth()->check() ? $my : $signin }}" class="w-full btn-on-dark flex text-white items-center">
                    @if(auth()->check())
                        <div class="hidden xl:block">{{ auth()->user()->first_name }}</div>
                        <x-icon name="user" class="xl:ml-2 xl:-mr-2" size="1.6em" />
                    @else
                        <div class="">Sign in</div>
                        <x-icon name="user" class="" size="1.6em" />
                    @endif
                </a>
                <a target="_blank" href="{{ $donate }}" class="w-full {{ $donateBtn }}">Donate</a>
            </div>
        </div>
    </div>


    <div class="{{ $isContained?'container-2':'' }} py-3 md:pb-7 flex items-center justify-between">
        <a href="{{ $home }}">
            @if ($animated_logo_watched)
                <x-icon name="logo-premier-plus" class="text-white hover:opacity-75 w-[3.5em] h-[3.5em] md:w-[5.5em] md:h-[5.5em] xl:w-[7em] xl:h-[7em]" />
            @else
                <img src="/images/common/logo-animated-50ms.gif" alt="" class="hover:opacity-75 w-[3.5em] h-[3.5em] md:w-[5.5em] md:h-[5.5em] xl:w-[7em] xl:h-[7em]">
            @endif
        </a>

        <button @click="open=true" class="btn-on-dark xl:hidden" x-show="!open">
            <x-icon name="burger" size="2em" class="" />
        </button>

        <div class="hidden xl:flex items-center gap-4">
            @if(!$isHome)
                <nav class="flex gap-1 xl:gap-2 xl:gap-6 items-center xl:pr-8">
                    <a class="link hover:opacity-75 hover:no-underline text-white px-2.5 py-2" href="{{ $radio }}">Radio</a>
                    <a class="link hover:opacity-75 hover:no-underline text-white px-2.5 py-2" href="{{ $podcasts }}">Podcasts</a>
                    <a class="link hover:opacity-75 hover:no-underline text-white px-2.5 py-2" href="{{ $music }}">Music</a>
                    <a class="link hover:opacity-75 hover:no-underline text-white px-2.5 py-2" href="{{ $sermons }}">Sermons</a>
                </nav>
            @endif

            @if(!$isHome)
                <button
                    x-data @click="$dispatch('opensearchmodal')"
                    class="btn-white flex items-center"
                >
                    <div class="hiddden xl:block">Search</div>
                    <x-icon name="search" size="1.5em" class="ml-4 -mr-2" />
                </button>
            @endif

            <a href="{{ auth()->check() ? $my : $signin }}" class="btn-on-dark flex text-white items-center">
                @if(auth()->check())
                    <div class="hidden xl:block">{{ auth()->user()->first_name }}</div>
                    <x-icon name="user" class="xl:ml-2 xl:-mr-2" size="1.6em" />
                @else
                    <div class="">Sign in</div>
                    <x-icon name="user" class="" size="1.6em" />
                @endif
            </a>
            <a target="_blank" href="{{ $donate }}" class="{{ $donateBtn }}">Donate</a>
        </div>
    </div>
</header>