{{define "admin/dashboard.html"}}
{{template "admin/layout_head" .}}
<style>
.admin-sysver-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid rgba(148, 163, 184, 0.35);
}
.admin-sysver-bar__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  min-width: 0;
}
.admin-sysver-bar__label {
  font-size: 0.8125rem;
  color: #64748b;
  font-weight: 600;
}
.admin-sysver-bar__value {
  font-size: 0.9375rem;
  color: #0f172a;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.admin-sysver-bar__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
}
.admin-sysver-bar__badge--free {
  background: #e2e8f0;
  color: #334155;
}
.admin-sysver-bar__badge--pro {
  background: #dbeafe;
  color: #1d4ed8;
}
.admin-sysver-bar__upgrade {
  flex-shrink: 0;
  font-weight: 600;
  font-size: 0.8125rem;
}
</style>
<div class="cs-admin-page">
{{template "admin_pagehead" (dict "Icon" "bx-grid-alt" "Title" (T "admin.dashboard.title") "Desc" (T "admin.dashboard.desc"))}}

<div class="admin-sysver-bar" role="status" aria-label="{{T "admin.dashboard.sysver_aria"}}">
  <div class="admin-sysver-bar__meta">
    <span class="admin-sysver-bar__label"><i class="bx bx-chip me-1"></i>{{T "admin.dashboard.sysver_label"}}</span>
    <span class="admin-sysver-bar__value">{{.ProductName}} v{{.Version}}</span>
    {{if .IsPro}}
    <span class="admin-sysver-bar__badge admin-sysver-bar__badge--pro">{{.EditionName}}</span>
    {{else}}
    <span class="admin-sysver-bar__badge admin-sysver-bar__badge--free">{{.EditionName}}</span>
    {{end}}
  </div>
  {{if not .IsPro}}
  <a href="{{.BrandURL}}" class="btn btn-sm btn-primary admin-sysver-bar__upgrade" target="_blank" rel="noopener noreferrer" title="{{T "admin.dashboard.upgrade_pro_title"}}">
    {{T "admin.dashboard.upgrade_pro"}} <i class="bx bx-right-arrow-alt"></i>
  </a>
  {{end}}
</div>

<div class="cs-admin-section dashboard-notices-card mb-4" style="display: none;">
  <div class="cs-admin-section__head">
    <div class="cs-admin-section__head-icon cs-admin-section__head-icon--indigo"><i class="bx bx-news"></i></div>
    <div class="cs-admin-section__head-text">
      <h2 class="cs-admin-section__head-title">{{T "admin.dashboard.notices_title"}}</h2>
      <p class="cs-admin-section__head-sub">{{T "admin.dashboard.notices_sub_prefix"}} {{.BrandTeam}} {{T "admin.dashboard.notices_sub_suffix"}}</p>
    </div>
    <a href="{{.BrandURL}}" target="_blank" rel="noopener noreferrer" class="btn btn-sm btn-outline-primary ms-auto flex-shrink-0">{{T "admin.common.more"}} <i class="bx bx-right-arrow-alt"></i></a>
  </div>
  <div class="cs-admin-section__body">
    <div id="dashboard-notices-content" class="dashboard-notices-wrap">
      <div class="text-muted small">{{T "admin.common.loading"}}</div>
    </div>
  </div>
</div>

<div class="row g-3 g-lg-4 mb-4">
  <div class="col-12 col-sm-6 col-xl-3">
    <div class="card cs-admin-section admin-stat-card border-0 h-100">
      <div class="cs-admin-section__body">
        <div class="admin-stat-label"><i class="bx bx-user me-1"></i>{{T "admin.dashboard.stat_users"}}</div>
        <div class="admin-stat-value">{{index .Data "UserCount"}}</div>
      </div>
    </div>
  </div>
  <div class="col-12 col-sm-6 col-xl-3">
    <div class="card cs-admin-section admin-stat-card border-0 h-100">
      <div class="cs-admin-section__body">
        <div class="admin-stat-label"><i class="bx bx-radar me-1"></i>{{T "admin.dashboard.stat_monitors"}}</div>
        <div class="admin-stat-value">{{index .Data "MonitorCount"}}</div>
      </div>
    </div>
  </div>
  <div class="col-12 col-sm-6 col-xl-3">
    <div class="card cs-admin-section admin-stat-card border-0 h-100">
      <div class="cs-admin-section__body">
        <div class="admin-stat-label"><i class="bx bx-pulse me-1"></i>{{T "admin.dashboard.stat_checks_24h"}}</div>
        <div class="admin-stat-value">{{index .Data "CheckCount"}}</div>
      </div>
    </div>
  </div>
  <div class="col-12 col-sm-6 col-xl-3">
    <div class="card cs-admin-section admin-stat-card border-0 h-100">
      <div class="cs-admin-section__body">
        <div class="admin-stat-label"><i class="bx bx-error-circle me-1"></i>{{T "admin.dashboard.stat_fails_24h"}}</div>
        <div class="admin-stat-value text-danger">{{index .Data "FailCount"}}</div>
      </div>
    </div>
  </div>
