<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        {{ pwa() }}
        <title>{% block title %}Torsearch{% 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>sf</text></svg>">
        {% block stylesheets %}
            <link rel="stylesheet" href="{{ asset('styles/app.css') }}">
        {% endblock %}

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

            {% if sentry_enabled() %}
                <script src="{{ sentry_javascript_url }}" crossorigin="anonymous"></script>
            {% endif %}
            <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.19/index.global.min.js'></script>
        {% endblock %}
    </head>
    <body class="flex flex-col bg-stone-700">
        <div class="grid md:grid-cols-6">
            <div class="hidden md:block md:col-span-1 md:h-screen">
                <twig:NavBar />
            </div>
            <div class="col-span-6 md:col-span-5 h-screen overflow-y-scroll">
                <twig:Header />
                <div class="flex flex-col md:flex-row justify-between md:items-center">
                    <h2 class="px-4 mt-4 mb-4 md:mb-2 text-3xl font-bold text-gray-50">{% block h2 %}{% endblock %}</h2>
                    <div class="flex mx-4 mb-2 md:mt-4 gap-2 items-center grow-0 md:px-4">
                        {% block action_buttons %}{% endblock %}
                    </div>
                </div>
                {% block body %}{% endblock %}
            </div>
        </div>
        <twig:PreviewModal id="previewModal" />
    </body>
</html>
