{namespace neos=Neos\Neos\ViewHelpers}
{namespace fusion=Neos\Fusion\ViewHelpers}

<header class="c-site-header{f:if(condition: '{hasPageFrame}', then: ' c-page-frame')}{f:if(condition: '{showHero} == false && {isFrontPage} == false', then: ' c-site-header--inverted')}" data-site-header>
    <div class="c-site-header__container">
        <a class="c-site-header__logo{f:if(condition: '{logoHasMargin}', then: ' mt-4')}" href="/">
            <f:if condition="{showHero} && {logoWhite} || {isFrontPage} && {logoWhite}">
                <f:then>
                    <img
                        class="c-site-header__logo-image c-site-header__logo-image--white"
                        src="{neos.media:uri.image(image: logoWhite)}"
                        width="200"
                        alt="{pageTitle}" />
                    <img
                        class="c-site-header__logo-image c-site-header__logo-image--colored"
                        src="{neos.media:uri.image(image: logo)}"
                        width="200"
                        alt="{pageTitle}" />
                </f:then>
                <f:else>
                    <img
                        class="c-site-header__logo-image"
                        src="{neos.media:uri.image(image: logo)}"
                        width="200"
                        alt="{pageTitle}" />
                </f:else>
            </f:if>
        </a>

        <nav id="main-navigation" class="c-main-navigation{f:if(condition: '{showLiveMenu}', then: ' c-main-navigation--live-menu')}">
            <ul class="c-meta-menu">
                <f:if condition="{webcamLink}">
                    <li class="c-meta-menu__item">
                        <neos:link.node node="{webcamLink}" class="c-meta-menu__link c-webcam-link">
                            <svg class="mr-2 c-icon c-webcam-link__icon">
                                <use xlink:href="#icon-webcam"></use>
                            </svg>
                            <span>
                                Webcam
                            </span>
                        </neos:link.node>
                    </li>
                </f:if>

                <f:if condition="{contactLink}">
                    <li class="c-meta-menu__item">
                        <neos:link.node node="{contactLink}" class="c-meta-menu__link c-contact-link">
                            <svg class="mr-2 c-icon c-contact-link__icon">
                                <use xlink:href="#icon-mail"></use>
                            </svg>
                            <span>
                                Kontakt
                            </span>
                        </neos:link.node>
                    </li>
                </f:if>

                <f:if condition="{showPhoneNumber}">
                    <li class="c-meta-menu__item">
                        <a href="tel:{companyPhone}" class="c-meta-menu__link c-phone-link">
                            <svg class="mr-2 c-icon c-phone-link__icon">
                                <use xlink:href="#icon-phone"></use>
                            </svg>
                            <span>
                                {companyPhone}
                            </span>
                        </a>
                    </li>
                </f:if>
            </ul>

            <div class="c-main-navigation__inner-wrapper">
                <f:if condition="{showLiveMenu}">
                    <f:then>
                        <f:render section="search"/>
                        <f:render partial="SearchOverlay" arguments="{_all}" />
                        {parts.mainMenu -> f:format.raw()}
                    </f:then>
                    <f:else>
                        <f:render section="search"/>
                        <f:render partial="SearchOverlay" arguments="{_all}" />

                        <button class="c-main-navigation__hamburger"
                                data-target-enhancement
                                data-target-enhancement-targets.0="#c-main-menu"
                                data-target-enhancement-plugins.0.name="toggle-aria-expanded"
                                data-target-enhancement-exclusive-group="overlay-group"
                                aria-expanded="false"
                                aria-haspopup="true">

                            <svg class="c-menu-toggle__icon c-menu-toggle__icon--menu c-icon c-icon--block" aria-hidden="true" focusable="false">
                                <use xlink:href="#icon-bars" />
                                <span class="visually-hidden">
                                    Menü öffnen
                                </span>
                            </svg>

                            <svg class="c-menu-toggle__icon c-menu-toggle__icon--close c-icon c-icon--block" aria-hidden="true" focusable="false">
                                <use xlink:href="#icon-times" />
                                <span class="visually-hidden">
                                    Menü schließen
                                </span>
                            </svg>

                            <span class="c-main-navigation__hamburger-label">
                                Menü
                            </span>
                        </button>
                        {parts.mainMenu -> f:format.raw()}
                    </f:else>
                </f:if>
            </div>
        </nav>
    </div>
</header>

<f:section name="search">
    <button class="c-search-toggle"
        data-target-enhancement
        data-search-focus-trigger
        data-target-enhancement-targets.0="#c-search-overlay"
        data-target-enhancement-plugins.0.name="toggle-aria-expanded"
        data-target-enhancement-exclusive-group="overlay-group"
        aria-expanded="false" aria-haspopup="true">

        <svg class="c-search-toggle__icon c-search-toggle__icon--search c-icon c-icon--block" aria-hidden="true" focusable="false">
            <use xlink:href="#icon-search" />
            <span class="visually-hidden">
                Suche öffnen
            </span>
        </svg>

        <svg class="c-search-toggle__icon c-search-toggle__icon--close c-icon c-icon--block" aria-hidden="true" focusable="false">
            <use xlink:href="#icon-times" />
            <span class="visually-hidden">
                Suche schließen
            </span>
        </svg>
    </button>
</f:section>