{{define "admin/boards.html"}}{{template "admin/layout" .}}{{end}}
{{define "admin_content_boards"}}
<div class="admin-page-head">
  <div>
    <h1>板块管理</h1>
    <p>创建和维护论坛板块，有帖子的板块无法删除</p>
  </div>
</div>

<div class="admin-card">
  <div class="admin-card-head">新建板块</div>
  <div class="admin-card-body">
    <form id="createBoardForm" class="row g-2 align-items-end">
      <div class="col-md-3">
        <label class="form-label small">板块名称</label>
        <input name="name" class="form-control" placeholder="如：技术交流" required maxlength="64">
      </div>
      <div class="col-md-4">
        <label class="form-label small">简介</label>
        <input name="description" class="form-control" placeholder="板块说明（可选）" maxlength="500">
      </div>
      <div class="col-md-2">
        <label class="form-label small">排序</label>
        <input name="sort_order" type="number" class="form-control" value="0">
      </div>
      <div class="col-md-2">
        <button type="submit" class="btn btn-success w-100" id="createBoardBtn">创建板块</button>
      </div>
    </form>
  </div>
</div>

<div class="admin-card">
  <div class="admin-card-head">板块列表 <span class="text-muted fw-normal">共 {{len .Boards}} 个</span></div>
  <div class="table-responsive">
    <table class="table admin-table mb-0">
      <thead><tr><th>ID</th><th>名称</th><th>描述</th><th>排序</th><th>帖子数</th><th width="160">操作</th></tr></thead>
      <tbody>
      {{range .Boards}}
      <tr>
        <td>{{.ID}}</td>
        <td><input class="form-control form-control-sm" id="name-{{.ID}}" value="{{.Name}}"></td>
        <td><input class="form-control form-control-sm" id="desc-{{.ID}}" value="{{.Description}}"></td>
        <td><input class="form-control form-control-sm" id="sort-{{.ID}}" type="number" value="{{.SortOrder}}" style="width:72px"></td>
        <td><span class="badge bg-secondary">{{.PostCount}}</span></td>
        <td>
          <button class="btn btn-sm btn-primary" onclick="updateBoard({{.ID}}, this)">保存</button>
          <button class="btn btn-sm btn-outline-danger" onclick="deleteBoard({{.ID}}, {{.PostCount}})">删除</button>
        </td>
      </tr>
      {{else}}
      <tr><td colspan="6" class="admin-empty">还没有板块，请先创建</td></tr>
      {{end}}
      </tbody>
    </table>
  </div>
</div>
{{end}}

{{define "admin_scripts_boards"}}
<script>
document.getElementById('createBoardForm').addEventListener('submit', function(e) {
  e.preventDefault();
  var btn = document.getElementById('createBoardBtn');
  setBtnLoading(btn, true);
  adminFetch('/admin/api/boards', { method: 'POST', body: new FormData(this) })
    .then(function(d) { showToast(d.message); reloadSoon(); })
    .catch(function(e) { showToast(e.message, 'danger'); })
    .finally(function() { setBtnLoading(btn, false); });
});

function updateBoard(id, btn) {
  setBtnLoading(btn, true);
  postForm('/admin/api/boards/' + id, 'PUT', {
    name: document.getElementById('name-' + id).value,
    description: document.getElementById('desc-' + id).value,
    sort_order: document.getElementById('sort-' + id).value
  }).then(function(d) { showToast(d.message); })
    .catch(function(e) { showToast(e.message, 'danger'); })
    .finally(function() { setBtnLoading(btn, false); });
}

function deleteBoard(id, postCount) {
  if (postCount > 0) {
    showToast('该板块下还有 ' + postCount + ' 篇帖子，无法删除', 'warning');
    return;
  }
  adminConfirm('确定删除该板块？此操作不可恢复。', function() {
    adminFetch('/admin/api/boards/' + id, { method: 'DELETE' })
      .then(function(d) { showToast(d.message); reloadSoon(); })
      .catch(function(e) { showToast(e.message, 'danger'); });
  });
}
</script>
{{end}}