{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>

<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')}>

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

    <div class="c-site-header__container{f:if(condition: '{centerLogoInMenu}', then: ' c-site-header__container--centered')}">
        <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" title="{f:translate(id: 'word.toHomepage', source: 'Main', package: 'Newland.CityTheme')}" tabindex="2">
                <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-label="{f:translate(id: 'word.siteNavigation', source: 'Main', package: 'Newland.CityTheme')}"
                    aria-expanded="false"
                    aria-haspopup="true"
                    tabindex="4"
                >

                    <f:if condition="{menuIcon}">
                        <f:then>
                            <div class="c-site-header-trigger__icon-open c-menu-toggle__icon c-custom-icon" aria-hidden="true" focusable="false" data-expanded="false" alt="">
                                {vh:media.inline(image: menuIcon) -> f:format.raw()}
                            </div>
                        </f:then>
                        <f:else>
                            <svg class="c-site-header-trigger__icon-open c-menu-toggle__icon c-icon" aria-hidden="true" focusable="false" data-expanded="false" alt="">
                                <use xlink:href="#icon-bars" />
                            </svg>
                        </f:else>
                    </f:if>

                    <svg class="c-site-header-trigger__icon-close c-menu-toggle__icon c-icon" aria-hidden="true" focusable="false" data-expanded="true" alt="">
                        <use xlink:href="#icon-times" />
                    </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>

                    <f:if condition="{centerLogoInMenu}">
                        <f:then>
                            {parts.mainMenuCenteredLogo -> f:format.raw()}
                        </f:then>
                        <f:else>
                            {parts.mainMenu -> f:format.raw()}
                        </f:else>
                    </f:if>

                    <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>
                    <f:if condition="{burgerMenuLayout} == ' c-main-navigation--pinned c-main-navigation--pinned-right' || {burgerMenuLayout} == ' c-main-navigation--pinned c-main-navigation--pinned-left'">
                        <f:if condition="{guestCardTeaser}">
                            <div class="c-main-menu__card-wrapper">
                                <div>
                                    <a href="{guestCardLink}">
                                        <img src="{neos.media:uri.image(image: guestCardTeaser)}"
                                        alt="{image.caption}">
                                    </a>
                                </div>
                                <div class="c-main-menu__card-text">
                                    <strong>{guestCardTitle}</strong>
                                    <span>{guestCardSubline}</span>
                                </div>
                            </div>
                        </f:if>
                    </f:if>
                </div>

                <f:comment><!-- Search --></f:comment>
                <button
                    class="c-site-header-trigger {menuFontColor}"
                    data-search-focus-trigger
                    data-target-enhancement
                    data-target-enhancement-targets.0="#search-layer"
                    data-target-enhancement-plugins.0.name="toggle-aria-expanded"
                    data-target-enhancement-exclusive-group="overlay-group"
                    type="button"
                    aria-label="{f:translate(id: 'word.siteSearch', source: 'Main', package: 'Newland.CityTheme')}"
                    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" alt="">
                        <use xlink:href="#icon-search" />
                    </svg>

                    <svg class="c-site-header-trigger__icon-close c-search-toggle__icon c-icon" aria-hidden="true" focusable="false" alt="">
                        <use xlink:href="#icon-times" />
                    </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"
                        type="button"
                        aria-label="{f:translate(id: 'word.liveArea', source: 'Main', package: 'Newland.CityTheme')}"
                        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" alt="">
                            <use xlink:href="#icon-live" />
                        </svg>

                        <svg class="c-site-header-trigger__icon-close c-live-toggle__icon c-icon" aria-hidden="true" focusable="false" alt="">
                            <use xlink:href="#icon-times" />
                        </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>