</div>

<div class="cs-admin-section">
  <div class="cs-admin-section__head">
    <div class="cs-admin-section__head-icon cs-admin-section__head-icon--indigo"><i class="bx bx-error"></i></div>
    <div class="cs-admin-section__head-text">
      <h2 class="cs-admin-section__head-title">{{T "admin.dashboard.down_title"}}</h2>
      <p class="cs-admin-section__head-sub">{{T "admin.dashboard.down_sub"}}</p>
    </div>
  </div>
  <div class="cs-admin-section__body cs-admin-section__body--flush">
    <div class="table-responsive" data-nc-privacy-menu>
      <table class="table table-hover mb-0 align-middle">
        <thead class="table-light">
          <tr><th>{{T "admin.dashboard.col_name"}}</th><th>{{T "admin.dashboard.col_user"}}</th><th>{{T "admin.dashboard.col_url"}}</th></tr>
        </thead>
        <tbody>
        {{range index .Data "DownMonitors"}}
        <tr>
          <td class="fw-semibold">{{privacy "text" .name}}</td>
          <td>{{privacy "username" .username}}</td>
          <td class="small text-muted text-break">{{privacy "url" .url}}</td>
        </tr>
        {{else}}
        <tr><td colspan="3" class="text-center text-muted py-4"><i class="bx bx-check-circle text-success me-1"></i>{{T "admin.dashboard.empty_down"}}</td></tr>
        {{end}}
        </tbody>
      </table>
    </div>
  </div>
</div>
</div>
<script>
(function() {
  var contentEl = document.getElementById('dashboard-notices-content');
  var cardEl = document.querySelector('.dashboard-notices-card');
  if (!contentEl || !cardEl) return;
  function escapeAttr(s) {
    if (!s) return '';
    return String(s).replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
  }
  function renderNotices(list) {
    if (!list || !list.length) {
      cardEl.style.display = 'none';
      return;
    }
    var html = '';
    for (var i = 0; i < list.length; i++) {
      var n = list[i];
      var url = (n.url && String(n.url).trim()) ? String(n.url).trim() : '#';
      var title = (n.title && String(n.title).trim()) ? String(n.title).trim() : {{jsString (T "admin.dashboard.notice_fallback")}};
      var styleClass = (n.style && String(n.style).trim()) ? String(n.style).trim().replace(/[^a-zA-Z0-9_-]/g, '') : '';
      var pinHtml = (n.is_top === 1 || n.is_top === '1') ? '<i class="bx bx-pin notice-pin"></i>' : '';
      html += '<a href="' + escapeAttr(url) + '" class="notice-item' + (styleClass ? ' ' + escapeAttr(styleClass) : '') + '" target="_blank" rel="noopener">' + pinHtml + '<span>' + escapeAttr(title) + '</span></a>';
    }
    contentEl.innerHTML = html;
    cardEl.style.display = '';
  }
  $.ajax({
    url: '/admin/notices-proxy',
    method: 'GET',
    dataType: 'json',
    timeout: 20000
  }).done(function(ret) {
    if (ret && ret.success && ret.data && Array.isArray(ret.data.list)) {
      renderNotices(ret.data.list);
    } else {
      cardEl.style.display = 'none';
    }
  }).fail(function() {
    cardEl.style.display = 'none';
  });
})();
</script>
{{template "admin/layout_foot" .}}
{{end}}