{{define "content"}}
<h2 class="text-2xl font-bold mb-4">API</h2>
<p class="api-auth-info" style="background:#f8f8e8; border:1px solid #e0e0b0; padding:1em; margin-bottom:2em; font-size:1.08em; border-radius:6px;">
  <b>API Authentication Required:</b> All API calls to <code>/api/...</code> endpoints (except this page) must include an <b>Authorization: Bearer &lt;token&gt;</b> header.<br>
  You can generate tokens on the <a href="/auth/tokens">Tokens page</a>.
</p>
{{range .Services}}
  <h3 id="{{.Anchor}}" style="margin-top:3em; font-size:1.2em; font-weight:bold;">{{.Name}}</h3>
  {{if .Endpoints}}
    <div style="margin-bottom:3em;">
    {{range .Endpoints}}
      <div style="margin-bottom:2.8em; padding:1.3em 1.5em; background:#fafbfc; border-radius:7px; border:1px solid #eee;">
        <div style="font-size:1.12em; margin-bottom:0.7em;"><a href="{{.Path}}" class="micro-link" style="font-weight:bold;">{{.Name}}</a></div>
        <div style="margin-bottom:0.8em; color:#888; font-size:1em;">
          <b>HTTP Path:</b> <code>{{.Path}}</code>
        </div>
        <div style="display:flex; gap:3em; flex-wrap:wrap;">
          <div style="min-width:240px;">
            <b>Request:</b>
            <pre style="background:#f4f4f4; border-radius:5px; padding:1em 1.2em; margin:0.5em 0 1em 0; font-size:1em;">{{.Params}}</pre>
          </div>
          <div style="min-width:240px;">
            <b>Response:</b>
            <pre style="background:#f4f4f4; border-radius:5px; padding:1em 1.2em; margin:0.5em 0 1em 0; font-size:1em;">{{.Response}}</pre>
          </div>
        </div>
      </div>
    {{end}}
    </div>
  {{else}}
    <p style="color:#888;">No endpoints</p>
  {{end}}
{{end}}
{{end}}