{{define "admin/visitor_event_tables.html"}}
{{template "admin/layout_head" .}}
{{$shard := index .Data "ShardEnabled"}}
<div class="cs-admin-page">
{{template "admin_pagehead" (dict "Icon" "bx-data" "Title" (T "admin.vet.title") "Desc" (index .Data "PageDesc"))}}

{{if $shard}}
<div class="alert alert-info border-0 shadow-sm mb-3 py-3">
  <div class="d-flex gap-2">
    <i class="bx bx-bolt-circle fs-4 text-info flex-shrink-0"></i>
    <div>
      <div class="fw-semibold mb-1">{{T "admin.vet.pro_title"}}</div>
      <p class="mb-1 small">{{T "admin.vet.pro_p1"}}<code>{{index .Data "WriteMode"}}</code>{{T "admin.vet.pro_p2"}}</p>
      <ul class="mb-0 small ps-3">
        <li>{{T "admin.vet.pro_li1"}}</li>
        <li>{{T "admin.vet.pro_li2"}}</li>
        <li>{{T "admin.vet.pro_li3"}}</li>
      </ul>
    </div>
  </div>
</div>
{{else}}
<div class="alert alert-warning border-0 shadow-sm mb-3 py-3">
  <div class="d-flex gap-2">
    <i class="bx bx-info-circle fs-4 text-warning flex-shrink-0"></i>
    <div>
      <div class="fw-semibold mb-1">{{T "admin.vet.free_title"}}</div>
      <p class="mb-2 small">{{T "admin.vet.free_p1"}} <code>{{index .Data "WriteMode"}}</code>{{T "admin.vet.free_p2"}}</p>
      <p class="mb-2 small mb-0"><strong>{{T "admin.vet.free_upgrade"}}</strong> {{T "admin.vet.free_p3"}}</p>
      <a class="btn btn-sm btn-primary mt-2" href="{{index .Data "UpgradeURL"}}" target="_blank" rel="noopener"><i class="bx bx-up-arrow-circle me-1"></i>{{T "admin.vet.upgrade_btn"}}</a>
    </div>
  </div>
</div>
{{end}}

<div class="d-flex flex-wrap gap-2 mb-3">
  <a href="/admin/settings" class="btn btn-sm btn-outline-secondary"><i class="bx bx-cog me-1"></i>{{T "admin.vet.retention_btn"}}</a>
  <span class="badge text-bg-light align-self-center px-3 py-2">{{T "admin.vet.summary_tables"}} {{len (index .Data "Tables")}} {{T "admin.vet.summary_tables2"}} {{index .Data "TotalRows"}} {{T "admin.vet.summary_rows"}} {{index .Data "RetentionDays"}} {{T "admin.vet.summary_days"}}</span>
  <span class="badge {{if $shard}}text-bg-success{{else}}text-bg-secondary{{end}} align-self-center px-3 py-2">{{if $shard}}{{T "admin.vet.write_shard"}}{{else}}{{T "admin.vet.write_single"}}{{end}}</span>
</div>

{{with index .Data "Ok"}}<div class="alert alert-success alert-dismissible fade show py-2 mb-3"><button type="button" class="btn-close" data-bs-dismiss="alert"></button>{{T "admin.vet.deleted_ok_prefix"}} {{.}} {{T "admin.vet.deleted_ok_suffix"}}</div>{{end}}
{{with index .Data "Err"}}
  {{if eq . "empty"}}<div class="alert alert-warning py-2 mb-3">{{T "admin.vet.warn_select"}}</div>
  {{else}}<div class="alert alert-danger py-2 mb-3">{{.}}</div>{{end}}
{{end}}

