{% set sm_route = app.request.attributes.get('_route') ?? '' %}
{% set sm_area =
    sm_route == 'api_data' ? 'overview' :
    sm_route starts with 'container_' ? 'container' :
    (sm_route starts with 'admin_inspection_template' or sm_route starts with 'admin_lilian_labs' or sm_route starts with 'admin_water_comparison') ? 'water' :
    (sm_route starts with 'calendar_' or sm_route starts with 'admin_appointment_types') ? 'appointments' :
    sm_route starts with 'signage_' ? 'signage' :
    (sm_route starts with 'admin_user' or sm_route starts with 'admin_settings' or sm_route starts with 'admin_todo' or sm_route == 'changelog') ? 'admin' :
    ''
%}
<header class="sm-topbar">
    <div class="sm-topbar-inner">
        <a class="sm-brand" href="{{ path('api_data') }}">
            <img src="{{ asset('images/swimmonitor-mark.svg') }}" alt="">
            <span class="sm-brand-name">Swim<span>Monitor</span></span>
            <span class="sm-brand-version">2.0</span>
        </a>

        {% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}
            <button class="sm-nav-toggle" type="button" data-sm-nav-toggle aria-expanded="false">Menü</button>

            <ul class="sm-menu">
                <li><a href="{{ path('api_data') }}" class="{{ sm_area == 'overview' ? 'active' }}">Übersicht</a></li>

                {% set sm_containers = sm_nav_containers() %}
                {% if sm_containers is not empty %}
                    <li class="dropdown">
                        <button type="button" class="{{ sm_area == 'container' ? 'active' }}" data-bs-toggle="dropdown" aria-expanded="false">Container <i class="sm-caret"></i></button>
                        <ul class="dropdown-menu">
                            {% set sm_current_id = app.request.attributes.get('id') %}
                            {% for c in sm_containers %}
                                <li><a class="dropdown-item{{ sm_area == 'container' and sm_current_id == c.id ? ' active' }}" href="{{ path('container_show', {id: c.id}) }}">{{ c.name }}</a></li>
                            {% endfor %}
                        </ul>
                    </li>
                {% endif %}

                {% if is_granted('ROLE_ADMIN') or is_granted('ROLE_SUPERADMIN') %}
                    <li class="dropdown">
                        <button type="button" class="{{ sm_area == 'water' ? 'active' }}" data-bs-toggle="dropdown" aria-expanded="false">Wasser <i class="sm-caret"></i></button>
                        <ul class="dropdown-menu">
                            {% if is_granted('ROLE_SUPERADMIN') %}
                                <li><a class="dropdown-item{{ sm_route starts with 'admin_water_comparison' ? ' active' }}" href="{{ path('admin_water_comparison_index') }}">Wasservergleich</a></li>
                            {% endif %}
                            {% if is_granted('ROLE_ADMIN') %}
                                <li><a class="dropdown-item{{ sm_route starts with 'admin_inspection_template' ? ' active' }}" href="{{ path('admin_inspection_template_index') }}">Inspektionsvorlagen</a></li>
                            {% endif %}
                            {% if is_granted('ROLE_SUPERADMIN') %}
                                <li><a class="dropdown-item{{ sm_route starts with 'admin_lilian_labs' ? ' active' }}" href="{{ path('admin_lilian_labs_index') }}">Lilian Labs</a></li>
                            {% endif %}
                        </ul>
                    </li>
                {% endif %}

                {% if is_granted('ROLE_SUPERADMIN') %}
                    <li class="dropdown">
                        <button type="button" class="{{ sm_area == 'appointments' ? 'active' }}" data-bs-toggle="dropdown" aria-expanded="false">Termine <i class="sm-caret"></i></button>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item{{ sm_route starts with 'calendar_' ? ' active' }}" href="{{ path('calendar_index') }}">Kalender</a></li>
                            <li><a class="dropdown-item{{ sm_route starts with 'admin_appointment_types' ? ' active' }}" href="{{ path('admin_appointment_types_index') }}">Terminarten</a></li>
                        </ul>
                    </li>
                {% endif %}

                {% if is_granted('ROLE_SIGNAGE_VIEWER') %}
                    <li><a href="{{ path('signage_device_index') }}" class="{{ sm_area == 'signage' ? 'active' }}">Signage</a></li>
                {% endif %}

                {% if is_granted('ROLE_ADMIN') or is_granted('ROLE_BOOKING_ADMIN') or is_granted('ROLE_SUPERADMIN') or is_granted('ROLE_DEVELOPER') %}
                    <li><a href="{{ path('admin_dashboard') }}">Buchungssystem</a></li>
                {% endif %}

                <li class="dropdown">
                    <button type="button" class="{{ sm_area == 'admin' ? 'active' }}" data-bs-toggle="dropdown" aria-expanded="false">Administration <i class="sm-caret"></i></button>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item{{ sm_route == 'admin_user_index' or sm_route == 'admin_user_edit' ? ' active' }}" href="{{ path('admin_user_index') }}">Benutzer</a></li>
                        <li><a class="dropdown-item{{ sm_route == 'admin_user_register' ? ' active' }}" href="{{ path('admin_user_register') }}">Neuer Benutzer</a></li>
                        <li><a class="dropdown-item{{ sm_route starts with 'admin_settings' ? ' active' }}" href="{{ path('admin_settings') }}">Einstellungen</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item{{ sm_route starts with 'admin_todo' ? ' active' }}" href="{{ path('admin_todo_index') }}">To-Do</a></li>
                        <li><a class="dropdown-item{{ sm_route == 'changelog' ? ' active' }}" href="{{ path('changelog') }}">Changelog</a></li>
                    </ul>
                </li>
            </ul>
        {% endif %}

        <div class="sm-tools">
            <div class="sm-theme-switch" role="group" aria-label="Darstellung">
                <button type="button" data-sm-theme-value="light">Hell</button>
                <button type="button" data-sm-theme-value="dark">Dunkel</button>
                <button type="button" data-sm-theme-value="auto">Auto</button>
            </div>

            {% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}
                <div class="dropdown">
                    <a class="sm-user" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        <span class="sm-initials">
                            {%- if app.user.avatar -%}
                                <img src="{{ path('avatar_serve', {filename: app.user.avatar}) }}" alt="">
                            {%- else -%}
                                {{ (app.user.firstName|first ~ app.user.lastName|first)|upper }}
                            {%- endif -%}
                        </span>
                        {{ app.user.firstName }} {{ app.user.lastName }}
                    </a>
                    <ul class="dropdown-menu dropdown-menu-end">
                        <li class="sm-dropdown-meta">{{ app.user.email }}</li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item" href="{{ path('admin_user_edit', {id: app.user.id}) }}">Profil bearbeiten</a></li>
                        <li>
                            <form method="post" action="{{ path('app_logout') }}">
                                <button type="submit" class="dropdown-item is-alarm">Abmelden</button>
                            </form>
                        </li>
                    </ul>
                </div>
            {% else %}
                <a class="sm-nav-button" href="{{ path('app_login') }}">Anmelden</a>
            {% endif %}
        </div>
    </div>
</header>