{# Sidebar navigation component.
   Included in base.html when user is authenticated.
   Responsive: hidden on mobile, toggleable via hamburger.
   Alpine.js x-data on wrapper manages open/close state. #}

<div x-data="{ sidebarOpen: false }">

  {# Mobile hamburger button (visible < 1024px) #}
  <button
    @click="sidebarOpen = !sidebarOpen"
    class="fixed top-4 left-4 z-50 lg:hidden bg-slate-800 text-white p-2 rounded shadow-lg"
    aria-label="Toggle sidebar"
  >
    <svg x-show="!sidebarOpen" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4 6h16M4 12h16M4 18h16"/>
    </svg>
    <svg x-show="sidebarOpen" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M6 18L18 6M6 6l12 12"/>
    </svg>
  </button>

  {# Overlay (mobile only) #}
  <div
    x-show="sidebarOpen"
    @click="sidebarOpen = false"
    x-transition:enter="transition-opacity ease-out duration-200"
    x-transition:enter-start="opacity-0"
    x-transition:enter-end="opacity-100"
    x-transition:leave="transition-opacity ease-in duration-150"
    x-transition:leave-start="opacity-100"
    x-transition:leave-end="opacity-0"
    class="lg:hidden fixed inset-0 bg-black/50 z-30"
  ></div>

  {# Sidebar #}
  <aside
    id="sidebar"
    :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full'"
    class="fixed lg:static lg:translate-x-0 z-40 flex flex-col w-64 min-h-screen bg-slate-800 text-white transition-transform duration-200 ease-in-out"
  >
    {# Logo / brand #}
    <div class="px-6 py-5 border-b border-slate-700">
      <a href="/dash/batches" class="text-xl font-bold tracking-tight">
        SporeDB
      </a>
      <p class="text-xs text-slate-400 mt-1">Bioprocess Dashboard</p>
    </div>

    {# Navigation links #}
    <nav class="flex-1 px-3 py-4 space-y-1">
      <a href="/dash/batches" @click="sidebarOpen = false"
         class="flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium transition-colors
                {% if request.url.path.startswith('/dash/batches') %}bg-blue-500/20 text-blue-400{% else %}text-slate-300 hover:bg-slate-700 hover:text-white{% endif %}">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
        </svg>
        Batches
      </a>

      <a href="/dash/compare" @click="sidebarOpen = false"
         class="flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium transition-colors
                {% if request.url.path == '/dash/compare' %}bg-blue-500/20 text-blue-400{% else %}text-slate-300 hover:bg-slate-700 hover:text-white{% endif %}">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
        </svg>
        Compare
      </a>

      <a href="/dash/audit" @click="sidebarOpen = false"
         class="flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium transition-colors
                {% if request.url.path == '/dash/audit' %}bg-blue-500/20 text-blue-400{% else %}text-slate-300 hover:bg-slate-700 hover:text-white{% endif %}">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
        </svg>
        Audit Trail
      </a>

      {% if user.role == 'admin' %}
      <a href="/dash/settings" @click="sidebarOpen = false"
         class="flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium transition-colors
                {% if request.url.path == '/dash/settings' %}bg-blue-500/20 text-blue-400{% else %}text-slate-300 hover:bg-slate-700 hover:text-white{% endif %}">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
        </svg>
        Settings
      </a>
      {% endif %}
    </nav>

    {# User info + logout #}
    <div class="px-6 py-3 border-t border-slate-700">
      <div class="flex items-center justify-between">
        <span class="text-xs text-slate-400 truncate">{{ user.email if user else '' }}</span>
        <a href="/dash/logout" class="text-xs text-slate-400 hover:text-white">Logout</a>
      </div>
      <p class="text-xs text-slate-500 mt-1">SporeDB v0.1.0</p>
    </div>
  </aside>
</div>