<!-- templates/includes/navbar.html -->
{% load static %}
<nav class="navbar navbar-expand-lg navbar-dark" style="background: linear-gradient(135deg, #4CAF50, #2196F3);">
    <div class="container">
        <a class="navbar-brand" href="/">
            <img src="{% static 'admin/img/logo-yellow.jpeg' %}" alt="Logo" height="40" class="me-2">
            <span class="fw-bold">Rapha-Bethel BNPS</span>
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item">
                    <a class="nav-link" href="/"><i class="fas fa-home"></i> Home</a>
                </li>
                {% if user.is_authenticated %}
                <li class="nav-item">
                    <a class="nav-link" href="/dashboard/"><i class="fas fa-tachometer-alt"></i> Dashboard</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
                        <i class="fas fa-user"></i><!-- {{ user.username }}-->
                        {{ user.get_full_name|default:user.username }}

                        {% if user.staff_profile %}
                          <span class="badge bg-warning text-dark ms-1" style="font-size:0.7em;">
                            {{ user.staff_profile.get_role_display }}
                          </span>
                        {% elif user.user_type %}
                          <span class="badge bg-info text-dark ms-1" style="font-size:0.7em;">
                            {{ user.get_user_type_display }}
                          </span>
                        {% endif %}
                    </a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="/admin/"><i class="fas fa-cog"></i> Admin</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li>
                            <form method="post" action="{% url 'staff:logout' %}" style="margin:0">
                                {% csrf_token %}
                                <button type="submit" class="dropdown-item"><i class="fas fa-sign-out-alt"></i> Logout</button>
                            </form>
                        </li>
                    </ul>
                </li>
                {% else %}
                <li class="nav-item">
                    <a class="nav-link" href="/admin/login/"><i class="fas fa-sign-in-alt"></i> Login</a>
                </li>
                {% endif %}
            </ul>
        </div>
    </div>
</nav>