{% extends "base.html" %}
{% block content %}
<div class="max-w-3xl mx-auto space-y-6">
  <div class="flex items-center justify-between mb-2">
    <h1 class="text-2xl font-bold tracking-tight text-slate-800">Search</h1>
    <span class="text-xs text-slate-500 font-mono font-semibold text-slate-400">FTS5 Full-Text Indexing</span>
  </div>

  <form action="/search" method="get" class="mb-6">
    <div class="relative airbnb-card rounded-full p-2.5 flex items-center pl-10 shadow-sm">
      <input type="text" name="q" value="{{ query }}" placeholder="Search turns, summaries, code references..." class="flex-grow bg-transparent text-sm text-slate-800 placeholder-slate-400 focus:outline-none pr-3">
      <span class="absolute left-4 top-3 text-slate-400">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
      </span>
    </div>
  </form>

  {% if query %}
  <div class="space-y-4">
    <h2 class="text-sm font-bold text-slate-400 uppercase tracking-wider mb-2">Search Results for "{{ query }}"</h2>
    {% if results %}
      {% for r in results %}
      <div class="airbnb-card p-5 space-y-3">
        <div class="flex items-center justify-between flex-wrap gap-2 text-xs font-mono">
          <div class="flex items-center gap-2">
            <a href="/turns/{{ r.id }}" class="text-[#ff385c] font-bold hover:underline">
              #{{ r.id[:12] }}
            </a>
            {% if r.actor == 'agent' %}
              <span class="px-2 py-0.5 rounded-full text-[9px] font-bold uppercase tracking-wider actor-agent-badge">agent</span>
            {% else %}
              <span class="px-2 py-0.5 rounded-full text-[9px] font-bold uppercase tracking-wider actor-user-badge">user</span>
            {% endif %}
          </div>
          <span class="text-slate-400">{{ (r.timestamp or "")[:19] }}</span>
        </div>

        <p class="text-sm text-slate-600 leading-relaxed font-medium">
          {{ r.snippet|truncate(160) }}
        </p>

        <div class="flex items-center justify-end text-xs pt-2 border-t border-gray-100">
          <a href="/turns/{{ r.id }}" class="text-[#ff385c] hover:underline font-bold flex items-center gap-1">
            <svg class="w-4 h-4" 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>
            View Conversation Thread
          </a>
        </div>
      </div>
      {% endfor %}
    {% else %}
      <div class="bg-white border border-[#dddddd] rounded-[14px] p-8 text-center text-slate-500">
        <p>No results found matching your query.</p>
      </div>
    {% endif %}
  </div>
  {% endif %}
</div>
{% endblock %}