{% extends "base.html" %}

{% block title %}{{ tr("Setup") }} · clear-record{% endblock %}

{% block body %}
{# Setup is system readiness (installed -> usable), not the daily workspace. The
   steps are a real sequence, so they are numbered and each is skippable: setup
   never blocks a returning user. The Transcription step owns ASR backend and
   checkpoint readiness and states it from service.agent_flow.transcription_status;
   it never points at the Agent step or at Models settings for a fetch. The agent
   step reuses the one `/ui/agent-setup` panel Settings -> Agent mounts, so there
   is no second implementation. The last step is ticket 05's acceptance test. #}
<section class="content setup">
  <h2>{{ tr("Setup") }}</h2>
  <p class="muted setup-intro">{{ tr("Setup is system readiness: get clear-record from installed to usable. Every step can be skipped — you can return whenever you like.") }}</p>
  {% if reason == 'update' %}
  <p class="muted setup-update">{{ tr("clear-record was updated to {version}. Walk the steps again to check the system still works.", version=current_version) }}</p>
  {% endif %}

  <ol class="setup-steps">
    <li class="setup-step" id="setup-welcome">
      <div class="setup-step-head">
        <h3>{{ tr("Welcome") }}</h3>
      </div>
      <p class="muted">{{ tr("clear-record records, transcribes and reviews meetings locally. Your own tape becomes a transcript under Projects → Meetings, and — once an agent endpoint is connected — minutes under that project's Minutes. Nothing here is required before you start; this path gets transcription ready, connects an MCP harness, and ends with an acceptance test.") }}</p>
      <div class="setup-step-actions">
        <a class="btn btn-sm" href="#setup-transcription">{{ tr("Next: Transcription") }}</a>
        <a class="btn btn-sm btn-ghost" href="#setup-agent">{{ tr("Skip") }}</a>
      </div>
    </li>

    {% include "_setup_transcription.html" %}

    <li class="setup-step" id="setup-agent">
      <div class="setup-step-head">
        <h3>{{ tr("Agent") }}</h3>
      </div>
      <p class="muted">{{ tr("Connect an OpenAI-compatible model endpoint and register clear-record with your MCP harness. This is the same panel as Settings → Agent; there is only one.") }}</p>
      {# The one agent flow, loaded by htmx (and visible to e2e on page load). #}
      <div id="agent-setup" hx-get="/ui/agent-setup" hx-trigger="load" hx-swap="innerHTML">
        <div class="muted">{{ tr("Loading agent setup…") }}</div>
      </div>
      <div class="setup-step-actions">
        <a class="btn btn-sm" href="#setup-try">{{ tr("Next: Try it") }}</a>
        <a class="btn btn-sm btn-ghost" href="#setup-try">{{ tr("Skip") }}</a>
      </div>
    </li>

    <li class="setup-step" id="setup-try">
      <div class="setup-step-head">
        <h3>{{ tr("Try it") }}</h3>
      </div>
      <p class="muted">{{ tr("The acceptance test this path ends on: a hello-world tape through transcription, shown back as the transcript an MCP agent receives. Run it in the Agent step's Try it stage, or from Settings → Status.") }}</p>
      <div class="setup-step-actions">
        <a class="btn btn-sm" href="#setup-agent">{{ tr("Run it in the Agent step") }}</a>
        <a class="btn btn-sm btn-ghost" href="/settings/status">{{ tr("Hello-world check") }}</a>
        <form method="post" action="/setup/complete">
          <button type="submit" class="primary">{{ tr("Finish setup") }}</button>
        </form>
        <form method="post" action="/setup/dismiss">
          <button type="submit" class="btn btn-ghost">{{ tr("Dismiss setup") }}</button>
        </form>
      </div>
    </li>
  </ol>
</section>
{% endblock %}