{{if $shard}}
<form method="post" action="/admin/visitor-event-tables" id="dropTablesForm">
{{end}}
  <div class="cs-admin-section">
    <div class="cs-admin-section__head">
      <div class="cs-admin-section__head-icon cs-admin-section__head-icon--sky"><i class="bx bx-table"></i></div>
      <div class="cs-admin-section__head-text">
        <h2 class="cs-admin-section__head-title">{{if $shard}}{{T "admin.vet.list_shard"}}{{else}}{{T "admin.vet.list_single"}}{{end}}</h2>
        <p class="cs-admin-section__head-sub">{{if $shard}}{{T "admin.vet.sub_shard"}}{{else}}{{T "admin.vet.sub_single"}}{{end}}</p>
      </div>
    </div>
    <div class="cs-admin-section__body cs-admin-section__body--flush">
      <div class="table-responsive">
        <table class="table table-hover mb-0 align-middle">
          <thead class="table-light">
            <tr>
              {{if $shard}}<th style="width:2.5rem"><input type="checkbox" class="form-check-input" id="checkAllTables" title="{{T "admin.vet.check_all"}}"></th>{{end}}
              <th>{{T "admin.vet.col_name"}}</th>
              <th>{{T "admin.vet.col_month"}}</th>
              <th>{{T "admin.vet.col_rows"}}</th>
              <th>{{T "admin.vet.col_size"}}</th>
              <th>{{T "admin.vet.col_range"}}</th>
              <th>{{T "admin.vet.col_status"}}</th>
            </tr>
          </thead>
          <tbody>
          {{range index .Data "Tables"}}
            <tr>
              {{if $shard}}
              <td>
                {{if .CanDrop}}
                <input type="checkbox" class="form-check-input table-pick" name="tables" value="{{.TableName}}">
                {{else}}<span class="text-muted">—</span>{{end}}
              </td>
              {{end}}
              <td><code class="ut-admin-code">{{.TableName}}</code></td>
              <td>{{.MonthLabel}}</td>
              <td>{{.RowCount}}</td>
              <td>{{.DataSizeLabel}}</td>
              <td class="small text-muted">
                {{if gt .MinCreatedAt 0}}{{.MinCreatedAt | unixTime}}{{else}}—{{end}}
                {{if gt .MaxCreatedAt 0}} ~ {{.MaxCreatedAt | unixTime}}{{end}}
              </td>
              <td>
                {{if .IsCurrentMonth}}<span class="badge rounded-pill text-bg-primary">{{T "admin.vet.badge_current"}}</span>{{end}}
                {{if .IsLegacy}}<span class="badge rounded-pill text-bg-secondary">{{T "admin.vet.badge_legacy"}}</span>{{end}}
                {{if and $shard .CanDrop}}<span class="badge rounded-pill text-bg-light border">{{T "admin.vet.badge_droppable"}}</span>{{end}}
              </td>
            </tr>
          {{else}}
            <tr><td colspan="{{if $shard}}7{{else}}6{{end}}" class="text-center text-muted py-4">{{if $shard}}{{T "admin.vet.empty_shard"}}{{else}}{{T "admin.vet.empty_single"}}{{end}}</td></tr>
          {{end}}
          </tbody>
        </table>
      </div>
    </div>
  </div>
{{if $shard}}
  <div class="cs-admin-savebar mt-3">
    <p class="cs-admin-savebar__hint mb-0"><i class="bx bx-info-circle me-1"></i>{{T "admin.vet.hint"}}</p>
    <button type="submit" class="btn btn-danger btn-sm" id="btnDropTables"><i class="bx bx-trash me-1"></i>{{T "admin.vet.drop_btn"}}</button>
  </div>
</form>
{{end}}
</div>
{{if $shard}}
<script>
(function () {
  var all = document.getElementById('checkAllTables');
  var picks = document.querySelectorAll('.table-pick');
  if (all) {
    all.addEventListener('change', function () {
      picks.forEach(function (el) { el.checked = all.checked; });
    });
  }
  var form = document.getElementById('dropTablesForm');
  if (form) {
    form.addEventListener('submit', function (e) {
      if (form.getAttribute('data-confirmed') === '1') return;
      e.preventDefault();
      var n = document.querySelectorAll('.table-pick:checked').length;
      if (n === 0) {
        if (typeof window.adminBsAlert === 'function') {
          window.adminBsAlert({ title: {{jsString (T "admin.vet.alert_title")}}, message: {{jsString (T "admin.vet.alert_select")}} });
        } else {
          alert({{jsString (T "admin.vet.alert_select")}});
        }
        return;
      }
      var msg = {{jsString (T "admin.vet.confirm_prefix")}} + n + {{jsString (T "admin.vet.confirm_suffix")}};
      function go() {
        form.setAttribute('data-confirmed', '1');
        form.submit();
      }
      if (typeof window.adminBsConfirm === 'function') {
        window.adminBsConfirm({ title: {{jsString (T "admin.vet.confirm_title")}}, message: msg, okText: {{jsString (T "admin.vet.confirm_ok")}}, okClass: 'btn-danger' }).then(function (ok) {
          if (ok) go();
        });
        return;
      }
      if (confirm(msg)) go();
    });
  }
})();
</script>
{{end}}
{{template "admin/layout_foot" .}}
{{end}}