{% extends "base.html" %}
{% block content %}
<div class="flex h-screen overflow-hidden">

  <!-- Sidebar: Session List -->
  <aside id="sidebar" class="w-80 shrink-0 border-r border-surface-800 flex flex-col bg-surface-950 transition-all duration-200">
    <!-- Header (expanded) -->
    <a href="/" class="sidebar-full block px-5 py-4 border-b border-surface-800 hover:bg-surface-900 transition-colors">
      <div class="flex items-center gap-2.5">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
          <rect x="3" y="3" width="18" height="18" rx="3" fill="#ffd43b" stroke="#fab005" stroke-width="1"/>
          <circle cx="12" cy="12" r="4" fill="#0c1117"/>
        </svg>
        <span class="text-sm font-semibold tracking-wider text-accent-400">blackbox</span>
      </div>
      <p class="text-xs text-gray-600 mt-1 font-mono">session recorder</p>
    </a>
    <!-- Collapsed header -->
    <div class="sidebar-collapsed hidden flex-col items-center border-b border-surface-800">
      <a href="/" class="flex justify-center py-3 w-full hover:bg-surface-900 transition-colors">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
          <rect x="3" y="3" width="18" height="18" rx="3" fill="#ffd43b" stroke="#fab005" stroke-width="1"/>
          <circle cx="12" cy="12" r="4" fill="#0c1117"/>
        </svg>
      </a>
      <button id="expand-btn"
              class="w-full flex justify-center py-2
                     text-accent-400 hover:text-accent-300
                     bg-surface-800 hover:bg-surface-700
                     transition-colors cursor-pointer"
              title="Expand sidebar">
        <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
          <path d="M6.22 4.22a.75.75 0 011.06 0l3.25 3.25a.75.75 0 010 1.06l-3.25 3.25a.75.75 0 01-1.06-1.06L8.94 8 6.22 5.28a.75.75 0 010-1.06z"/>
        </svg>
      </button>
    </div>

    <!-- Session list (HTMX polled) -->
    <div id="session-list-container" class="sidebar-full flex-1 overflow-y-auto"
         data-selected-session="{{ selected_id }}"
         hx-get="/sessions"
         hx-vals="js:{selected: document.getElementById('session-list-container').dataset.selectedSession || ''}"
         hx-trigger="load, every 5s"
         hx-swap="innerHTML">
    </div>

    <!-- Collapsed spacer -->
    <div class="sidebar-collapsed hidden flex-1"></div>

    <!-- Footer -->
    <div class="border-t border-surface-800 text-xs text-gray-600 font-mono">
      <div class="sidebar-full flex items-center px-4 py-2">
        <span>
          <span class="inline-block w-1.5 h-1.5 rounded-full bg-green-500 mr-1"></span>
          watching
        </span>
      </div>
      <button id="collapse-btn"
              class="sidebar-full w-full flex items-center justify-center gap-1.5 px-4 py-2
                     text-gray-400 hover:text-accent-400 bg-surface-900
                     hover:bg-surface-800 border-t border-surface-700
                     transition-colors cursor-pointer"
              title="Collapse sidebar">
        <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
          <path d="M9.78 4.22a.75.75 0 010 1.06L7.06 8l2.72 2.72a.75.75 0 11-1.06 1.06L5.47 8.53a.75.75 0 010-1.06l3.25-3.25a.75.75 0 011.06 0z"/>
        </svg>
        <span class="text-xs">Collapse</span>
      </button>
    </div>
  </aside>

  <!-- Main: Session Detail -->
  <main id="session-detail" class="flex-1 flex flex-col overflow-hidden">
    {% if selected_id %}
      <div hx-get="/sessions/{{ selected_id }}"
           hx-trigger="load"
           hx-target="#session-detail"
           hx-swap="innerHTML">
      </div>
    {% else %}
    <!-- Empty state -->
    <div class="flex-1 flex items-center justify-center">
      <div class="text-center">
        <div class="mb-4">
          <svg width="64" height="64" viewBox="0 0 24 24" fill="none" class="mx-auto opacity-40">
            <rect x="3" y="3" width="18" height="18" rx="3" fill="#ffd43b" stroke="#fab005" stroke-width="0.5"/>
            <circle cx="12" cy="12" r="4" fill="#0c1117"/>
          </svg>
        </div>
        <p class="text-gray-600 text-sm">Select a session to review</p>
        <p class="text-gray-700 text-xs mt-2 font-mono">sessions appear as Claude Code writes them</p>
      </div>
    </div>
    {% endif %}
  </main>

</div>
{% endblock %}