<!DOCTYPE html>
<html lang="en">
<head>
  {{template "head" .}}
  <title>Admin — Docs — Arcline</title>
  <meta name="robots" content="noindex">
  <style>
    .admin-wrap { max-width:900px; margin:2.5rem auto; padding:0 1.5rem; }
    .admin-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.75rem; }
    .admin-header h1 { font-size:1.5rem; font-weight:800; color:var(--text-strong); }
    .admin-table { width:100%; border-collapse:collapse; font-size:0.875rem; }
    .admin-table th { background:var(--bg); font-size:.72rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--text-muted); padding:.625rem 1rem; text-align:left; border-bottom:1px solid var(--border); }
    .admin-table td { padding:.75rem 1rem; color:var(--text); border-bottom:1px solid var(--border-subtle); vertical-align:middle; line-height:1.4; }
    .admin-table tr:last-child td { border-bottom:none; }
    .admin-table tr:hover td { background:var(--bg); }
    .vis-badge { display:inline-block; font-size:.7rem; font-weight:600; padding:.2em .5em; border-radius:3px; background:var(--border-subtle); color:var(--text-muted); white-space:nowrap; }
    .vis-badge--public { background:var(--accent-light); color:var(--accent); }
    .vis-badge--plan   { background:#fef3c7; color:#92400e; }
    .vis-badge--cust   { background:#ede9fe; color:#5b21b6; }
    .action-btns { display:flex; gap:.5rem; }
  </style>
</head>
<body>

{{template "nav" .}}

<div class="admin-wrap">
  <div class="admin-header">
    <h1>Docs Admin</h1>
    <a href="/admin/pages/new" class="btn btn--primary btn--sm">+ New page</a>
  </div>

  {{if .Pages}}
  <table class="admin-table">
    <thead>
      <tr>
        <th>Title</th>
        <th>Slug</th>
        <th>Section</th>
        <th>Visibility</th>
        <th>Order</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      {{range .Pages}}
      <tr>
        <td>
          <strong>{{.Title}}</strong>
          {{if .Description}}<br><span style="color:var(--text-muted);font-size:.8rem;">{{.Description}}</span>{{end}}
        </td>
        <td><code style="font-size:.8rem;">{{.Slug}}</code></td>
        <td>{{.Section}}</td>
        <td>
          {{$v := visLabel .Visibility}}
          {{if eq .Visibility "public"}}
          <span class="vis-badge vis-badge--public">{{$v}}</span>
          {{else if hasPrefix .Visibility "plan:"}}
          <span class="vis-badge vis-badge--plan">{{$v}}</span>
          {{else}}
          <span class="vis-badge vis-badge--cust">{{$v}}</span>
          {{end}}
        </td>
        <td>{{.DisplayOrder}}</td>
        <td>
          <div class="action-btns">
            <a href="/client/{{.Slug}}/" class="btn btn--ghost btn--sm" target="_blank">View</a>
            <a href="/admin/pages/{{.ID}}/edit" class="btn btn--ghost btn--sm">Edit</a>
            <form method="POST" action="/admin/pages/{{.ID}}/delete" style="margin:0;"
                  onsubmit="return confirm('Delete {{.Title}}?')">
              <input type="hidden" name="csrf_token" value="{{$.CSRFToken}}">
              <button class="btn btn--danger btn--sm" type="submit">Delete</button>
            </form>
          </div>
        </td>
      </tr>
      {{end}}
    </tbody>
  </table>
  {{else}}
  <p style="color:var(--text-muted);">No pages yet. <a href="/admin/pages/new">Create the first one.</a></p>
  {{end}}
</div>

{{template "footer-simple" .}}
</body>
</html>
