{% load static %}

<div class="px-0">
    <div class="navbar navbar-expand-lg bg-body-secondary">
        <div class="container-fluid">
            <a href="/" class="navbar-brand">
                <img src="{% static '/images/pyrss_logo.webp' %}" alt="Logo" width="50" class="d-inline-block">
            </a>
            <button type="button" class="navbar-toggler" data-bs-toggle="offcanvas" data-bs-target="#navCollapse" aria-controls="navCollapse" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div id="navCollapse" class="offcanvas offcanvas-end bg-body-secondary" tabindex="-1" aria-labelledby="navCollapseLabel">
                <div class="offcanvas-header">
                    <h5 id="navCollapseLabel" class="offcanvas-title">PYRSS</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                </div>
                <div class="offcanvas-body">
                    <ul class="navbar-nav justify-content-end align-items-stretch flex-grow-1">
                        <!-- <li class="nav-item w-lg-100">
                            <button type="button" id="themeToggle" class="navbar-btn">
                                <i class="bi bi-sun"></i>
                                <span class="d-lg-none ms-2 text-body-secondary">Change Theme</span>
                            </button>
                        </li> -->

                        {% if request.user.is_authenticated %}
                        <li class="nav-item w-lg-100">
                            <div class="dropdown">
                                <button type="button" class="dropdown-toggle navbar-btn" data-bs-toggle="dropdown" data-bs-auto-close="outside">
                                    <img src="{{ request.user.avatar_url }}" alt="User Icon" width="30" class="rounded-circle me-2">
                                    <span>{{ request.user.global_name }}</span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-end rounded-1">
                                    <li>
                                        <h6 class="dropdown-header d-flex justify-content-between">
                                            <span>@{{ request.user.username }}</span>
                                            <div class="vr mx-3"></div>
                                            <span>{{ request.user.id }}</span>
                                        </h6>
                                    </li>
                                    <li><hr class="dropdown-divider"></li>
                                    <li>
                                        {% comment %}<!-- Logout only accepts POST requests -->{% endcomment %}
                                        <form action="/logout/" method="post" class="m-0">
                                            {% csrf_token %}
                                            <button type="submit" class="dropdown-item py-2">
                                                <i class="bi bi-arrow-left-short"></i><span class="ms-2">Logout</span>
                                            </button>
                                        </form>
                                    </li>
                                    {% if request.user.is_superuser %}
                                    <li>
                                        <a href="/admin/" class="dropdown-item py-2" target="_blank">
                                            <i class="bi bi-person-check-fill"></i><span class="ms-2">Admin Interface</span>
                                        </a>
                                    </li>
                                    {% endif %}
                                </ul>
                            </div>
                        </li>
                        {% endif %}
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>