{# Quick-switch user bar — persistent at top of every page #}
{% load scoped_tags %}
{% if demo_users %}
<div class="fixed top-0 left-0 right-0 z-50 bg-slate-900 text-white h-12 flex items-center px-4 shadow-lg">
  <span class="text-xs font-medium text-slate-400 mr-4 uppercase tracking-wider">Demo User</span>
  <div class="flex items-center gap-2">
    {% for u in demo_users %}
    <a href="{% url 'switch_user' u.id %}"
       class="flex items-center gap-1.5 px-3 py-1 rounded-full text-sm transition-all
              {% if user.id == u.id %}bg-brand-600 text-white shadow-md{% else %}bg-slate-700 text-slate-300 hover:bg-slate-600{% endif %}">
      <span class="w-2 h-2 rounded-full {% if user.id == u.id %}bg-green-400{% else %}bg-slate-500{% endif %}"></span>
      {{ u.first_name|default:u.username }}
    </a>
    {% endfor %}
  </div>
  <div class="ml-auto flex items-center gap-4">
    {% if scoped_principal %}
    <span class="text-xs text-slate-400">
      Principal: <span class="text-slate-200 font-mono">{{ scoped_principal.id|truncate_id:12 }}</span>
      &middot; {{ scoped_principal.kind }}
    </span>
    {% endif %}
    <a href="{% url 'logout' %}" class="text-xs text-slate-400 hover:text-white">Logout</a>
  </div>
</div>
{% endif %}