{% extends "base.html" %}
{% block title %}Ask — ParaPilot{% endblock %}

{% block content %}
<section class="mx-auto max-w-3xl">
  <div class="text-center">
    <span class="inline-flex items-center gap-1.5 rounded-full bg-brand-50 px-3 py-1 text-xs font-semibold text-brand-700 ring-1 ring-inset ring-brand-200 dark:bg-brand-500/10 dark:text-brand-300 dark:ring-brand-500/20">
      Grounded answers · every claim cited
    </span>
    <h1 class="mt-3 text-3xl font-bold tracking-tight sm:text-4xl">Ask about <span class="pp-gradient-text">Illinois divorce</span></h1>
    <p class="mt-2 text-slate-600 dark:text-slate-300">
      Answers come only from official Illinois sources, with clickable citations and a confidence score.
      Advice or out-of-scope questions are politely refused.
    </p>
  </div>

  <!-- Ask form -->
  <form id="ask-form" class="mt-8" hx-post="/ask" hx-target="#answer" hx-swap="innerHTML"
        hx-on::after-request="if(event.detail.successful){this.querySelector('#question').focus();}">
    <div class="pp-card flex items-center gap-2 p-2 pl-4">
      <svg class="h-5 w-5 shrink-0 text-slate-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
      <input id="question" name="question" type="text" required autocomplete="off"
             placeholder="e.g. How long must I live in Illinois before I can file?"
             class="pp-focus min-w-0 flex-1 rounded-lg border-0 bg-transparent py-2.5 text-[15px] text-slate-800 placeholder:text-slate-400 focus:ring-0 dark:text-slate-100" />
      <button type="submit"
              class="pp-focus inline-flex shrink-0 items-center gap-1.5 rounded-lg bg-brand-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-brand-700">
        <span class="htmx-indicator h-4 w-4 animate-spin rounded-full border-2 border-white/40 border-t-white"></span>
        <span>Ask</span>
      </button>
    </div>
  </form>

  <!-- Examples -->
  <div class="mt-4 flex flex-wrap justify-center gap-2">
    {% for ex in examples %}
    <button type="button" onclick="useExample('{{ ex|replace("'", "\\'") }}')"
            class="rounded-full border border-slate-200 bg-white/60 px-3 py-1.5 text-xs text-slate-600 transition hover:border-brand-300 hover:text-brand-600 dark:border-slate-800 dark:bg-slate-900/40 dark:text-slate-300 dark:hover:text-brand-400">
      {{ ex }}
    </button>
    {% endfor %}
  </div>

  <!-- Answer (htmx target) -->
  <div id="answer" class="mt-8">
    <div class="pp-card flex flex-col items-center gap-2 p-10 text-center text-slate-400">
      <svg class="h-8 w-8 text-slate-300 dark:text-slate-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
      <p class="text-sm">Ask a question to see a grounded, cited answer.</p>
    </div>
  </div>
</section>
{% endblock %}