<!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 http-equiv="x-ua-compatible" content="ie=edge" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />

            <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="{useCookiebot}">
                <f:render partial="GTMHead" arguments="{_all}" />
                <f:render partial="CookiebotHead" arguments="{_all}" />
            </f:if>

            <f:if condition="{renderingInBackend}">
                Yolo
            </f:if>
        </f:section>
    </head>
    <body>
        <f:section name="body">
            <f:if condition="{useCookiebot}">
                <f:then>
                    <f:render partial="GTMBody" arguments="{_all}" />
                </f:then>
                <f:else>
                    <f:render partial="SiteTracking" arguments="{_all}" />
                    <f:if condition='{siteTrackingEnableCookieBanner}'>
                        <f:render partial="CookieConsent" arguments="{_all}" />
                    </f:if>
                </f:else>
            </f:if>

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

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

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


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