{% extends "base.html" %}
{% block title %}Get started - Invincible{% endblock %}
{% block content %}
<style>
  .setup-steps { display: flex; flex-direction: column; gap: 1.2rem; }
  .setup-step {
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 1.1rem 1.3rem; background: var(--surface);
  }
  .setup-step.done { border-color: rgba(63, 214, 143, 0.45); }
  .setup-step .step-head { display: flex; align-items: center; gap: 0.6rem; }
  .setup-step h3 { margin: 0; }
  .setup-step h3::before { content: none; }  /* steps number themselves */
  .setup-step .step-mark {
    min-width: 2.1rem; height: 1.7rem; border-radius: 6px;
    padding: 0 0.45rem;
    background: var(--accent-dim); color: var(--accent-ink);
    border: 1px solid var(--accent);
    text-align: center; line-height: 1.6rem; font-weight: 700;
    letter-spacing: 0.08em; flex-shrink: 0;
  }
  .setup-step.done .step-mark {
    background: var(--ok-dim); color: var(--ok); border-color: var(--ok);
  }
  .setup-step .step-state { margin-left: auto; font-size: 0.85rem; }
  .setup-step .step-state.done { color: var(--ok); font-weight: 600; }
  .setup-step .step-state.todo { color: var(--warn); }
  .client-tab-note { font-size: 0.85rem; color: var(--muted);
                     margin: 0.9rem 0 0.2rem; }
  .setup-complete {
    border: 1px solid rgba(63, 214, 143, 0.45);
    background: var(--ok-dim); border-radius: var(--radius);
    padding: 1rem 1.3rem; margin-bottom: 1.2rem;
  }
</style>

<h2>Get started</h2>
<p class="muted">Two steps and your AI clients are running through
<strong>{{ base_url }}</strong>.</p>

{% if has_provider and has_key %}
<div class="setup-complete">
  <strong>You're all set. 🎉</strong> Chat requests with your key route
  through your connected providers. The MCP tools connect separately from
  your AI client and approve in the browser.
</div>
{% endif %}

<div class="setup-steps">

  {# ------------------------------------------------------------------ #}
  <div class="setup-step{% if has_provider %} done{% endif %}">
    <div class="step-head">
      <span class="step-mark">{% if has_provider %}&#10003;{% else %}01{% endif %}</span>
      <h3>Connect a provider</h3>
      <span class="step-state {% if has_provider %}done{% else %}todo{% endif %}">
        {% if has_provider %}Connected{% else %}Not done yet{% endif %}
      </span>
    </div>
    <p class="muted">Your key routes only through providers
       <strong>you</strong> connect — your account, your billing. Pick one
       to start (you can add more later):</p>
    <ul class="plain">
      {% for c in catalog_keys %}
      <li><a href="/dashboard/providers">{{ c.label }}</a></li>
      {% endfor %}
      <li><a href="/dashboard/providers">Custom provider…</a></li>
    </ul>
    <p><a href="/dashboard/providers"><strong>Go to Providers →</strong></a></p>
  </div>

  {# ------------------------------------------------------------------ #}
  <div class="setup-step{% if has_key %} done{% endif %}">
    <div class="step-head">
      <span class="step-mark">{% if has_key %}&#10003;{% else %}02{% endif %}</span>
      <h3>Create your API key</h3>
      <span class="step-state {% if has_key %}done{% else %}todo{% endif %}">
        {% if has_key %}Key exists ({{ api_key_prefix }}…){% else %}Not done yet{% endif %}
      </span>
    </div>
    <p class="muted">One personal key, pasted into your AI client's
       config. Shown once — revoke and re-mint anytime.</p>
    <p><a href="/account"><strong>Go to Account → create a key</strong></a></p>
  </div>

  {# ------------------------------------------------------------------ #}
  <div class="setup-step{% if has_provider and has_key %} done{% endif %}">
    <div class="step-head">
      <span class="step-mark">{% if has_provider and has_key %}&#10003;{% else %}03{% endif %}</span>
      <h3>Point your AI client at the gateway</h3>
      <span class="step-state {% if has_provider and has_key %}done{% else %}todo{% endif %}">
        {% if has_provider and has_key %}Ready to paste{% else %}Complete steps 1–2 first{% endif %}
      </span>
    </div>

    {% if has_key %}
    <p class="client-tab-note"><strong>Claude Code</strong> — shell profile
       (<code>~/.bashrc</code>, <code>~/.zshrc</code>) or session:</p>
    <div class="config-block">export ANTHROPIC_BASE_URL="{{ base_url }}"
export ANTHROPIC_AUTH_TOKEN="&lt;your inv_ key from Account&gt;"<button class="copy-btn" type="button"
  data-copy="export ANTHROPIC_BASE_URL=&quot;{{ base_url }}&quot;
export ANTHROPIC_AUTH_TOKEN=&quot;&lt;your inv_ key from Account&gt;&quot;"
  onclick="navigator.clipboard.writeText(this.dataset.copy)">Copy</button></div>

    <p class="client-tab-note"><strong>Codex CLI</strong> — paste into
       <code>~/.codex/config.toml</code>:</p>
    <div class="config-block">model = "{{ codex_model }}"
model_provider = "invincible"

[model_providers.invincible]
name = "Invincible"
base_url = "{{ base_url }}/v1"
env_key = "INVINCIBLE_API_KEY"
wire_api = "responses"<button class="copy-btn" type="button"
  data-copy="model = &quot;{{ codex_model }}&quot;
model_provider = &quot;invincible&quot;

[model_providers.invincible]
name = &quot;Invincible&quot;
base_url = &quot;{{ base_url }}/v1&quot;
env_key = &quot;INVINCIBLE_API_KEY&quot;
wire_api = &quot;responses&quot;"
  onclick="navigator.clipboard.writeText(this.dataset.copy)">Copy</button></div>
    <p class="muted">Codex reads the key from that env var — set it before
       launching (<code>export INVINCIBLE_API_KEY=…</code>, or on Windows
       <code>setx INVINCIBLE_API_KEY "…"</code> then open a new terminal),
       and restart Codex after editing the config. The
       <code>model</code> line is just a default — switch anytime with
       <code>/model</code>.</p>

    <p class="client-tab-note"><strong>OpenAI SDK</strong> (Python etc.) —
       config or environment:</p>
    <div class="config-block">OPENAI_BASE_URL={{ base_url }}/v1
OPENAI_API_KEY=&lt;your inv_ key from Account&gt;<button class="copy-btn" type="button"
  data-copy="OPENAI_BASE_URL={{ base_url }}/v1
OPENAI_API_KEY=&lt;your inv_ key from Account&gt;"
  onclick="navigator.clipboard.writeText(this.dataset.copy)">Copy</button></div>

    <p class="muted">MCP tools connect separately: add
       <code>{{ base_url }}/mcp</code> in your client's MCP settings and
       approve it in the browser when prompted.</p>
    {% else %}
    <p class="muted">The exact copy-paste config appears here once your
       key exists.</p>
    {% endif %}
  </div>

</div>
{% endblock content %}