{% extends "base.html" %}

{% block content %}
<h5 class="fw-bold mb-1">
  <i class="fa-solid fa-laptop-code me-2 text-primary"></i>Client Setup
</h5>
<p class="text-muted mb-3">
  Your server is ready. Pick how you want to connect to it.
</p>

<div class="alert alert-info py-2 mb-4 d-flex align-items-center gap-2 small">
  <i class="fa-solid fa-circle-info flex-shrink-0"></i>
  <div>
    Configs below connect as <strong>{{ admin_username }}</strong> (admin).
    Use the <a href="/admin/api/users" class="alert-link">Admin API</a> or
    <code>/auth/provision</code> to create credentials for additional users.
  </div>
</div>

<!-- Tab navigation -->
<ul class="nav nav-tabs mb-0" id="clientTabs" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="claudecode-tab"
            data-bs-toggle="tab" data-bs-target="#claudecode"
            type="button" role="tab" aria-controls="claudecode" aria-selected="true">
      <i class="fa-solid fa-terminal me-1"></i>Claude Code / VSCode
      <span class="badge bg-success ms-1" style="font-size:.65rem">Recommended</span>
    </button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="desktop-tab"
            data-bs-toggle="tab" data-bs-target="#desktop"
            type="button" role="tab" aria-controls="desktop" aria-selected="false">
      <i class="fa-solid fa-robot me-1"></i>Claude Desktop
    </button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="curl-tab"
            data-bs-toggle="tab" data-bs-target="#curl"
            type="button" role="tab" aria-controls="curl" aria-selected="false">
      <i class="fa-solid fa-flask me-1"></i>Test / curl
    </button>
  </li>
</ul>

<div class="tab-content border border-top-0 rounded-bottom p-4 mb-4 bg-white"
     id="clientTabsContent">

  <!-- ── Tab 1: Claude Code CLI + VSCode (HTTP transport) ─────────────── -->
  <div class="tab-pane fade show active" id="claudecode" role="tabpanel"
       aria-labelledby="claudecode-tab">

    <p class="text-muted small mb-2">
      <strong>Option A — CLI command</strong> (run once in your terminal; saves to
      <code>~/.claude.json</code> for all projects):
    </p>
    <div class="position-relative mb-4">
      <pre id="cliCmd" class="bg-dark text-light rounded p-3 mb-0"
           style="font-size:.82rem; word-break:break-all">{{ cli_command }}</pre>
      <button class="btn btn-sm btn-outline-light position-absolute top-0 end-0 m-2"
              onclick="copyText(document.getElementById('cliCmd').textContent, this)">
        <i class="fa fa-copy me-1"></i>Copy
      </button>
    </div>

    <p class="text-muted small mb-2">
      <strong>Option B — project <code>.mcp.json</code></strong> (place in your project
      root; works for both CLI and VSCode extension):
    </p>
    <div class="position-relative">
      <pre id="claudeCodeConfig" class="bg-dark text-light rounded p-3 mb-0"
           style="font-size:.82rem">{{ claude_code_config }}</pre>
      <button class="btn btn-sm btn-outline-light position-absolute top-0 end-0 m-2"
              onclick="copyText(document.getElementById('claudeCodeConfig').textContent, this)">
        <i class="fa fa-copy me-1"></i>Copy
      </button>
    </div>

    <div class="alert alert-info py-2 mt-3 mb-0 small d-flex align-items-center gap-2">
      <i class="fa fa-circle-info flex-shrink-0"></i>
      Uses <strong>streamable HTTP</strong> transport at <code>{{ http_url }}</code>.
      After adding, restart Claude Code or reload the VSCode window.
    </div>
  </div>

  <!-- ── Tab 2: Claude Desktop (SSE) ──────────────────────────────────── -->
  <div class="tab-pane fade" id="desktop" role="tabpanel"
       aria-labelledby="desktop-tab">

    <p class="text-muted small mb-2">
      Add to your Claude Desktop config and <strong>restart Claude Desktop</strong>.
    </p>
    <ul class="text-muted small mb-3 ps-3">
      <li><strong>macOS:</strong> <code>~/Library/Application Support/Claude/claude_desktop_config.json</code></li>
      <li><strong>Windows:</strong> <code>%APPDATA%\Claude\claude_desktop_config.json</code></li>
    </ul>

    <div class="position-relative">
      <pre id="claudeDesktopConfig" class="bg-dark text-light rounded p-3 mb-0"
           style="font-size:.82rem">{{ claude_desktop_config }}</pre>
      <button class="btn btn-sm btn-outline-light position-absolute top-0 end-0 m-2"
              onclick="copyText(document.getElementById('claudeDesktopConfig').textContent, this)">
        <i class="fa fa-copy me-1"></i>Copy
      </button>
    </div>

    <div class="alert alert-warning py-2 mt-3 mb-0 small d-flex align-items-center gap-2">
      <i class="fa fa-triangle-exclamation flex-shrink-0"></i>
      Merge the <code>"mcpServers"</code> key — don't replace the whole file.
    </div>
  </div>

  <!-- ── Tab 3: curl test ──────────────────────────────────────────────── -->
  <div class="tab-pane fade" id="curl" role="tabpanel"
       aria-labelledby="curl-tab">

    <p class="text-muted small mb-2">Verify the server is reachable:</p>
    <div class="position-relative">
      <pre id="curlCmd" class="bg-dark text-light rounded p-3 mb-0"
           style="font-size:.82rem; word-break:break-all">{{ curl_command }}</pre>
      <button class="btn btn-sm btn-outline-light position-absolute top-0 end-0 m-2"
              onclick="copyText(document.getElementById('curlCmd').textContent, this)">
        <i class="fa fa-copy me-1"></i>Copy
      </button>
    </div>
    <div class="alert alert-success py-2 mt-3 mb-0 small d-flex align-items-center gap-2">
      <i class="fa fa-circle-check flex-shrink-0"></i>
      A healthy server returns <code>{"status":"ok"}</code>.
    </div>
  </div>

</div>

<!-- Footer buttons -->
<div class="d-flex gap-2">
  <a href="/admin" class="btn btn-primary flex-grow-1">
    <i class="fa fa-shield-halved me-2"></i>Open Admin UI
  </a>
  <a href="/docs" class="btn btn-outline-secondary">
    <i class="fa fa-book me-1"></i>API Docs
  </a>
</div>

{% endblock %}