<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers"
      xmlns:ama="AmadeusAgentur\AmadeusNext\ViewHelpers"
      xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
      data-namespace-typo3-fluid="true">

<header id="page-header"
        class="w-full z-50 fixed">
    <div class="mx-auto flex items-center justify-between p-6 lg:px-8">
        <f:link.typolink parameter="{site.rootPageId}" title="{settings.logo.linktitle}" additionalAttributes="{aria-label:'zur Startseite'}">
            <ama:inlineSvg src="{settings.logo.file}" height="{settings.logo.height}" width="{settings.logo.width}"/>
        </f:link.typolink>
        <button
                id="showNavi"
                type="button"
                autofocus
                aria-controls="offcanvasNavi"
                aria-label="{f:translate(extensionName: 'amadeus_next', key: 'label.showmenu')}"
                class="toggle-icon focus-visible:outline-none"
        >
            <span class="bar"></span>
            <span class="bar"></span>
            <span class="bar"></span>
        </button>
    </div>
    <dialog id="offcanvasNavi"
            aria-expanded="false"
            aria-modal="true"
            class="modal-mainnav w-full max-w-unset h-full max-h-unset m-0 p-0 bg-transparent overflow-hidden open:grid backdrop:bg-white open:backdrop:animate-backdropFade"
    >

        <div class="backdrop absolute bg-primary rounded-full aspect-square w-[100vmax] blur-[10vmax] top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2 animate-backdropPlörr"></div>
        <form method="dialog" class="absolute p-6 lg:px-8 top-0 right-0">
            <button
                    id="hideNavi"
                    autofocus
                    aria-controls="offcanvasNavi"
                    class="toggle-icon focus-visible:outline-none"
            >
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
            </button>
        </form>
        <div class="relative place-self-center">

            <div class="flex flex-col" aria-label="Hauptnavi">
                <div class="border-b border-gray-200 px-4 dark:border-gray-700">
                    <nav class="flex space-x-2" aria-label="Tabs" role="tablist">
                        <button type="button" class="hs-tab-active:font-semibold hs-tab-active:border-blue-600 hs-tab-active:text-blue-600 py-4 px-1 inline-flex items-center gap-x-2 border-b-2 border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-blue-600 disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-blue-500 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600 active" id="basic-tabs-item-1" data-hs-tab="#basic-tabs-1" aria-controls="basic-tabs-1" role="tab">
                            Agentur
                        </button>
                        <button type="button" class="hs-tab-active:font-semibold hs-tab-active:border-blue-600 hs-tab-active:text-blue-600 py-4 px-1 inline-flex items-center gap-x-2 border-b-2 border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-blue-600 disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:text-blue-500 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" id="basic-tabs-item-2" data-hs-tab="#basic-tabs-2" aria-controls="basic-tabs-2" role="tab">
                            Verlag
                        </button>

                    </nav>
                </div>

                <div class="mt-3 p-4">
                    <div id="basic-tabs-1" role="tabpanel" aria-labelledby="basic-tabs-item-1">
                        <f:for each="{mainNavAgentur}" as="page" iteration="i">
                            <f:link.page class="font-heading font-bold text-3xl px-4 py-1 hover:text-sky-500" additionalAttributes="{data-i:i.index}" pageUid="{page.uid}">{page.nav_title}</f:link.page>
                        </f:for>
                    </div>
                    <div id="basic-tabs-2" class="hidden" role="tabpanel" aria-labelledby="basic-tabs-item-2">
                        <f:for each="{mainNavVerlag}" as="page" iteration="i">
                            <f:link.page class="font-heading font-bold text-3xl px-4 py-1 hover:text-sky-500" additionalAttributes="{data-i:i.index}" pageUid="{page.uid}">{page.nav_title}</f:link.page>
                        </f:for>
                    </div>

                </div>
            </div>
            <div>
                {f:translate(key: 'label.sociallinks', extensionName: 'amadeus_next')}
            </div>
            <f:render partial="SocialLinks" arguments="{_all}"/>
            <f:for each="{settings.nav.legal}" key="page" as="pid">
                <f:link.page pageUid="{pid}">
                    <v:page.info pageUid="{pid}" field="title"/>
                </f:link.page>
            </f:for>
        </div>
    </dialog>
</header>


<f:asset.script identifier="offcanvasNavi" useNonce="true" priority="true">
    document.addEventListener("DOMContentLoaded", function () {
    const offcanvasNavi = document.getElementById("offcanvasNavi");
    const showButton = document.getElementById("showNavi");
    const closeButton = document.getElementById("hideNavi");

    showButton.addEventListener("click", () => {
    offcanvasNavi.showModal();
    });

    closeButton.addEventListener("click", () => {
    offcanvasNavi.close();
    });
    });
</f:asset.script>
