<!DOCTYPE html>
<html lang="{{ locale }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>{{ title }}</title>
        <meta name="description" content="{{ description }}">

        {% for meta in metaTags -%}
            <meta{% for attribute,value in meta %} {{ attribute }}="{{ value }}"{% endfor %} />
        {% endfor %}

        {% if favIcon -%}
            <link rel="shortcut icon" href="{{ favIcon }}" type="image/x-icon" />
        {% endif %}

        {% for script in inlineScripts -%}
            <script nonce="{{ nonce }}">
                {{- script|raw -}}
            </script>
        {% endfor %}

        {% for script in scripts -%}
            <script nonce="{{ nonce }}" defer src="{{ script.getWebPath() }}"></script>
        {% endfor %}

        {%- if breadcrumbsJson -%}
            <script type="application/ld+json">
                {{- breadcrumbsJson|raw -}}
            </script>
        {%- endif -%}

        {% for stylesheet in styles -%}
            <link href="{{ stylesheet.getWebPath() }}" rel="stylesheet" type="text/css" />
        {% endfor -%}

        {{ preloadModel.renderHtml()|raw }}

        {%- if canonicalUrl -%}
            <link rel="canonical" href="{{ canonicalUrl }}"/>
        {%- endif -%}

        <noscript>
            <style>
                .fullPageLoader { display: none }
            </style>
        </noscript>

    </head>
    <body class="{{ cssClasses|join(' ') }}">
        <div id="page" class="page">
            {%- if header -%}
                <noscript id="themeHeader">
                    {{ header|raw }}
                </noscript>
            {%- endif -%}
            <header id="titleBar"></header>
            <div id="app" class="page-minHeight">
            {%- if seoContent -%}
                <noscript>
                    <style>
                        body.isLoading .page {
                            max-height: initial;
                            height: initial;
                        }
                    </style>
                    <h1 class="heading heading-1 pageTitle">
                        {{- title -}}
                    </h1>
                    {{- seoContent|raw }}
                </noscript>
            {%- endif -%}

                <div class="fullPageLoader"></div>
            </div>
            {%- if footer -%}
                <noscript id="themeFooter">{{ footer|raw }}</noscript>
            {%- endif -%}
        </div>
        <div id="modals"></div>
    </body>
</html>
