{% set site_name = site_name|default('RueduProf') %}
{% set nav_items = nav_items|default([]) %}

{% set nav_items = nav_items|default([
    {'label': 'Cours particuliers', 'href': app.request.getSchemeAndHttpHost() ~ path('app_home_page')},
    {'label': 'Devenir prof', 'href': app.request.getSchemeAndHttpHost() ~ path('homepage')},
    {'label': 'Blog', 'href': app.request.getSchemeAndHttpHost() ~ path('app_blog_show_index')},

]) %}

{% set header_cta_label = header_cta_label|default('Trouver un prof') %}

{% set header_cta_href %}
{{ app.request.getSchemeAndHttpHost() ~ path('fos_user_registration_register') }}
{% endset  %}

{% set profile = app.user and app.user.profile is defined ? app.user.profile : null %}

{% set avatar = null %}

{% if profile 
    and profile.avatar is defined 
    and profile.avatar 
    and profile.avatar.path is defined 
    and profile.avatar.path 
%}
    {% set avatar = 'https://www.rueduprof.com/uploads/avatar/' ~ profile.avatar.path %}
{% endif %}
<header class="app-header">
    <div class="app-header-inner">

        {# Logo #}
        <a href="{{ path('homepage') }}" class="app-brand" aria-label="Accueil RueduProf">
            <img src="/images/logo-rdp-v2.svg" alt="RueduProf" class="app-brand-logo">
        </a>

        {# Menu desktop #}
        <nav class="app-nav d-none d-xl-flex" aria-label="Navigation principale">
            <ul class="navbar-nav flex-row align-items-center gap-1 mb-0">
                {% for item in nav_items %}
                    <li class="nav-item">
                        <a class="nav-link app-nav-link px-3 fw-medium"
                           href="{{ item.href }}">
                            {{ item.label }}
                        </a>
                    </li>
                {% endfor %}
            </ul>
        </nav>

        {# Actions à droite #}
        <div class="app-header-actions">

            {% if app.user %}

                <a href="{{ path('app_setting_index') }}"
                   class="app-icon-btn d-none d-sm-flex"
                   aria-label="Tableau de bord">
                        <i class="bi bi-bag-fill"></i>
                </a>    
                <a href="{{ path('app_setting_profile') }}" class="app-user">
                    <span class="app-user-name d-none d-lg-inline">
                        <i class="bi bi-person-fill"></i> {{ app.user.email }}
                    </span>
                </a>

            {% else %}

                <a href="{{ path('fos_user_security_login') }}"
                   class="app-login-link d-none d-sm-inline-flex"
                   rel="nofollow">
                    Se connecter
                </a>

                <a href="{{ path('fos_user_registration_register') }}"
                   class="app-cta-link"
                   rel="nofollow">
                     Créer un compte
                </a>

            {% endif %}

            {# Mobile menu #}
            <button class="app-mobile-toggle d-xl-none"
                    type="button"
                    data-bs-toggle="offcanvas"
                    data-bs-target="#mobileNav"
                    aria-controls="mobileNav"
                    aria-label="Ouvrir le menu">
                <i class="bi bi-list"></i>
            </button>

        </div>
    </div>

{# Offcanvas mobile #}
<div class="offcanvas offcanvas-end"
     tabindex="-1"
     id="mobileNav"
     aria-labelledby="mobileNavLabel">

    <div class="offcanvas-header border-bottom">
        <a href="{{ path('homepage') }}" class="app-brand" aria-label="Accueil RueduProf">
            <img src="/images/logo-rdp-v2.svg" alt="RueduProf" class="app-brand-logo-mobile">
        </a>

        <button type="button"
                class="btn-close"
                data-bs-dismiss="offcanvas"
                aria-label="Fermer"></button>
    </div>

    <div class="offcanvas-body mobile-nav-body d-flex flex-column">

        <ul class="navbar-nav gap-1 mb-4">
            {% for item in nav_items %}
                <li class="nav-item">
                    <a class="nav-link fs-6 fw-medium py-2"
                       href="{{ item.href }}">
                        {{ item.label }}
                    </a>
                </li>
            {% endfor %}
        </ul>

        <div class="mobile-nav-bottom mt-auto border-top pt-4">
            {% if app.user %}

                <a href="{{ path('app_setting_index') }}"
                   class="btn btn-outline-secondary w-100 mb-2">
                    Tableau de bord
                </a>

                <a href="{{ path('app_setting_profile') }}"
                   class="btn btn-outline-secondary w-100 mb-2">
                    Mon profil
                </a>

                <a href="{{ path('app_setting_competence') }}"
                   class="btn btn-outline-secondary w-100 mb-2">
                    Mes compétences
                </a>

                <a href="{{ path('app_setting_premium') }}"
                   class="btn btn-primary w-100 mb-2">
                    Devenir premium
                </a>
                <a href="{{ path('fos_user_security_logout') }}"
                   class="btn btn-text w-100">
                    Se déconnecter
                </a>

            {% else %}

                <a href="{{ path('fos_user_security_login') }}"
                   class="btn btn-outline-secondary w-100 mb-2"
                   rel="nofollow">
                    Se connecter
                </a>

                <a href="{{ path('fos_user_registration_register') }}"
                   class="btn btn-dark w-100"
                   rel="nofollow">
                    Créer un compte
                </a>

            {% endif %}
        </div>

    </div>
</div>
</header>
{#
<div class="offcanvas offcanvas-end" tabindex="-1" id="mobileNav" aria-labelledby="mobileNavLabel">
    <div class="offcanvas-header border-bottom">
        <h5 class="offcanvas-title fw-bold" id="mobileNavLabel">{{ site_name }}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Fermer"></button>
    </div>
    <div class="offcanvas-body d-flex flex-column">
        <ul class="navbar-nav gap-2 mb-4">
            {% for item in nav_items %}
                <li class="nav-item">
                    <a class="nav-link fs-5" href="{{ item.href }}">{{ item.label }}</a>
                </li>
            {% endfor %}
        </ul>
        <div class="mt-auto">
            <a href="{{ header_cta_href }}" class="btn btn-primary btn-lg w-100 btn-pill">{{ header_cta_label }}</a>
        </div>
    </div>
</div>
#}