{% extends "base.html" %}
{% block content %}
<div class="space-y-6">
  <div class="flex items-center justify-between mb-4">
    <h1 class="text-2xl font-bold tracking-tight text-slate-800">Sessions</h1>
    <span class="text-xs text-slate-500 font-mono">{{ sessions|length }} sessions found</span>
  </div>

  {% if sessions %}
  <div class="grid grid-cols-2 gap-4">
    {% for s in sessions %}
    <div class="airbnb-card p-5 flex flex-col justify-between">
      <div>
        <div class="flex items-center justify-between mb-2">
          <a href="/sessions/{{ s.id }}" class="text-lg font-bold text-[#ff385c] hover:underline font-mono flex items-center gap-2">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg>
            {{ s.id[:12] }}
          </a>
          <span class="px-2.5 py-0.5 rounded-full text-[10px] font-mono bg-gray-100 text-gray-600 border border-gray-250 uppercase tracking-wider">
            {{ s.ide }}
          </span>
        </div>
        <p class="text-xs text-gray-500 font-mono truncate mb-2" title="{{ s.workspace_path }}">
          Workspace: {{ s.workspace_path }}
        </p>
        {% if s.git_branch %}
        <div class="mb-4 flex items-center gap-1.5 text-xs text-slate-500 font-mono">
          <svg class="w-3.5 h-3.5 text-[#ff385c]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 11a3 3 0 100-6 3 3 0 000 6zM6 19a3 3 0 100-6 3 3 0 000 6zM18 19a3 3 0 100-6 3 3 0 000 6zM6 13V9a3 3 0 013-3h3m0 0v10"/></svg>
          <span>Branch:</span>
          <span class="px-2 py-0.5 rounded bg-gray-100 text-gray-700 font-semibold text-[10px]">{{ s.git_branch }}</span>
        </div>
        {% endif %}
      </div>

      <div class="flex items-center justify-between pt-3 border-t border-gray-100 text-xs font-mono text-gray-500">
        <div>Started: {{ (s.started_at or "")[:10] }}</div>
        <div class="flex gap-4">
          <span class="flex items-center gap-1">
            <svg class="w-3.5 h-3.5 text-slate-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/></svg>
            {{ s.turn_count }} turns
          </span>
          <span class="text-[#ff385c] font-bold">${{ "%.2f"|format(s.total_cost_usd or 0) }}</span>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>
  {% else %}
  <div class="bg-gray-50 border border-[#dddddd] rounded-[14px] p-8 text-center text-slate-500">
    <p>No sessions found.</p>
  </div>
  {% endif %}
</div>
{% endblock %}