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

<f:comment>
<!-- If the site-header has no hero, remove the data-attribute which triggers the onscroll javascript event and
    set the c-site-header--filled class to display the filled site-header -->
</f:comment>
<header class="c-site-header{f:if(condition: '{showHero} == false', then: ' c-site-header--filled')}"
    {f:if(condition: '{showHero}', then: ' data-site-header-transparent')}>

    <div class="c-site-header__container">
        <div class="c-site-header__left{f:if(condition: '{logoTop}', then: ' c-site-header__left--logotop')}">
            <a class="c-site-header__logo" href="/">
                <f:if condition="{showHero} && {logoWhite}">
                    <f:then>
                        <img
                            class="c-site-header__logo-image c-site-header__logo-image--white"
                            src="{neos.media:uri.image(image: logoWhite)}"
                            alt="{pageTitle}" />
                        <img
                            class="c-site-header__logo-image c-site-header__logo-image--colored"
                            src="{neos.media:uri.image(image: logo)}"
                            alt="{pageTitle}" />
                    </f:then>
                    <f:else>
                        <img
                            class="c-site-header__logo-image"
                            src="{neos.media:uri.image(image: logo)}"
                            alt="{pageTitle}" />
                    </f:else>
                </f:if>
            </a>
        </div>
        <div class="c-site-header__right">
            <f:comment><!-- Meta Menu --></f:comment>
            <f:if condition="{hasMetaNavItems} || {hasMultipleSiteDimensions}">
                <nav class="c-meta-menu__container c-meta-menu__container--desktop">
                    <f:if condition="{hasMetaNavItems}">
                        {metaNavItems -> f:format.raw()}
                    </f:if>

                    <f:if condition="{hasMultipleSiteDimensions} && !{hideLanguageMenu}">
                        {parts.languageNavigation -> f:format.raw()}
                    </f:if>
                </nav>
            </f:if>

            <nav id="main-navigation" class="c-main-navigation{f:if(condition: '{showDropdownMenu}', then: ' c-main-navigation--dropdown')}{f:if(condition: '{activateUppercaseForHeadlines}', then: ' c-main-navigation--uppercase')}">

                <f:comment><!-- Menu --></f:comment>
                <button class="c-site-header-trigger c-site-header-trigger--menu"
                        data-target-enhancement
                        data-target-enhancement-targets.0="#menu-layer"
                        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-site-header-trigger__icon-open c-menu-toggle__icon c-icon" aria-hidden="true" focusable="false">
                        <use xlink:href="#icon-bars" />
                        <span class="visually-hidden">
                            Menü öffnen
                        </span>
                    </svg>

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

                    <span class="c-site-header-trigger__text">
                        Menü
                    </span>
                </button>

                <div id="menu-layer" class="c-menu-overlay c-overlay">
                    <f:if condition="{hasMultipleSiteDimensions} && !{hideLanguageMenu}">
                        {parts.languageNavigationInMenu -> f:format.raw()}
                    </f:if>

                    {parts.mainMenu -> f:format.raw()}

                    <f:comment><!-- Meta Menu --></f:comment>
                    <f:if condition="{hasMetaNavItems}">
                        <nav class="c-meta-menu__container">
                            {metaNavItems -> f:format.raw()}
                        </nav>
                    </f:if>
                </div>

                <f:comment><!-- Search --></f:comment>
                <button class="c-site-header-trigger"
                    data-target-enhancement
                    data-search-focus-trigger
                    data-target-enhancement-targets.0="#search-layer"
                    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-site-header-trigger__icon-open c-search-toggle__icon c-icon" aria-hidden="true" focusable="false">
                        <use xlink:href="#icon-search" />
                        <span class="visually-hidden">
                            Suche öffnen
                        </span>
                    </svg>

                    <svg class="c-site-header-trigger__icon-close c-search-toggle__icon c-icon" aria-hidden="true" focusable="false">
                        <use xlink:href="#icon-times" />
                        <span class="visually-hidden">
                            Suche schließen
                        </span>
                    </svg>
                </button>
                <f:render partial="SearchOverlay" arguments="{_all}" />

                <f:comment><!-- LiveMenu --></f:comment>
                <f:if condition="{showLiveMenu}">
                    <button class="c-site-header-trigger"
                        data-target-enhancement
                        data-target-enhancement-targets.0="#live-layer"
                        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-site-header-trigger__icon-open c-icon" aria-hidden="true" focusable="false">
                            <use xlink:href="#icon-live" />
                            <span class="visually-hidden">
                                Live-Overlay öffnen
                            </span>
                        </svg>

                        <svg class="c-site-header-trigger__icon-close c-icon" aria-hidden="true" focusable="false">
                            <use xlink:href="#icon-times" />
                            <span class="visually-hidden">
                                Live-Overlay schließen
                            </span>
                        </svg>

                        <span class="c-site-header-trigger__text">
                            Live
                        </span>
                    </button>
                    <f:render partial="LiveOverlay"></f:render>
                </f:if>
            </nav>
        </div>
    </div>
</header>