{% extends 'base.html.twig' %}

{% block body %}
    <div class="max-w-screen-2xl mx-auto px-4 lg:px-8 lg:grid lg:grid-cols-4 gap-8 py-8">
        <div class="lg:col-span-4 flex items-center justify-between pb-4 lg:pb-0">
            <a href="{{ path(app.user ? app.user.defaultRoute : 'app_security_login') }}">
                <img class="h-8 w-auto" src="{{ asset('build/images/logo.svg') }}" alt="My E&amp;P Team">
            </a>
            {% if app.user %}
                <div class="flex items-center space-x-4">
                    {% if app.user.teamer and app.user.teamer.photo %}
                        <a href="{{ path('app_teamer_profile_index') }}" title="Mein Profil">
                            <img src="{{ asset(app.user.teamer.photo | upload_filename_full | imagine_filter('profile')) }}"
                                 class="h-8 w-auto rounded-full"
                                 alt="{{ app.user.teamer.firstName }}">
                        </a>
                    {% elseif is_granted('ROLE_ADMINISTRATIVE') %}
                        <a href="{{ path('app_administrative_profile_index') }}" title="Mein Profil">
                            {{ icon('user', 'w-8 h-8') }}
                        </a>
                    {% endif %}
                    <button type="button"
                            class="lg:hidden"
                            {{ stimulus_controller('mobilenav', [], [], { 'mobilenav': '#mobilenav' }) }}
                            {{ stimulus_action('mobilenav', 'trigger', null, { 'mode': 'open' }) }}>
                        {{ icon('menu', 'w-8 h-8 text-gray-700') }}
                    </button>
                </div>
            {% endif %}
        </div>
        <div class="hidden lg:block">
            {% block main_menu %}{% endblock %}
        </div>
        <div class="lg:col-span-3">
            {% block content %}{% endblock %}
        </div>
    </div>
    <div id="mobilenav"
         class="fixed z-50 top-0 left-0 inset-0 pr-16 bg-black/70 -translate-x-full"
            {{ stimulus_controller('mobilenav', [], { 'closed': '-translate-x-full' }, { 'mobilenav': '#mobilenav' }) }}
    >
        <div class="h-screen w-full bg-white">
            <div class="flex justify-between p-8">
                <img src="{{ asset('build/images/logo.svg') }}" alt="" class="block w-auto h-8">
                <button type="button"
                        {{ stimulus_action('mobilenav', 'trigger', null, { 'mode': 'close' }) }}>
                    {{ icon('close', 'w-8 h-8') }}
                </button>
            </div>
            <div class="w-full h-full p-8 pt-0 overflow-y-scroll">
                {% block mobile_menu %}{% endblock %}
            </div>
        </div>
    </div>
{% endblock %}