{% load static %}
{% load verification_tags %}
<header class="pc-header">
  <div class="header-wrapper">
    <!-- Mobile sidebar toggles -->
    <div class="me-auto pc-mob-drp">
      <ul class="list-unstyled">
        <li class="pc-h-item pc-sidebar-collapse">
          <a href="#" class="pc-head-link ms-0" id="sidebar-hide">
            <i class="ph ph-list"></i>
          </a>
        </li>
        <li class="pc-h-item pc-sidebar-popup">
          <a href="#" class="pc-head-link ms-0" id="mobile-collapse">
            <i class="ph ph-list"></i>
          </a>
        </li>
        <!-- Global Search (mobile dropdown) -->
        <li class="dropdown pc-h-item">
          <a class="pc-head-link dropdown-toggle arrow-none m-0 trig-drp-search" data-bs-toggle="dropdown" href="#" role="button">
            <i class="ph ph-magnifying-glass"></i>
          </a>
          <div class="dropdown-menu pc-h-dropdown drp-search">
            <form method="get" action="{% url 'global_search' %}" class="px-3 py-2">
              <input type="search" name="q" class="form-control border-0 shadow-none"
                placeholder="Search students, staff, classes..."
                value="{% if request.resolver_match.url_name == 'global_search' %}{{ request.GET.q }}{% endif %}" />
            </form>
          </div>
        </li>
      </ul>
    </div>

    <!-- Desktop search -->
    <form method="get" action="{% url 'global_search' %}" class="d-none d-md-flex align-items-center me-3" style="min-width:260px;">
      <div class="input-group input-group-sm">
        <span class="input-group-text bg-transparent border-end-0"><i class="ph ph-magnifying-glass"></i></span>
        <input type="search" name="q" class="form-control border-start-0"
          placeholder="Search students, staff..."
          value="{% if request.resolver_match.url_name == 'global_search' %}{{ request.GET.q }}{% endif %}" />
      </div>
    </form>

    <div class="ms-auto">
      <ul class="list-unstyled">

        <!-- School level switcher -->
        {% if can_switch_school_level %}
        <li class="pc-h-item d-none d-md-inline-flex align-items-center me-2">
          <form method="post" action="{% url 'switch_school_level' %}">
            {% csrf_token %}
            <input type="hidden" name="next" value="{{ request.get_full_path }}">
            <select name="active_school_level" class="form-select form-select-sm" onchange="this.form.submit()">
              {% for level in enabled_school_levels %}
              <option value="{{ level.value }}" {% if level.value == active_school_level %}selected{% endif %}>{{ level.label }}</option>
              {% endfor %}
            </select>
          </form>
        </li>
        {% else %}
        <li class="pc-h-item d-none d-md-inline-flex align-items-center me-2">
          <span class="badge bg-primary-subtle text-primary">{{ active_school_level_label }}</span>
        </li>
        {% endif %}

        <!-- Task Center -->
        <li class="pc-h-item">
          <a href="{% url 'operations_center' %}" class="pc-head-link" title="Task Center">
            <i class="ph ph-compass"></i>
          </a>
        </li>

        <!-- Dark/Light mode toggle -->
        <li class="dropdown pc-h-item">
          <a class="pc-head-link dropdown-toggle arrow-none me-0" data-bs-toggle="dropdown" href="#" role="button">
            <i class="ph ph-sun-dim"></i>
          </a>
          <div class="dropdown-menu dropdown-menu-end pc-h-dropdown">
            <a href="#!" class="dropdown-item" onclick="layout_change('dark')"><i class="ph ph-moon"></i><span>Dark</span></a>
            <a href="#!" class="dropdown-item" onclick="layout_change('light')"><i class="ph ph-sun"></i><span>Light</span></a>
            <a href="#!" class="dropdown-item" onclick="layout_change_default()"><i class="ph ph-cpu"></i><span>Default</span></a>
          </div>
        </li>

        <!-- User profile dropdown -->
        <li class="dropdown pc-h-item header-user-profile">
          <a class="pc-head-link dropdown-toggle arrow-none me-0" data-bs-toggle="dropdown" href="#" role="button" data-bs-auto-close="outside">
            {% if request.user.is_authenticated and request.user.staff_account.staff.staff_photo %}
            <img src="{{ request.user.staff_account.staff.staff_photo.url }}" alt="user" class="user-avtar" style="width:32px;height:32px;border-radius:50%;object-fit:cover;" />
            {% else %}
            <i class="ph ph-user-circle" style="font-size:1.5rem;"></i>
            {% endif %}
          </a>
          <div class="dropdown-menu dropdown-menu-end pc-h-dropdown">
            <div class="dropdown-header">
              <h6 class="mb-0">{{ request.user.username }}</h6>
              <small class="text-muted">{{ active_role|default:request.user.staff_account.role.name|default:"Staff" }}</small>
            </div>
            {% if request.user.is_authenticated %}
            <a class="dropdown-item" href="{% url 'user_detail' request.user.id %}">
              <i class="ph ph-user-circle"></i><span>Profile</span>
            </a>
            {% endif %}
            <a class="dropdown-item" href="{% url 'settings_page' %}">
              <i class="ph ph-gear"></i><span>School Settings</span>
            </a>
            <a class="dropdown-item" href="{% url 'password_change' %}">
              <i class="ph ph-lock-key"></i><span>Change Password</span>
            </a>
            <a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#switchRoleModal">
              <i class="ph ph-user-switch"></i><span>Switch Role</span>
            </a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="{% url 'logout' %}">
              <i class="ph ph-sign-out"></i><span>Logout</span>
            </a>
          </div>
        </li>

      </ul>
    </div>
  </div>
</header>