<!-- =============================================================
     FIX 1: templates/includes/navbar.html
     Replace the user dropdown section (lines ~17-30) with this.
     Shows the actual user role (e.g. "Head Master", "Bursar")
     instead of always showing "Teacher".
     ============================================================= -->

{% load static %}
<nav class="navbar navbar-expand-lg navbar-dark" style="background: linear-gradient(135deg, #4CAF50, #2E7D32);">
  <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-circle me-1"></i>
            {{ user.get_full_name|default:user.username }}
            {# ── FIX: show real role badge ── #}
            {% 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 dropdown-menu-end">
            {% if user.is_staff or user.is_superuser %}
            <li>
              <a class="dropdown-item" href="/admin/">
                <i class="fas fa-cog me-2"></i>Admin Panel
              </a>
            </li>
            <li><hr class="dropdown-divider"></li>
            {% endif %}
            <li>
              <a class="dropdown-item" href="{% url 'staff:staff_detail' user.staff_profile.pk %}" >
                <i class="fas fa-id-badge me-2"></i>My Profile
              </a>
            </li>
            <li><hr class="dropdown-divider"></li>
            <li>
              <a class="dropdown-item text-danger" href="{% url 'staff:logout' %}">
                <i class="fas fa-sign-out-alt me-2"></i>Logout
              </a>
            </li>
          </ul>
        </li>

        {% else %}
        <li class="nav-item">
          <a class="nav-link" href="{% url 'staff:login' %}">
            <i class="fas fa-sign-in-alt"></i> Login
          </a>
        </li>
        {% endif %}
      </ul>
    </div>
  </div>
</nav>

<!--
  HOW THIS FIXES THE BUG:
  ========================
  The old navbar showed a hardcoded "Teacher" label because it was using
  `user.user_type` which defaults to 'teacher' in CustomUser.

  This fix uses TWO sources in priority order:
    1. user.staff_profile.get_role_display  → the Staff model role
       (e.g. "Head Master", "Bursar", "Proprietor", "Driver")
    2. user.get_user_type_display           → the CustomUser user_type
       (fallback for users without a Staff profile record)

  The badge is colour-coded:
    - warning (yellow)  → staff with a Staff profile record
    - info    (teal)    → users without a Staff profile (super-admins, etc.)

  No backend change is needed — both .staff_profile and .user_type are
  already on the user object via the related_name in Staff.user (OneToOneField).
-->