{{define "content"}}
{{with .Data}}
<section>
<p>An assistant or a script can read this router's state and logs and edit its settings through an
   <a href="https://modelcontextprotocol.io">MCP</a> endpoint at <code>{{.URL}}</code> and, with the same features, a
   REST API described by <a href="/api/openapi.json">OpenAPI</a> (<code>/api/v1/…</code>). It needs a token, sent as
   <code>Authorization: Bearer …</code>. A <strong>read</strong> token reads state and settings; a <strong>change</strong>
   token can also edit the settings. Edits are saved but never applied: you review them under
   <a href="/changes">Changes</a> and apply them yourself. Secrets are never sent, and every call is logged below.</p>
</section>

{{if .Secret}}
<section class="pending">
  <p>Token for <strong>{{.Name}}</strong>:</p>
  <p><code>{{.Secret}}</code></p>
  <p class="hint">For Claude Code: <code>claude mcp add --transport http router {{.URL}} --header "Authorization: Bearer {{.Secret}}"</code>.
     The web UI's certificate is self-signed unless you set up a <a href="/certificate">certificate</a>: the client must trust it.</p>
</section>
{{end}}

<fieldset>
  <legend>Tokens</legend>
  {{if .Tokens}}
  <div class="scroll">
  <table>
    <tr><th>Name</th><th>Access</th><th>Created</th><th>Expires</th><th>Last used</th><th></th></tr>
    {{range .Tokens}}<tr><td>{{.Name}}</td><td>{{.Scope}}</td><td>{{.Created.Format "2006-01-02"}}</td>
      <td>{{if .Expires.IsZero}}<span class="hint">never</span>{{else if .Expired}}<span class="bad">expired {{.Expires.Format "2006-01-02"}}</span>{{else}}{{.Expires.Format "2006-01-02"}}{{end}}</td>
      <td>{{if .LastUsed.IsZero}}<span class="hint">never</span>{{else}}{{.LastUsed.Format "2006-01-02 15:04"}}{{end}}</td>
      <td><form method="post" action="/tokens/revoke" data-confirm="Revoke this token?"><input type="hidden" name="csrf" value="{{$.CSRF}}"><input type="hidden" name="id" value="{{.ID}}"><button class="link">revoke</button></form></td></tr>{{end}}
  </table>
  </div>
  {{else}}<p class="hint">No tokens yet.</p>{{end}}
</fieldset>

<form method="post" action="/tokens">
  <input type="hidden" name="csrf" value="{{$.CSRF}}">
  <fieldset>
    <legend>New token</legend>
    <label>Name <input name="name" size="20" placeholder="claude on my laptop" required></label>
    <label>Access
      <select name="scope">
        <option value="read">read: state and settings</option>
        <option value="change">change: also edit the settings</option>
      </select>
    </label>
    <label>Valid for
      <select name="valid">
        <option value="1d">1 day</option>
        <option value="7d">7 days</option>
        <option value="30d" selected>30 days</option>
        <option value="90d">90 days</option>
        <option value="never">no limit</option>
      </select>
    </label>
    <button>Create token</button>
  </fieldset>
</form>

<fieldset>
  <legend>Recent calls</legend>
  {{if .Audit}}
  <div class="scroll">
  <table>
    <tr><th>Time</th><th>Token</th><th>Tool</th><th>Arguments</th><th>Result</th></tr>
    {{range .Audit}}<tr><td>{{.Time.Format "2006-01-02 15:04:05"}}</td><td>{{.Token}}</td><td><code>{{.Tool}}</code></td>
      <td><code>{{.Args}}</code></td><td>{{if .Error}}<span class="bad">{{.Error}}</span>{{else}}ok{{end}}</td></tr>{{end}}
  </table>
  </div>
  {{else}}<p class="hint">Nothing yet.</p>{{end}}
</fieldset>
{{end}}
{{end}}