<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Welcome!{% endblock %}</title>
        <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22></text><text y=%221.3em%22 x=%220.2em%22 font-size=%2276%22 fill=%22%23fff%22>AD</text></svg>">
        {% block stylesheets %}
        {% endblock %}

        {% block javascripts %}
            {% block importmap %}{{ importmap('main') }}{% endblock %}
        {% endblock %}

        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="turbo-prefetch" content="false">

        {% set frankenphpHotReload = app.request.server.get('FRANKENPHP_HOT_RELOAD') %}
        {% if frankenphpHotReload %}
        <meta name="frankenphp-hot-reload:url" content="{{ frankenphpHotReload }}">
        <script src="https://cdn.jsdelivr.net/npm/idiomorph"></script>
        <script src="https://cdn.jsdelivr.net/npm/frankenphp-hot-reload/+esm" type="module"></script>
        {% endif %}

        <!-- Metatags -->
        <meta name="title" content="{% block metatitle %}{% endblock %}" />
        <meta name="description" content="{% block metadescription %}{% endblock %}" />

        <meta property="og:type" content="website" />
        <meta property="og:url" content="{% block ogurl %}{% endblock %}" />
        <meta property="og:title" content="{% block ogtitle %}{% endblock %}" />
        <meta property="og:description" content="{% block ogdescription %}{% endblock %}" />
        <meta property="og:image" content="{% block ogimage %}{% endblock %}" />

        <!-- X (Twitter) -->
        <meta property="twitter:card" content="summary_large_image" />
        <meta property="twitter:url" content="{% block twitterurl %}{% endblock %}" />
        <meta property="twitter:title" content="{% block twittertitle %}{% endblock %}" />
        <meta property="twitter:description" content="{% block twitterdescription %}{% endblock %}" />
        <meta property="twitter:image" content="{% block twitterimage %}{% endblock %}" />

    </head>
    <body class="secondary layout--v1 {{ app.user ? 'auth': '' }}">
        <div id="root">
            <header>
                {% block menu %}
                    {{ include('front/menu/menu.html.twig') }}
                {% endblock %}
            </header>
            <main>
                {% block body %}{% endblock %}
            </main>
        </div>
        <div class="overlay"></div>
    </body>
</html>
