{% load bootstrap4 %}

<nav class="navbar navbar-expand-lg navbar-dark shadow-lg fixed-top"
     style="background: linear-gradient(90deg, #1e3a8a 0%, #312e81 100%); font-family: 'Poppins', sans-serif; padding: 0.5rem 1rem;">

  <div class="container-fluid">
    <!-- Brand -->
    <a class="navbar-brand fw-bold text-white" href="#">
      🏫 Hostel Management
    </a>

    <!-- Toggle (for mobile) -->
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarMenu"
      aria-controls="navbarMenu" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- Menu Items -->
    <div class="collapse navbar-collapse justify-content-center" id="navbarMenu">
      <ul class="navbar-nav align-items-center">

        {% if request.user.is_superuser %}
        <li class="nav-item mx-2">
          <a class="nav-link text-white" href="{% url 'main:user_registration' %}">
            <i class="fas fa-user-plus me-1"></i> Register User
          </a>
        </li>

        <li class="nav-item mx-2">
          <a class="nav-link text-white" href="{% url 'main:admin_dashboard' %}">
            <i class="fas fa-tachometer-alt me-1"></i> Admin Dashboard
          </a>
        </li>

        <li class="nav-item mx-2">
          <a class="nav-link text-white" href="{% url 'main:admin_details' %}">
            <i class="fas fa-user-cog me-1"></i> Admin Details
          </a>
        </li>

        <li class="nav-item mx-2">
          <a class="nav-link text-white" href="{% url 'main:student_leave' %}">
            <i class="fas fa-plane-departure me-1"></i> Student Leave
          </a>
        </li>

        <li class="nav-item mx-2">
          <a class="nav-link text-white" href="{% url 'main:hostel_staff_details' %}">
            <i class="fas fa-users me-1"></i> Hostel Staff
          </a>
        </li>

        <li class="nav-item mx-2">
          <a class="nav-link text-white" href="{% url 'main:add_hostel' %}">
            <i class="fas fa-building me-1"></i> Add Hostel
          </a>
        </li>

        <li class="nav-item mx-2">
          <a class="nav-link text-white" href="{% url 'main:add_school_fees' %}">
            <i class="fas fa-money-check-alt me-1"></i> Fee Payment
          </a>
        </li>

        <li class="nav-item mx-2">
          <a class="nav-link text-white" href="{% url 'main:fees_records' %}">
            <i class="fas fa-file-invoice-dollar me-1"></i> Fee Records
          </a>
        </li>

        <li class="nav-item mx-2">
          <a class="nav-link text-white" href="{% url 'main:student_details' %}">
            <i class="fas fa-user-graduate me-1"></i> Student Details
          </a>
        </li>
        {% endif %}

        <li class="nav-item mx-2">
          <a class="nav-link text-white" href="{% url 'main:mess_details' %}">
            <i class="fas fa-utensils me-1"></i> Mess Details
          </a>
        </li>

        <li class="nav-item mx-2">
          <a class="nav-link text-white" href="{% url 'main:student_dashboard' %}">
            <i class="fas fa-user-circle me-1"></i> Student Dashboard
          </a>
        </li>

        <li class="nav-item mx-2">
          <a class="nav-link text-danger fw-semibold" href="{% url 'accounts:log_out' %}">
            <i class="fas fa-sign-out-alt me-1"></i> Log Out
          </a>
        </li>

      </ul>
    </div>
  </div>
</nav>

<!-- 🎨 Navbar Styling -->
<style>
  /* Remove top space (fully stick to top) */
  body {
    margin: 0;
    padding-top: 56px; /* To prevent content from hiding under navbar */
  }

  .navbar {
    margin: 0 !important;
    border: none !important;
  }

  .navbar-nav .nav-link {
    font-weight: 500;
    letter-spacing: 0.3px;
    transition: all 0.3s ease;
    border-radius: 10px;
    padding: 8px 14px;
  }

  .navbar-nav .nav-link:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #facc15 !important;
    transform: translateY(-2px);
  }

  .navbar-brand {
    font-size: 1.25rem;
    letter-spacing: 0.5px;
  }

  /* Active link highlight */
  .navbar-nav .nav-link.active {
    background: rgba(255, 255, 255, 0.2);
    color: #fbbf24 !important;
  }

  /* Responsive collapse */
  @media (max-width: 991px) {
    .navbar-collapse {
      background: rgba(17, 24, 39, 0.95);
      border-radius: 12px;
      padding: 10px;
      text-align: center;
    }

    .navbar-nav .nav-link {
      display: block;
      margin: 6px 0;
    }
  }
</style>