<!DOCTYPE html>
<html lang="en">
<head>
    {% block meta %}
        {# This is far from perfect. The response headers should already come with this. #}
        {% if app.request.server.get('APP_ENV') not in ['test', 'dev'] %}
            <meta http-equiv="Content-Security-Policy" content="default-src https:">{% endif %}
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="home" href="/">
    {% endblock %}

    <title>
        {% block title %}{% endblock %}
    </title>

    {% block stylesheets %}
        <link rel='preload' type='text/css' as='style'
              href="{{ asset('assets/default_theme/fonts/opensans/opensans.css') }}">
        <link rel='stylesheet' type='text/css' href="{{ asset('assets/default_theme/fonts/opensans/opensans.css') }}">

        <link rel='preload' type='text/css' as='style'
              href="{{ asset('assets/default_theme/fonts/poppins/poppins.css') }}">
        <link rel='stylesheet' type='text/css' href="{{ asset('assets/default_theme/fonts/poppins/poppins.css') }}">

        <link rel='stylesheet' type='text/css' href="{{ asset('assets/default_theme/css/root.css') }}">
        <link rel='stylesheet' type='text/css' href="{{ asset('assets/default_theme/css/reset.css') }}">
        <link rel='stylesheet' type='text/css' href="{{ asset('assets/default_theme/css/base.css') }}">
        <link rel='stylesheet' type='text/css' href="{{ asset('assets/default_theme/css/widgets/buttons.css') }}">
        <link rel='stylesheet' type='text/css' href="{{ asset('assets/default_theme/css/widgets/sections.css') }}">

        {% for stylesheet in show_stylesheets(app.request.get('_route')) %}
            <link rel='preload' type='text/css' as='style' href="{{ preload(asset(stylesheet), { as: 'style' }) }}">
            <link rel='stylesheet' type='text/css' as='style' href="{{ asset(stylesheet) }}">
        {% endfor %}
    {% endblock %}

    {% for arr in handle_event('ShowHeadElements', app.request) %}
        {# Only one element, but has dynamic value, can't access it directly #}
        {% for type, element in arr %}
            <{{ type }} rel="{{ element['rel'] }}" type="{{ element['type'] }}" href="{{ element['href'] }}" title="{{ element['title'] }}">
        {% endfor %}
    {% endfor %}

    {% for block in handle_event('AppendToHead', app.request) %}
        {{ block | raw }}
    {% endfor %}
</head>

<body>

<aside class="accessibility-menu">
    <strong class="accessibility-menu-title" tabindex="0">{{ 'Accessibility menu' | trans }}</strong>
    <br>
    <section tabindex="0">
        <p>{{ 'Here you can find fast shortcuts to various page regions!' | trans }}</p>
        <br>
        <p>{% trans %}Be mindful that a <em><kbd>Tab</kbd></em> followed by a <em><kbd>Space</kbd></em> is needed in order to focus each panel. Other anchors do only require a <em><kbd>Tab</kbd></em> however.{% endtrans %}</p>
    </section>

    <section tabindex="0">
        <p>{% trans %}The accesskey default shortcut keybinding is as follows: {% endtrans %}</p>
        <p>
            {% if is_firefox() == true %}
                <em><kbd>Alt</kbd> + <kbd>Shift</kbd></em>
            {% else %}
                <em><kbd>Alt</kbd></em>
            {% endif %}
        </p>
    </section>

    <section>
        <a id="anchor-accessibility-menu" accesskey="z" href="#anchor-accessibility-menu">
            <strong>{% trans %}Combined with the previous keybinding, the keyboard key
                    <kbd>Z</kbd> returns focus to this menu.{% endtrans %}</strong>
            <strong>{% trans %}Further access keys are provided via:{% endtrans %}</strong>
        </a>
        <nav>
            <ul>
                <li><a href="#anchor-left-panel" accesskey="s">{% trans %}Left panel is accessed with
                            <kbd>S</kbd>{% endtrans %}</a></li>
                <li><a href="#anchor-main-content" accesskey="n">{% trans %}Main content is accessed with
                            <kbd>N</kbd>{% endtrans %}</a></li>
                <li><a href="#anchor-main-page" accesskey="y">{% trans %}Main instance page is accessed with
                            <kbd>Y</kbd>{% endtrans %}</a></li>
                <li><a href="#anchor-right-panel" accesskey="j">{% trans %}Finally, the right panel is accessed with
                            <kbd>J</kbd>{% endtrans %}</a></li>
            </ul>
        </nav>
    </section>
</aside>

{% block header %}
    <header class="page-header">
        {{ block("leftpanel", "stdgrid.html.twig") }}

        <span class="header-instance">
            <a id="anchor-main-page" class="anchor-hidden"
               title="{{ 'Press tab to access instance\'s main page.' | trans }}"></a>
            <a class="accessibility-target" href="{{ path('feed_public') }}" tabindex="0"
               title="{{ 'This instance\'s name. Access public feed.' | trans }}">
                <h1>{{ icon('logo', 'icon icon-logo') | raw }}{{ config('site', 'name') }}</h1>
            </a>
        </span>

        {{ block("rightpanel", "stdgrid.html.twig") }}
    </header>
{% endblock header %}

<main class="page-content-wrapper">
    <a role="navigation" rel="help" id="anchor-main-content" class="anchor-hidden"
       title="{{ 'Press tab to access main content.' | trans }}"></a>
    <section class='page-content accessibility-target'>
        {% block nav %}{% endblock %}
        {% block body %}{% endblock %}
        {% block javascripts %}{% endblock javascripts %}
    </section>
</main>
</body>
</html>

