{% load static %}

{% block extrastyle %}
  <style>
    /* =========================== Navbar ========================== */
    
    .navbar {
      transition: all 0.35s ease;
    }
    
    .navbar-brand {
      font-weight: 700;
      transition: all 0.3s ease;
    }
    
    .navbar-brand i {
      transition: transform 0.4s ease;
    }
    
    .navbar-brand:hover {
      color: var(--bs-primary);
    }
    
    .navbar-brand:hover i {
      transform: rotate(-10deg) scale(1.15);
    }
    
    /* ===========================
       Navigation Links
    =========================== */
    
    .navbar-nav .nav-link {
      position: relative;
      font-weight: 500;
      margin: 0 0.35rem;
      padding: 0.75rem 1rem;
      color: #444;
      transition: all 0.35s ease;
    }
    
    /* Underline animation */
    
    .navbar-nav .nav-link::after {
      content: '';
      position: absolute;
      left: 50%;
      bottom: 6px;
      width: 0;
      height: 2px;
      background: var(--bs-primary);
      transform: translateX(-50%);
      transition: width 0.35s ease;
    }
    
    .navbar-nav .nav-link:hover {
      color: var(--bs-primary);
      transform: translateY(-2px);
    }
    
    .navbar-nav .nav-link:hover::after {
      width: 70%;
    }
    
    .navbar-nav .nav-link.active {
      color: var(--bs-primary);
    }
    
    .navbar-nav .nav-link.active::after {
      width: 70%;
    }
    
    /* ===========================
       Dropdown
    =========================== */
    
    .dropdown-menu {
      border: none;
      border-radius: 12px;
      box-shadow: 0 10px 35px rgba(0, 0, 0, 0.12);
    
      opacity: 0;
      visibility: hidden;
    
      display: block;
    
      transform: translateY(15px);
    
      transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    }
    
    /* Desktop hover */
    
    @media (min-width: 992px) {
      .dropdown:hover > .dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
      }
    }
    
    /* Dropdown Items */
    
    .dropdown-item {
      transition: all 0.25s ease;
    }
    
    .dropdown-item:hover {
      padding-left: 1.5rem;
      background: #f8f9fa;
      color: var(--bs-primary);
    }
    
    /* ===========================
       User Icon
    =========================== */
    
    .bi-person-circle {
      transition: transform 0.35s ease;
    }
    
    .nav-link:hover .bi-person-circle {
      transform: rotate(15deg) scale(1.15);
    }
    
    /* ===========================
       Shield Icon
    =========================== */
    
    .bi-shield-lock {
      transition: transform 0.35s ease;
    }
    
    .nav-link:hover .bi-shield-lock {
      transform: scale(1.2);
    }
    
    /* ===========================
       Logout
    =========================== */
    
    .text-danger {
      transition: all 0.3s ease;
    }
    
    .text-danger:hover {
      color: #dc3545 !important;
      padding-left: 1.5rem;
    }
    
    /* ===========================
       Navbar Shadow
    =========================== */
    
    .navbar {
      box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08);
    }
    
    /* ===========================
       Fade Down Animation
    =========================== */
    
    @keyframes fadeDown {
      from {
        opacity: 0;
        transform: translateY(-20px);
      }
    
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    .navbar {
      animation: fadeDown 0.5s ease;
    }
  </style>
{% endblock %}

<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light shadow-sm shadow-sm" style="background-color: #89ceb9;" data-bs-theme="light">
  <div class="container-fluid">
    <a class="navbar-brand" href="{% url 'core:home' %}"><img src="{% static 'images\rccg.jpg' %}" alt="G7 Techserve" class="navbar-brand-image mx-2 rounded-circle img-fluid shadow-lg" height="50" width="50" /> Bursary/Scholarship Award System.</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 justify-content-end" id="navbarNav">
      <ul class="navbar-nav align-items-lg-center">
        <li class="nav-item">
          <a class="nav-link" href="{% url 'core:home' %}">Home</a>
        </li>
        <li class="nav-item">
        <a class="nav-link" href="{% url 'core:about' %}">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="{% url 'core:help_center' %}">Help</a>
        </li>
        <li class="nav-item">
        <a class="nav-link" href="{% url 'core:contact' %}">Contact</a>
        </li>
        {% comment %} <li class="nav-item">
          <a class="nav-link" href="{% url 'core:privacy_policy' %}">Privacy Policy</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="{% url 'core:terms_of_service' %}">Terms of Service</a>
        </li> {% endcomment %}
        <li class="nav-item">
          <a class="nav-link" href="{% url 'core:scholarship_wizard_start' %}">Apllication form</a>
        </li>

        {% if user.is_authenticated %}
          <li class="nav-item">
            <a class="nav-link" href="{% url 'cbt:assessment_list' %}">CBT Exams</a>
          </li>
          {% if user.is_staff or user.is_superuser %}
            <li class="nav-item">
              <a class="nav-link" href="{% url 'core:admin_dashboard' %}"><i class="bi bi-speedometer2"></i> Admin Dashboard</a>
            </li>
            <!-- Assessment management navigation -->
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"><i class="bi bi-shield-lock"></i> Manage</a>
              <ul class="dropdown-menu">
                <li><h6 class="dropdown-header">Assessments</h6></li>
                <li>
                  <a class="dropdown-item" href="{% url 'cbt:assessment_list' %}"><i class="bi bi-clipboard-check me-2"></i>All Assessments</a>
                </li>
                <li>
                  <a class="dropdown-item" href="{% url 'cbt:assessment_create' %}"><i class="bi bi-plus-circle me-2"></i>New Assessment</a>
                </li>
                <li><hr class="dropdown-divider" /></li>
                <li><h6 class="dropdown-header">Question Bank</h6></li>
                <li>
                  <a class="dropdown-item" href="{% url 'cbt:admin_questions_list' %}"><i class="bi bi-question-circle me-2"></i>Questions</a>
                </li>
                <li>
                  <a class="dropdown-item" href="{% url 'cbt:admin_upload_data' %}"><i class="bi bi-upload me-2"></i>Upload Data</a>
                </li>
                <li><hr class="dropdown-divider" /></li>
                <li><h6 class="dropdown-header">Monitoring &amp; Results</h6></li>
                <li>
                  <a class="dropdown-item" href="{% url 'cbt:admin_attempts_list' %}"><i class="bi bi-bar-chart me-2"></i>Assessment Results</a>
                </li>
                <li>
                  <a class="dropdown-item" href="{% url 'cbt:admin_answers_list' %}"><i class="bi bi-check2-square me-2"></i>Answers</a>
                </li>
                <li>
                  <a class="dropdown-item" href="{% url 'cbt:admin_proctor_reports' %}"><i class="bi bi-shield-check me-2"></i>Proctor Reports</a>
                </li>
              </ul>
            </li>
          {% endif %}
          {% if user.is_superuser %}
            <li class="nav-item">
              <a class="nav-link" href="{% url 'core:user_management' %}"><i class="bi bi-people"></i> Users</a>
            </li>
          {% endif %}

          <!-- User Info -->
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"><i class="bi bi-person-circle"></i> {{ user.get_full_name|default:user.username }}</a>
            <ul class="dropdown-menu dropdown-menu-end">
              <li><a class="dropdown-item" href="{% url 'core:profile' %}">
                  <i class="bi bi-person-badge me-2"></i> Profile
                </a>                
              </li>
              <li><a class="dropdown-item" href="{% url 'core:report_issue' %}">
                  <i class="bi bi-exclamation-circle me-2"></i> Report an Issue
                </a>
              </li>
              <li>
                <hr class="dropdown-divider" />
              </li>
              <li>
                <a class="dropdown-item text-danger" href="{% url 'account_logout' %}"><i class="bi bi-box-arrow-right"></i> Logout</a>
              </li>
            </ul>
          </li>
        {% else %}
          <li class="nav-item">
            <a class="nav-link" href="{% url 'account_login' %}">Login</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="{% url 'account_signup' %}">Sign Up</a>
          </li>
        {% endif %}
      </ul>
    </div>
  </div>
</nav>