{{define "admin/dashboard.html"}}
{{template "admin_shell_open" .}}
<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_flash" .}}
{{template "admin_pagehead" (dict "Icon" "bx-grid-alt" "Title" (T "admin.dashboard.title") "Desc" (printf (T "admin.dashboard.desc_fmt") .Data.TodayISO))}}

<div class="admin-sysver-bar" role="status" aria-label="{{T "admin.dashboard.ver_aria"}}">
  <div class="admin-sysver-bar__meta">
    <span class="admin-sysver-bar__label"><i class="bx bx-chip me-1"></i>{{T "admin.dashboard.ver_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_title"}}">
    {{T "admin.dashboard.upgrade"}} <i class="bx bx-right-arrow-alt"></i>
  </a>
  {{end}}
</div>

<div class="card cs-admin-section admin-home-notices dashboard-notices-card mb-3 g-3 g-lg-4" style="display: none;">
  <div class="cs-admin-section__body">
    <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-2">
      <h2 class="h6 mb-0"><i class="bx bx-news me-1"></i>{{T "admin.dashboard.notices"}}</h2>
      <a href="{{.BrandURL}}" target="_blank" rel="noopener" class="small text-decoration-none">{{T "admin.dashboard.more"}} <i class="bx bx-right-arrow-alt"></i></a>
    </div>
    <div id="dashboard-notices-content" class="dashboard-notices-wrap">
      <div class="dashboard-notices-loading text-muted small">{{T "admin.dashboard.loading"}}</div>
    </div>
  </div>
</div>

<div class="row g-3 g-lg-4">
  <div class="col-12 col-sm-6 col-lg-4">
    <div class="card cs-admin-section admin-stat-card border-0 h-100"><div class="cs-admin-section__body">
      <div class="admin-stat-label">{{T "admin.dashboard.stat_audit"}}</div>
      <div class="admin-stat-value">{{index .Data.Stats "pending_audit"}}</div>
    </div></div>
  </div>
  <div class="col-12 col-sm-6 col-lg-4">
    <div class="card cs-admin-section admin-stat-card border-0 h-100"><div class="cs-admin-section__body">
      <div class="admin-stat-label">{{T "admin.dashboard.stat_dl"}}</div>
      <div class="admin-stat-value">{{index .Data.Stats "today_download"}}</div>
    </div></div>
  </div>
  <div class="col-12 col-sm-6 col-lg-4">
    <div class="card cs-admin-section admin-stat-card border-0 h-100"><div class="cs-admin-section__body">
      <div class="admin-stat-label">{{T "admin.dashboard.stat_new"}}</div>
      <div class="admin-stat-value">{{index .Data.Stats "today_new"}}</div>
    </div></div>
  </div>
  <div class="col-12 col-sm-6 col-lg-4">
    <div class="card cs-admin-section admin-stat-card border-0 h-100"><div class="cs-admin-section__body">
      <div class="admin-stat-label">{{T "admin.dashboard.stat_users"}}</div>
      <div class="admin-stat-value">{{index .Data.Stats "users"}}</div>
    </div></div>
  </div>
  <div class="col-12 col-sm-6 col-lg-4">
    <div class="card cs-admin-section admin-stat-card border-0 h-100"><div class="cs-admin-section__body">
      <div class="admin-stat-label">{{T "admin.dashboard.stat_items"}}</div>
      <div class="admin-stat-value">{{index .Data.Stats "items"}}</div>
    </div></div>
  </div>
  <div class="col-12 col-sm-6 col-lg-4">
    <div class="card cs-admin-section admin-stat-card border-0 h-100"><div class="cs-admin-section__body">
      <div class="admin-stat-label">{{T "admin.dashboard.stat_pub"}}</div>
      <div class="admin-stat-value">{{index .Data.Stats "published"}}</div>
    </div></div>
  </div>
</div>
</div>
<script>
(function() {
  var contentEl = document.getElementById('dashboard-notices-content');
  var cardEl = document.querySelector('.dashboard-notices-card');
  if (!contentEl || !cardEl || typeof $ === 'undefined') 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 LdashNotice = {{jsString (T "admin.dashboard.notice_fallback")}};
      var title = (n.title && String(n.title).trim()) ? String(n.title).trim() : LdashNotice;
      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_shell_close" .}}
{{end}}