{% load static i18n %}

<div class="navigation wrapper wrapper--full wrapper--centered column column--spaced column--centered">
    <a class="logo" title="Afficher la page d'accueil" href="{% url 'index' %}">
        <img src="{% static 'img/logo.svg' %}" alt="Logo d'Argel'">
    </a>

    <nav class="menu">
        <button class="menu__btn">
            <span></span>
            <span></span>
            <span></span>
        </button>

        <ul class="column column--spaced column--centered">
            {% with url_name=request.resolver_match.url_name %}
            <li class="menu__el {% if url_name == 'index' %}menu__el--active{% endif %}">
                <a title="Accéder à la page: Accueil" href="{% url 'index' %}">
                    Accueil
                </a>
            </li>

            <li class="menu__el {% if url_name == 'agenda' %}menu__el--active{% endif %}">
                <a title="Accéder à la page: Agenda" href="{% url 'agenda' %}">
                    Agenda
                </a>
            </li>

            <li class="menu__el dropdown">
                <a class="column column--centered menu__el--dropdown {% if url_name == '#' or url_name == 'register' or url_name == 'status' %}menu__el--active{% endif %}" href="#">
                    
                    Association

                    <svg  class="icon" width="11px" height="6px" viewBox="0 0 11 6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                            <g class="icon--color" transform="translate(-1050.000000, -92.000000)" stroke="#73706D">
                                <g transform="translate(80.000000, 29.000000)">
                                    <g transform="translate(871.000000, 52.000000)">
                                        <polyline transform="translate(104.500000, 11.500000) rotate(-495.000000) translate(-104.500000, -11.500000) " points="101 15 101.00875 8.00875 108 8"></polyline>
                                    </g>
                                </g>
                            </g>
                        </g>
                    </svg>
                </a>

                <nav class="dropdown__menu">
                    <ul>
                        <li class="dropdown__menu-el {% if url_name == '#' %}menu__el--active{% endif %} dropdown__submenu">
                            <a title="Accéder à la page: Membres" href="{% url 'members' %}">Membres</a>

                            <ul class="menu--sub">
                                <li>
                                    <a href="{% url 'members_list' committee='comite-directeur' %}" title="Voir le comité directeur">Comité directeur</a>
                                </li>
                                <li>
                                    <a href="{% url 'members_list' committee='comite-verification-des-stages' %}" title="Voir le comité vérification des stages">Comité vérification des stages</a>
                                </li>
                                <li>
                                    <a href="{% url 'members_list' committee='comite-disciplinaire' %}" title="Voir le comité disciplinaire">Comité disciplinaire</a>
                                </li>
                            </ul>
                        </li>

                        <li class="dropdown__menu-el {% if url_name == 'register' %}menu__el--active{% endif %}">
                            <a title="Accéder à la page: S'inscrire" href="{% url 'register' %}">S'inscrire</a>
                        </li>

                        <li class="dropdown__menu-el {% if url_name == 'status' %}menu__el--active{% endif %}">
                            <a title="Accéder à la page: Statuts" href="{% url 'status' %}">Statuts</a>
                        </li>
                    </ul>
                </nav>
            </li>

            <li class="menu__el {% if url_name == 'about' %}menu__el--active{% endif %}">
                <a title="Accéder à la page: Qui sommes-nous?" href="{% url 'about' %}">
                    Qui sommes-nous&nbsp;?
                </a>
            </li>

            <li class="menu__el {% if url_name == 'news' %}menu__el--active{% endif %}">
                <a title="Accéder aux articles" href="{% url 'news' %}">
                    Le Géomètre-Expert
                </a>
            </li>

            <li class="menu__el {% if url_name == 'links' %}menu__el--active{% endif %}">
                <a title="Accéder à la page: Liens" href="{% url 'links' %}">
                    Liens
                </a>
            </li>
            
            {% if can_show_admin is True %}
            <li class="menu__el">
                <a title="Accéder au site d'administration" href="/gdfcm/admin">
                    Admin
                </a>
            </li>
            {% endif %}

            <li class="menu__el dropdown">
                <a class="navigation__user" title="Accéder à mon compte" href="#">
                    <img src="{% static 'img/icon__user.svg' %}" alt="Icône profil">
                </a>

                <div class="dropdown__menu dropdown__menu--account">
                    
                    {% if access_token  %}
                        <a class="btn btn--full" title="{% trans 'Accéder à mon compte' %}" href="{% url 'user_account' %}">{% trans 'Accéder à mon compte' %}</a>
                        <p><a class="link" href="{% url 'logout' %}">{% trans 'Déconnexion' %}</a></p>

                        {% else %}
                        <a class="btn btn--full" title="{% trans 'Se connecter' %}" href="{% url 'login' %}">{% trans 'Se connecter' %}</a>

                        <p> <span class="text--italic">{% trans 'Pas de compte&nbsp;?' %}</span> <a class="link" href="{% url 'register' %}">{% trans 'Je&nbsp;m\'inscris' %}</a></p>
                    {% endif %}
                </div>
                
            </li>
            {% endwith %}
        </ul>
    </nav>
</div>