{{define "admin_categories"}}
  {{if .Data.Saved}}<div class="alert alert-ok"><strong>已保存 {{ico "check"}}</strong> 分类的改动已经生效，前台刷新即可看到。</div>{{end}}
  {{if .Data.Err}}<div class="alert alert-err"><strong>没保存成功：</strong>{{.Data.Err}}</div>{{end}}

  <form method="post" action="/admin/categories/create" style="margin-bottom:18px;">
    <input type="hidden" name="csrf" value="{{.CSRF}}">
    <div class="panel">
      <h2>新建分类</h2>
      <div class="form-inline">
        <input type="text" name="name" placeholder="分类名称，例如：技术笔记" required>
        <input type="text" name="slug" placeholder="别名（可留空，按名称生成）">
        <input type="number" name="sort" value="0" class="cat-num" title="排序：数字越小越靠前">
        <button class="btn btn-primary" type="submit">添加</button>
      </div>
      <div class="hint">别名决定地址 /category/别名；排序数字越小越靠前。建好之后，名称、别名、排序都能在下面的表格里随时改。</div>
    </div>
  </form>

  <div class="panel" style="padding:0;">
    {{if .Data.Categories}}
    <div class="table-wrap">
      <table class="table cat-table">
        <thead>
          <tr><th class="ct-name">名称</th><th class="ct-slug">别名</th><th class="ct-sort">排序</th><th class="ct-count">文章数</th><th class="th-ops">操作</th></tr>
        </thead>
        <tbody>
          {{range .Data.Categories}}
          <tr>
            {{/* 表单不能跨 td 包住一行，所以每行的编辑表单单独放在表格后面，
                 这里的输入用 form 属性挂过去（HTML5 的标准做法）。 */}}
            <td><input form="catEdit{{.ID}}" type="text" name="name" value="{{.Name}}" required></td>
            <td><input form="catEdit{{.ID}}" type="text" name="slug" value="{{.Slug}}" placeholder="别名"></td>
            <td><input form="catEdit{{.ID}}" type="number" name="sort" value="{{.Sort}}" class="cat-num"></td>
            <td class="ct-count">{{.Count}}</td>
            <td>
              <div class="row-actions">
                <button form="catEdit{{.ID}}" class="btn btn-primary btn-sm" type="submit">保存</button>
                <a class="btn btn-ghost btn-sm" href="/category/{{.Slug}}" target="_blank" rel="noopener">查看</a>
                <form method="post" action="/admin/categories/{{.ID}}/delete" class="app-act"
                      onsubmit="return confirm('确定删除该分类吗？分类下的文章会保留为未分类。');">
                  <input type="hidden" name="csrf" value="{{$.CSRF}}">
                  <button class="btn btn-danger btn-sm" type="submit">删除</button>
                </form>
              </div>
            </td>
          </tr>
          {{end}}
        </tbody>
      </table>
    </div>
    {{range .Data.Categories}}
    <form id="catEdit{{.ID}}" method="post" action="/admin/categories/{{.ID}}/update">
      <input type="hidden" name="csrf" value="{{$.CSRF}}">
    </form>
    {{end}}
    {{else}}
    <div style="text-align:center;color:var(--muted);padding:40px 0;">暂无分类</div>
    {{end}}
  </div>
{{end}}