@props(['menu','back'])
<header class="w-full">
    <div class="px-4 py-6 bg-slate-900 flex justify-between content-center">
        <div class="flex items-center">
            <a href="/">
                <h1 class="text-3xl font-bold tracking-tight text-white">Exploratory testing tool</h1>
            </a>
        </div>
        @auth
            <div class="flex">
                @if(isset($back))
                    <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
                @else
                    <div
                        class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4 relative left-20">
                @endif
                @if(isset($menu))
                        <nav class="dark:bg-gray-900">
                            <a
                                href="/tests"
                                class="block py-2 px-3 text-l text-white dark:text-white"
                                aria-current="page">My tests</a>
                        </nav>
                @endif
                        <a
                            href="/settings"
                            class="block py-2 px-3 text-l text-white dark:text-white">
                            Settings
                        </a>
                        <form action="/logout" method="POST">
                            @csrf
                            <button type="submit" class="bg-transparent border-0 py-2 px-3 text-l text-white ">
                                Log out
                            </button>
                        </form>
                    </div>
                @if(isset($back))
                                <a href="{{$back}}"
                                   class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
                                    <svg class="w-[48px] h-[48px] text-white-800 dark:text-white" aria-hidden="true"
                                         xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"
                                         viewBox="0 0 24 24">
                                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                              stroke-width="1.2"
                                              d="M5 12h14M5 12l4-4m-4 4 4 4"/>
                                    </svg>
                                    BACK
                                </a>
                @else
                                <a class="invisible text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
                                    <svg class="w-[48px] h-[48px] text-white-800 dark:text-white" aria-hidden="true"
                                         xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"
                                         viewBox="0 0 24 24">
                                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                              stroke-width="1.2"
                                              d="M5 12h14M5 12l4-4m-4 4 4 4"/>
                                    </svg>
                                    BACK
                                </a>
                @endif
            </div>
        @endauth
        @guest
                    <div class="flex flex-wrap items-center justify-between">
                        <div id="removeRelative" class="flex flex-wrap items-center justify-between relative left-20">
                            <a
                                href="/register"
                                class="block py-2 px-3 text-l text-white dark:text-white"
                                aria-current="page">Register</a>
                            <a
                                href="/login"
                                class="block py-2 px-3 text-l text-white dark:text-white"
                                aria-current="page">Log in</a>
                        </div>
                        <script>
                            const bp1 = window.matchMedia("(max-width: 621px)")
                            const bp2 = window.matchMedia("(min-width: 622px)")
                            bp1.addEventListener("change", (e => {
                                if (bp1.matches && !bp2.matches) {
                                    document.getElementById('removeRelative').classList.remove('relative', 'left-20')
                                } else if (bp2.matches) {
                                    document.getElementById('removeRelative').classList.add('relative', 'left-20')
                                }
                            }))
                        </script>
                        <a id="back"
                           class="invisible text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
                            <svg class="w-[48px] h-[48px] text-white-800 dark:text-white" aria-hidden="true"
                                 xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"
                                 viewBox="0 0 24 24">
                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                      stroke-width="1.2"
                                      d="M5 12h14M5 12l4-4m-4 4 4 4"/>
                            </svg>
                            BACK
                        </a>
                    </div>
                @endguest
    </div>
</header>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const currentPage = window.location.pathname;
        const savedPage = localStorage.getItem('activeTabPage');

        if (savedPage !== currentPage) {
            // New page → clear tab state
            localStorage.removeItem('activeTab');
            localStorage.setItem('activeTabPage', currentPage);
        }
    });
</script>