{% set theme_config = attribute(config.themes, config.system.pages.theme) %}
<!DOCTYPE html>
<html lang="{{ grav.language.getActive ?: grav.config.site.default_lang }}">
<head>
{% block head %}
    <meta charset="utf-8" />
    <title>{{ site.title|e('html') }}{% if header.title %} | {{ header.title|e('html') }}{% endif %}</title>

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    {% include 'partials/metadata.html.twig' %}

    <link rel="icon" type="image/png" href="{{ url('theme://images/logo.png') }}" />
    <link rel="apple-touch-icon" sizes="180x180" href="{{ url('theme://images/icons/apple-touch-icon.png') }}">
    <link rel="icon" type="image/png" sizes="32x32" href="{{ url('theme://images/icons/favicon-32x32.png') }}">
    <link rel="icon" type="image/png" sizes="16x16" href="{{ url('theme://images/icons/favicon-16x16.png') }}">
    <link rel="manifest" href="{{ url('theme://images/icons/site.webmanifest') }}">
    <link rel="mask-icon" href="{{ url('theme://images/icons/safari-pinned-tab.svg" color="#00a300') }}">
    <link rel="shortcut icon" href="{{ url('theme://images/icons/favicon.ico') }}">
    <meta name="msapplication-TileColor" content="#00a300">
    <meta name="msapplication-config" content="{{ url('theme://images/icons/browserconfig.xml') }}">
    <meta name="theme-color" content="#ffffff">
    <link rel="canonical" href="{{ page.url(true, true) }}" />
{% endblock head %}

{% block stylesheets %}
    {% do assets.addCss('theme://dist/app.css', 100) %}
{% endblock %}

{% block javascripts %}
    {% do assets.addJs('theme://dist/app.js', 100) %}
{% endblock %}

{% block assets_css %}
    {{ assets.css()|raw }}
{% endblock %}
</head>
<body>
    {% set header_page = pages.find('/header') %}
    <div id="wrapper" class="d-flex flex-column">
        {% include 'partials/navbar.html.twig' %}
        <div class="content-wrapper flex-fill">
            <header class="p-2 bg-ro text-white">
                <div class="container">
                    <div class="row row-fixed-h mb-2">
                        <a href="/" class="col-12" data-umami-event="Header-Logo button">
                            {% include 'partials/logo.html.twig' with {style: 'filter: invert(100%); margin-right: 0.5rem;'} %}
                            {% for media_item in header_page.media.images %}
                                {% set aspect = media_item.width / media_item.height %}
                                {% set new_height = 160 %}
                                {% set new_width = new_height * aspect %}
                                <img alt="" src="{{ media_item.cropResize(new_width,new_height).quality(75).url }}" />
                            {% endfor %}
                        </a>
                    </div>
                    <div class="row">
                        {{ header_page.content }}
                    </div>
                </div>
            </header>
            <main class="container-fluid clearfix">
                <div class="container py-5">
                    {% block content %}{% endblock %}
                </div>
            </main>
        </div>
        <footer class="container-fluid w-100 bg-ro text-light py-3 content-wrapper">
            {% block footer %}
                <footer class="container-fluid text-light py-3">
                    <div class="row">
                        <p class="mx-auto w-auto">
                            <a href="/impressum">Impressum</a>
                            <span> | </span>
                            <a href="/datenschutzerklaerung">Datenschutzerklärung</a>
                            <span> | </span>
                            <a href="/kontakt">Kontakt</a>
                        </p>
                    </div>
                    <div class="row">
                        <p class="mx-auto w-auto">&#169; Heike Tischler</p>
                    </div>
                </footer>
            {% endblock %}
        </footer>
    </div>

    {% block bottom %}
        {{ assets.js('bottom')|raw }}
    {% endblock %}
</body>

{% block assets_js deferred %}
    {{ assets.js()|raw }}
{% endblock %}

{% if theme_var('umami.enabled') %}
    <script async defer data-website-id="{{ theme_var('umami.id') }}" src="{{ theme_var('umami.url') }}"></script>
{% endif %}

</html>