<!DOCTYPE html>
{namespace neos=Neos\Neos\ViewHelpers}
{namespace fusion=Neos\Fusion\ViewHelpers}
{namespace vh=Newland\NeosViewHelpers\ViewHelpers}
{namespace city=Newland\CityTheme\ViewHelpers}

<html>
    <head>
        <f:section name="meta">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta http-equiv="x-ua-compatible" content="ie=edge">

            <f:if condition="{googleSiteVerification}">
                <meta name="google-site-verification" content="{googleSiteVerification}">
            </f:if>

            <link rel="apple-touch-icon" sizes="180x180" href="{neos.media:uri.image(image: appleIcon)}">
            <link rel="icon" type="image/png" sizes="32x32" href="{neos.media:uri.image(image: appleIcon)}">
            <link rel="icon" type="image/png" sizes="16x16" href="{neos.media:uri.image(image: appleIcon)}">
            <link rel="shortcut icon" href="{neos.media:uri.image(image: appleIcon)}">
        </f:section>

        <f:section name="stylesheets">
            <f:comment>
                The Order in which we put these partials into the head is crucial!
            </f:comment>

            {colors -> city:cssVariables.renderTag(prefix: 'color')}

            {headingFontSizeBase -> city:cssVariables.renderTag(prefix: 'heading-font-size-base')}
            {headingLetterSpacing -> city:cssVariables.renderTag(prefix: 'heading-letter-spacing')}
            {textFontSizeBase -> city:cssVariables.renderTag(prefix: 'text-font-size-base')}

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

            <f:comment>
                Using rel="preload" we can load this stylesheet very early in supporting browsers.
                Using media="print" and exchanging the value to screen on load, we wait until the stylesheet has been downloaded and apply styles only then.
                As this solution requires JavaScript, we fall back to a noscript block with native stylesheet loading.
            </f:comment>
            <link rel="preload"
            href="{vh:uri.resource(path: 'Stylesheets/main.css', package: 'Newland.CityTheme')}"
            as="style">

            <link rel="stylesheet"
            href="{vh:uri.resource(path: 'Stylesheets/main.css', package: 'Newland.CityTheme')}"
            media="print"
            onload="this.media='screen'">

            <noscript>
                <link rel="stylesheet"
                href="{vh:uri.resource(path: 'Stylesheets/main.css', package: 'Newland.CityTheme')}"
                media="screen">

            </noscript>

            <f:if condition="{siteTrackingCookiebotId} && !{neos:rendering.inBackend()}">
                <f:render partial="CookiebotHead" arguments="{_all}" />
            </f:if>

            <f:if condition="{customHTMLHead}">
                {customHTMLHead -> f:format.raw()}
            </f:if>

            <f:if condition="{siteTrackingGtmId} && {siteTrackingCookiebotId} && !{neos:rendering.inBackend()}">
                <f:render partial="GTMHead" arguments="{_all}" />
            </f:if>

            <f:if condition="{customCSS}">
                <style>
                    {customCSS}
                </style>
            </f:if>


        </f:section>
    </head>
    <body>
        <f:section name="body">
            <f:if condition="{siteTrackingGtmId} || {siteTrackingCookiebotId} && !{neos:rendering.inBackend()}">
                <f:render partial="GTMBody" arguments="{_all}" />
            </f:if>

            <f:if condition="!{neos:rendering.inBackend()}">
                <f:render partial="SiteTracking" arguments="{_all}" />
            </f:if>

            <f:if condition='{siteTrackingEnableCookieBanner} && !{neos:rendering.inBackend()}'>
                <f:render partial="CookieConsent" arguments="{_all}" />
            </f:if>

            <f:if condition="{customHTML}">
                {customHTML -> f:format.raw()}
            </f:if>

            <f:if condition="{scrollIcon}">
                <div class="c-scroll-icon__wrapper" data-scroll-icon="{neos.media:uri.image(image: scrollIcon)}">
                    <!--Scroll Icons will be placed in here-->
                </div>
            </f:if>


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

            <f:if condition="{showHeader -> f:or(alternative: true)}">
                <f:render partial="Header" arguments="{_all}" />
            </f:if>

            <f:if condition="{showNotification} == true">
                <aside aria-label="{f:translate(id: 'notification.title', source: 'Main', package: 'Newland.CityTheme')}">
                    <f:render partial="Notifications" arguments="{_all}" />
                </aside>
            </f:if>

            <main
                id="main-content"
                data-main-content
                role="main"
                class="main{f:if(condition: '{showHero} || {isFrontPage}', then: ' main--hero')}{f:if(condition: '{activateUppercaseForHeadlines}', then: ' main--uppercase')}{f:if(condition: '{headerDecoration} && !{showHero}', then: ' main--decorated-header')}"
            >
                <f:if condition="!{hideHeroLiveSectionAndQuickaccess} && ({showHeroLiveSection} || {showLiveQuickaccess})">
                    <f:render partial="WidgetWeatherIconSprite" arguments="{_all}" />
                </f:if>

                <f:if condition="{showHero}">
                    <f:then>
                        <section class="o-hero-section{f:if(condition: '{heroDecoration}', then: ' o-hero-section--decorated')}">
                            <f:render partial="Hero" arguments="{_all}" />
                                <section class="o-hero-section__addon">
                                    {content.heroContent -> f:format.raw()}
                                </section>
                        </section>
                    </f:then>
                    <f:else>
                        {content.heroContent -> f:format.raw()}
                    </f:else>
                </f:if>

                <f:if condition="!{hideHeroLiveSectionAndQuickaccess} && {showLiveQuickaccess}">
                    <f:render partial="LiveQuickaccess" arguments="{_all}" />
                </f:if>

                <f:if condition="{showBreadcrumbs} && {hideBreadcrumb} == false">
                    {parts.breadcrumbNavigation -> f:format.raw()}
                </f:if>

                <f:if condition="{showIntro}">
                    <f:render partial="Intro" arguments="{_all}" />
                </f:if>

                <f:if condition="{node.nodeType.name} == 'Newland.CityTheme:PressArticle'">
                    <f:render partial="PressArticle" arguments="{_all}" />
                </f:if>

                <f:if condition="{node.nodeType.name} == 'Newland.CityTheme:PressImage'">
                    <f:render partial="PressImage" arguments="{_all}" />
                </f:if>

                {content.main -> f:format.raw()}
            </main>

            <f:if condition="{popupTitle}">
                <aside aria-label="{f:translate(id: 'popup.title', source: 'Main', package: 'Newland.CityTheme')}">
                    <f:render partial="PopUp" arguments="{_all}" />
                </aside>
            </f:if>

            <f:if condition="{showScrollToTopButton}">
                <f:render partial="ScrollToTopButton" arguments="{_all}" />
            </f:if>

            <f:if condition="{altMetaMenu}">
                <f:render partial="Quickaccess" arguments="{_all}" />
            </f:if>

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

            <f:if condition="{showFooter -> f:or(alternative: true)}">
                <f:render partial="{f:if(condition: useDividedFooter, then: 'DividedFooter', else: 'Footer')}" arguments="{_all}" />
            </f:if>

            <f:if condition="{activateWiifChat}">
                <f:render partial="WiifChat" arguments="{_all}" />
            </f:if>
        </f:section>

        <f:section name="bodyScripts">
            <script async src="{vh:uri.resource(path: 'Scripts/main.js', package: 'Newland.CityTheme')}"></script>
            <script async src="{vh:uri.resource(path: 'Scripts/sitetracking.js', package: 'Newland.CityTheme')}"></script>
        </f:section>
    </body>
</html>
