{% load i18n static admin_stats %}
{% django_admin_js_settings as js_settings %}
<nav class="sticky top-28 h-[calc(100vh-140px)] w-72 shrink-0 border border-slate-300/80 dark:border-zinc-800/80 bg-slate-100/80 dark:bg-zinc-900/60 backdrop-blur-md p-6 overflow-y-auto space-y-6 hidden md:block rounded-2xl ml-0 mb-6 shadow-xl shadow-slate-200/40 dark:shadow-black/30" id="nav-sidebar" aria-label="{% translate 'Sidebar' %}">

  <!-- Mobile User Tools Block -->
  <div class="md:hidden space-y-4 pb-4 border-b border-slate-200 dark:border-zinc-800">
    <div class="flex items-center gap-3 p-2 bg-white/40 dark:bg-zinc-900/20 rounded-xl border border-slate-200/40 dark:border-zinc-850">
      <div class="w-8 h-8 rounded-xl bg-indigo-100 dark:bg-indigo-900/50 text-indigo-750 dark:text-indigo-300 flex items-center justify-center font-bold text-sm shadow-sm">
        {{ user.get_username|slice:":1"|upper }}
      </div>
      <div class="flex flex-col">
        <span class="font-bold text-zinc-800 dark:text-zinc-200 text-xs leading-tight">{% firstof user.get_short_name user.get_username %}</span>
        <span class="text-[9px] text-indigo-650 dark:text-indigo-400 font-semibold uppercase tracking-wider leading-none mt-0.5">Admin</span>
      </div>
    </div>
    
    <div class="flex items-center justify-between px-1">
      <span class="text-xs font-semibold text-zinc-550">Color Mode:</span>
      <div class="flex items-center gap-1.5">
        {% include "admin/color_theme_toggle.html" %}
        {% if js_settings.theme_picker %}
            {% include "admin/color_picker.html" %}
        {% endif %}
      </div>
    </div>
    
    <div class="flex flex-col gap-1.5">
      {% if user.is_active and user.is_staff %}
        {% url 'django-admindocs-docroot' as docsroot %}
        {% if docsroot %}
          <a href="{{ docsroot }}" class="flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-zinc-650 dark:text-zinc-350 hover:bg-slate-200/40 dark:hover:bg-zinc-800/40 text-xs font-bold transition-all animate-fade-in">
            <svg class="w-4 h-4 text-zinc-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" /></svg>
            <span>Documentation</span>
          </a>
        {% endif %}
      {% endif %}
      
      {% if user.has_usable_password %}
        <a href="{% url 'admin:password_change' %}" class="flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-zinc-650 dark:text-zinc-350 hover:bg-slate-200/40 dark:hover:bg-zinc-800/40 text-xs font-bold transition-all animate-fade-in">
          <svg class="w-4 h-4 text-zinc-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z" /></svg>
          <span>Change Password</span>
        </a>
      {% endif %}
      
      <form id="logout-form-mobile" method="post" action="{% url 'admin:logout' %}" class="w-full">
        {% csrf_token %}
        <button type="submit" class="w-full flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-red-500 hover:bg-red-50 dark:hover:bg-red-950/30 text-xs font-bold transition-all text-left cursor-pointer">
          <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75" /></svg>
          <span>Log Out</span>
        </button>
      </form>
    </div>
  </div>

  <div class="space-y-4">
    {% include 'admin/app_list.html' with app_list=available_apps show_changelinks=False %}
  </div>
</nav>