{{template "layout.html" .}}
<div class="card" style="max-width:820px">
  <div class="card-hd">🔌 API 接口信息</div>
  <div class="card-bd">
    <p style="color:var(--gray-400);font-size:14px;line-height:1.6;margin:0 0 16px">
      以下 RESTful API 接口可供前后端分离的前端使用，返回 JSON 格式（<code>application/json; charset=utf-8</code>）。
    </p>

    {{range .apis}}
    <div style="border:1px solid var(--gray-100);border-radius:8px;margin-bottom:16px;overflow:hidden">
      <div style="background:var(--gray-50);padding:12px 16px;display:flex;align-items:center;gap:12px;font-size:14px">
        <code style="color:var(--green);font-weight:700;font-size:13px">{{.Method}}</code>
        <code style="font-size:13px">{{.Path}}</code>
        <span style="color:var(--gray-400);font-size:13px;margin-left:auto">{{.Desc}}</span>
      </div>
      {{if .Params}}
      <div style="padding:12px 16px;border-top:1px solid var(--gray-100)">
        <div style="font-size:12px;color:var(--gray-500);font-weight:600;margin-bottom:8px">参数</div>
        <table style="width:100%;border-collapse:collapse;font-size:12px">
          <thead>
            <tr style="color:var(--gray-400)">
              <th style="padding:4px 8px;text-align:left;border-bottom:1px solid var(--gray-50)">名称</th>
              <th style="padding:4px 8px;text-align:left;border-bottom:1px solid var(--gray-50)">位置</th>
              <th style="padding:4px 8px;text-align:left;border-bottom:1px solid var(--gray-50)">必填</th>
              <th style="padding:4px 8px;text-align:left;border-bottom:1px solid var(--gray-50)">说明</th>
            </tr>
          </thead>
          <tbody>
            {{range .Params}}
            <tr>
              <td style="padding:4px 8px;border-bottom:1px solid var(--gray-50)"><code>{{.Name}}</code></td>
              <td style="padding:4px 8px;border-bottom:1px solid var(--gray-50)">{{.In}}</td>
              <td style="padding:4px 8px;border-bottom:1px solid var(--gray-50)">{{.Required}}</td>
              <td style="padding:4px 8px;border-bottom:1px solid var(--gray-50)">{{.Desc}}</td>
            </tr>
            {{end}}
          </tbody>
        </table>
      </div>
      {{end}}
      <div style="padding:12px 16px;border-top:1px solid var(--gray-100)">
        <div style="font-size:12px;color:var(--gray-500);font-weight:600;margin-bottom:8px">返回示例</div>
        <pre style="background:#1e293b;color:#e2e8f0;border-radius:6px;padding:12px;font-size:12px;line-height:1.5;overflow-x:auto;margin:0;white-space:pre-wrap;word-break:break-all">{{.Response}}</pre>
      </div>
    </div>
    {{end}}
  </div>
</div>

</body>
</html>