{% load static %}
<ul class="dropdown-menu dropdown-menu-xl dropdown-menu-end px-0">

  <!-- Header with avatar -->
  <li class="user-header">
    {% if request.user.picture %}
      <img src="{{ request.user.picture.url }}" class="user-image rounded-circle shadow" alt="User Image">
    {% elif request.user.member.picture %}
      <img src="{{ request.user.member.picture.url }}" class="user-image rounded-circle shadow" alt="User Image">
    {% else %}
      <span style="width:60px;height:60px;background:rgba(255,255,255,0.2);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:28px;color:#fff;border:2px solid rgba(255,255,255,0.3);">
        <i class="bi bi-person-fill"></i>
      </span>
    {% endif %}
    <h4>{{ request.user.rank.name }} {{ request.user.name }}</h4>
  </li>

  <!-- Info body -->
  <li class="user-body">
    <h2><i class="bi bi-info-circle me-1" style="color:#1565c0;"></i>Account Info</h2>
    <p><i class="bi bi-envelope me-2" style="color:#64748b;"></i><strong>Email:</strong> {{ request.user.email }}</p>
    {% if request.user.army_no %}
    <p><i class="bi bi-hash me-2" style="color:#64748b;"></i><strong>BA No:</strong> {{ request.user.army_no }}</p>
    {% endif %}
    <p><i class="bi bi-shield me-2" style="color:#64748b;"></i><strong>Role:</strong> {{ request.user.role.name }}</p>
    {% if request.user.battalion %}
    <p><i class="bi bi-building me-2" style="color:#64748b;"></i><strong>Unit:</strong> {{ request.user.battalion.name }}</p>
    {% endif %}
  </li>

  <!-- Footer actions -->
  <li class="user-footer d-flex justify-content-between align-items-center">
    <a href="{% url 'change_password' %}" class="btn btn-sm btn-outline-secondary">
      <i class="bi bi-key me-1"></i>Change Password
    </a>
    <a href="{% url 'doLogout' %}" class="btn btn-sm btn-danger">
      <i class="bi bi-box-arrow-right me-1"></i>Sign Out
    </a>
  </li>

</ul>