<nav class="site-nav">
    <div class="brand">
        <div class="brand-title">
            {% if settings.site_logo %}<img src="{{ settings.site_logo.url }}" alt="{{ settings.site_name|default:'Logo' }}" class="logo" style="max-height:64px; height:auto; vertical-align:middle;">{% endif %}
            <span class="site-title">Partir de zéro</span>
        </div>
        <span class="subtitle comment">/* Anthony Violet */</span>
    </div>
    <button id="navToggle" class="nav-toggle button button-ghost" aria-label="Ouvrir le menu" aria-controls="primaryNav" aria-expanded="false">
        <i class="fa-solid fa-bars"></i>
    </button>
    <div id="primaryNav" class="navbar" aria-label="Navigation principale">
        <ul id="menu">
            <li><a href="/" class="house"><i class="fa-solid fa-house"></i></a></li>
            <li>
                <a href="{% url 'courses:list' %}">Les cours</a>
                <ul>
                    {% for course in courses %}
                        <li><a href="{% url 'courses:show' course.name|slugify course.id %}">{{ course.name }}</a></li>
                    {% endfor %}
                </ul>
            </li>
            <!--<li><a href="">Tutoriels</a></li>-->
            <li><a href="{% url 'blog:blog' %}">Blog</a></li>
        </ul>
        <div class="navend">
            <ul>
                <li>
                    <a href="{% url 'profile' %}"><i class="fa-solid fa-user"></i></a>
                    <ul>
                        <!-- Si l'utilisateur est connecté -->
                         {% if user.is_authenticated %}
                            <li><a href="{% url 'profile' %}">Profil</a></li>
                            <li><a href="{% url 'user_courses' %}">Mes cours</a></li>
                            <li><a href="{% url 'logout' %}">Déconnexion</a></li>
                        <!-- Sinon -->
                        {% else %}
                            <li><a href="{% url 'login' %}">Connexion</a></li>
                            <li><a href="{% url 'register' %}">Inscription</a></li>
                        {% endif %}
                    </ul>
                </li>
                {% if user.is_authenticated and user.is_staff %}
                <li>
                    <a href="{% url 'admin:index' %}" class="button button-danger" title="Administration">Admin</a>
                </li>
                {% endif %}
                <li>
                    {% if user.is_authenticated %}
                        <!-- On affiche le pseudo -->
                         {{ request.user.username }}
                    {% else %}
                        <!-- Sinon on affiche un lien de connexion -->
                        Visiteur
                    {% endif %}
                </li>
                <li>
                    <button id="themeToggle" class="button button-ghost" aria-label="Basculer le thème" title="Basculer le thème">
                        <i class="fa-solid fa-sun"></i>
                    </button>
                </li>
            </ul>
        </div>
        <!-- <div class="navend"><a><i class="fa-solid fa-moon"></i></a></div> -->
    </div>
</nav>