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

<f:comment>
<!-- If the site-header has no hero and we're not on the frontpage, 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>


<f:if condition="{showNotification} == true">
    <f:render partial="Notifications" arguments="{_all}" />
</f:if>

<header class="c-site-header {menuFontColor} {headerBackgroundColor}
       {f:if(condition: '{altMetaMenu}', then: ' c-site-header--alt-meta-menu')}
       {f:if(condition: '({showHero} || {isFrontPage}) && {useDynamicHeaderHeight}', then: ' c-site-header--dynamic')}
       {f:if(condition: '!{showHero} && !{isFrontPage}', then: ' c-site-header--filled')}"
       data-site-header
       {f:if(condition: '{showHero} || {isFrontPage}', 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')}">
            <neos:link.node node="~" class="c-site-header__logo">
                <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)}"
                            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>
            </neos:link.node>
        </div>
        <div class="c-site-header__right">
            <f:comment><!-- Meta Menu--></f:comment>
            <f:if condition="({hasMetaNavItems} && {metaNavItemCount} <= 5) || ({hasMultipleSiteDimensions} && !{hideLanguageMenu})">
                <f:if condition="{altMetaMenu}">
                    <f:then>
                        <f:if condition="{hasMultipleSiteDimensions} && !{hideLanguageMenu}">
                            <nav class="c-meta-menu__container c-meta-menu__container--desktop">
                                {parts.languageNavigation -> f:format.raw()}
                            </nav>
                        </f:if>
                    </f:then>
                    <f:else>
                        <nav class="c-meta-menu__container c-meta-menu__container--desktop">
                            <f:if condition="{hasMetaNavItems} && {metaNavItemCount} <= 5">
                                {metaNavItems -> f:format.raw()}
                            </f:if>

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

            <nav id="main-navigation" class="c-main-navigation{f:if(condition: '{showDropdownMenu}', then: ' c-main-navigation--dropdown')}{f:if(condition: '{showDropdownMenu} != true', then: '{burgerMenuLayout}')}{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 {menuFontColor}"
                        data-target-enhancement
                        data-target-enhancement-targets.0="#menu-layer"
                        data-target-enhancement-plugins.0.name="toggle-aria-expanded"
                        data-target-enhancement-plugins.1.name="focus-blur"
                        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">
                            <f:translate id="word.openMenu" package="Newland.CityTheme" source="Main"/>
                        </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">
                            <f:translate id="word.closeMenu" package="Newland.CityTheme" source="Main"/>
                        </span>
                    </svg>

                    <span class="c-site-header-trigger__text">
                        <f:translate id="word.menu" package="Newland.CityTheme" source="Main"/>
                    </span>
                </button>

                <f:if condition="{transparentBackground}">
                    <div id="menu-layer" data-overlay class="c-menu-overlay c-overlay c-overlay--transparent"></div>
                    <div id="search-layer" data-overlay class="c-overlay c-overlay--transparent"></div>
                    <div id="live-layer" data-overlay class="c-overlay c-overlay--transparent"></div>
                </f:if>

                <div id="menu-layer" data-overlay class="c-menu-overlay c-overlay{f:if(condition: '{transparentBackground} && {showDropdownMenu} == false', then: ' c-menu-overlay--blurred')}">
                    <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} && {metaNavItemCount} <= 5 && !{altMetaMenu}">
                        <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 {menuFontColor}"
                    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">
                            <f:translate id="word.openSearch" package="Newland.CityTheme" source="Main"/>
                        </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">
                            <f:translate id="word.closeSearch" package="Newland.CityTheme" source="Main"/>
                        </span>
                    </svg>
                </button>

                <f:render partial="SearchOverlay" arguments="{_all}" />

                <f:comment><!-- LiveMenu --></f:comment>
                <f:if condition="{showLiveMenu}">
                    <button class="c-site-header-trigger {menuFontColor}"
                        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-live-toggle__icon c-icon" aria-hidden="true" focusable="false">
                            <use xlink:href="#icon-live" />
                            <span class="visually-hidden">
                                <f:translate id="word.openLiveOverlay" package="Newland.CityTheme" source="Main"/>
                            </span>
                        </svg>

                        <svg class="c-site-header-trigger__icon-close c-live-toggle__icon c-icon" aria-hidden="true" focusable="false">
                            <use xlink:href="#icon-times" />
                            <span class="visually-hidden">
                                <f:translate id="word.closeLiveOverlay" package="Newland.CityTheme" source="Main"/>
                            </span>
                        </svg>

                        <span class="c-site-header-trigger__text">
                            Live
                        </span>
                    </button>
                    {content.live -> f:format.raw()}
                </f:if>
            </nav>
        </div>
    </div>

    <f:if condition="{headerDecoration}">
        <img src="{neos.media:uri.image(image: headerDecoration)}"
                alt="{image.caption}"
                class="c-site-header__decoration"/>
    </f:if>
</header>