{# v2.1.0a4: "Ask this project" inline form with SSE streaming.
   Rendered inside project_detail.html. Expects template vars:
   - project_name (str)         — project to invoke against
   - host         (str)         — "local" or a configured host alias

   The form posts to /mcp/harbormaster with Accept: text/event-stream
   and consumes the chunk + result + error events the v1.0.0a14
   streaming dispatch emits. v3.0.0a6 wires bearer-token plumbing
   via base.html's hmFetch() helper — when an auth_token meta tag is
   present, the Authorization header is injected automatically.
#}
<section x-data='askForm({
           project: {{ project_name | tojson }},
           host: {{ host | tojson }},
         })'
         class="mb-4 border border-border rounded-md p-2.5 bg-surface-2/40">
  <header class="mb-2 flex items-baseline justify-between gap-2 flex-wrap">
    <h3 class="text-base font-bold text-foreground-muted">
      Ask <span class="text-accent" x-text="project"></span>
    </h3>
    <span class="text-xs text-foreground-subtle">
      streams via <code class="text-accent">ask_project</code> SSE
    </span>
  </header>
  <form @submit.prevent="ask()">
    <textarea x-model="question" rows="3" required minlength="3"
              :disabled="loading"
              placeholder="e.g. summarize the v2 changes; what does the auth flow look like?"
              class="w-full bg-surface-1 border border-border rounded px-3 py-2 text-sm focus:border-accent-strong focus:outline-none resize-y"></textarea>
    <div class="mt-2 flex flex-wrap items-center gap-2 text-xs text-foreground-muted">
      <label class="flex items-center gap-1.5">
        max_turns
        <input type="number" min="1" max="10" x-model.number="maxTurns"
               class="w-14 bg-surface-1 border border-border rounded px-2 py-1 text-center">
      </label>
      {# v21.0.0a10: model selection dropdown. Empty = backend default. #}
      <label class="flex items-center gap-1.5" data-ask-form-model>
        model
        <select x-model="model"
                aria-label="Model selection"
                class="bg-surface-1 border border-border rounded px-1 py-0.5 text-xs">
          <option value="">auto</option>
          <option value="haiku">⚡ haiku (fast)</option>
          <option value="sonnet">⚖ sonnet (default)</option>
          <option value="opus">🧠 opus (smart)</option>
        </select>
      </label>
      <span class="text-foreground-muted" x-show="loading">streaming…</span>
      <span class="text-foreground-muted ml-auto" x-show="!loading && hasResult"
            x-text="`${chunks} chunks · ${(elapsedMs/1000).toFixed(1)}s`"></span>
      <button type="submit"
              :disabled="loading || question.trim().length < 3"
              :aria-busy="loading"
              class="bg-accent-strong hover:bg-accent disabled:bg-surface-3 disabled:text-foreground-muted text-white font-bold px-3 py-1.5 rounded transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-surface-1">
        <span x-show="!loading">Ask</span>
        <span x-show="loading" aria-hidden="true">…</span>
      </button>
      <button type="button" x-show="loading" @click="abort()"
              aria-label="Stop streaming"
              :aria-hidden="!loading"
              class="text-warning hover:text-warning underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-surface-1">stop</button>
    </div>
  </form>
  <div x-show="error" :aria-hidden="!error" role="alert" aria-live="assertive" class="mt-2 text-xs text-danger" x-text="error"></div>
  <pre x-show="streamText"
       :aria-hidden="!streamText"
       aria-live="polite"
       aria-atomic="false"
       aria-label="Streaming answer"
       class="mt-2 text-sm whitespace-pre-wrap break-words border border-border rounded p-2 bg-surface-1/50 text-foreground leading-relaxed"
       x-text="streamText"></pre>
</section>

{# Component definition lives in _ask_form_script.html so dashboard
   cards and project_detail share one implementation. #}
{% include "_partials/_ask_form_script.html" %}