{{define "system"}}

<div class="detail-grid">
  <div class="card">
    <h2 class="title-with-icon">{{icon "audit"}}<span>数据备份</span></h2>
    <div class="info-list compact-list">
      <div><span>数据库文件</span><strong class="mono">{{if .DBPath}}{{.DBPath}}{{else}}未配置{{end}}</strong></div>
    </div>
    <div class="actions" style="margin-top:12px">
      <button type="button" class="btn ghost js-export-db" data-export-url="/ui/system/db-backup" data-default-filename="app.db">备份数据库</button>
    </div>
  </div>
  <div class="card">
    <h2 class="title-with-icon">{{icon "apply"}}<span>数据恢复</span></h2>
    <form method="post" action="/ui/system/db-restore" enctype="multipart/form-data">
      <div class="field-grid">
        <label class="full"><span>选择备份文件</span><input type="file" name="file" accept=".db,application/octet-stream" required /></label>
      </div>
      <div class="actions" style="margin-top:12px">
        <button type="submit" class="secondary">恢复数据库</button>
      </div>
    </form>
  </div>
</div>

<div class="detail-grid">
  <div class="card">
    <h2 class="title-with-icon">{{icon "heartbeat"}}<span>服务状态</span></h2>
    <div class="info-list compact-list">
      <div><span>管理后台</span><strong id="svc-status">检测中…</strong></div>
      <div><span>接口状态</span><strong id="api-status">检测中…</strong></div>
    </div>
    <div class="actions" style="margin-top:12px">
      <button class="btn ghost" type="button" id="btn-refresh">刷新</button>
    </div>
  </div>
</div>

<script>
(function() {
  var svcEl = document.getElementById("svc-status");
  var apiEl = document.getElementById("api-status");

  function check() {
    svcEl.textContent = "检测中…";
    svcEl.style.color = "";
    apiEl.textContent = "检测中…";
    apiEl.style.color = "";

    fetch("/health")
      .then(function(r) { return r.text(); })
      .then(function(t) {
        if (t.indexOf("ok") !== -1) {
          svcEl.textContent = "运行正常";
          svcEl.style.color = "var(--green)";
        } else {
          svcEl.textContent = "异常";
          svcEl.style.color = "var(--danger-soft-text)";
        }
      })
      .catch(function() {
        svcEl.textContent = "无法连接";
        svcEl.style.color = "var(--danger-soft-text)";
      });

    fetch("/openapi.json")
      .then(function(r) {
        if (r.ok) {
          apiEl.textContent = "正常";
          apiEl.style.color = "var(--green)";
        } else {
          apiEl.textContent = "异常 (" + r.status + ")";
          apiEl.style.color = "var(--danger-soft-text)";
        }
      })
      .catch(function() {
        apiEl.textContent = "无法连接";
        apiEl.style.color = "var(--danger-soft-text)";
      });
  }

  document.getElementById("btn-refresh").addEventListener("click", check);
  check();
})();
</script>
{{end}}