{{template "base" .}}
{{define "content"}}
<div style="max-width:1200px">

  <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px">
    <div>
      <div class="page-title">Metrics</div>
      <div class="page-sub">Real-time CrowdSec statistics from cscli metrics</div>
    </div>
    {{if .CLIAvailable}}
    <a href="/metrics-ui" class="btn-secondary">Refresh</a>
    {{end}}
  </div>

  {{if not .CLIAvailable}}
  <div class="cli-unavail-banner" style="margin-bottom:16px">
    <div>
      <strong style="display:block;margin-bottom:4px">cscli unavailable</strong>
      Metrics require the cscli binary. Mount it at the CSCLI_PATH configured in your environment.
    </div>
  </div>
  {{end}}

  {{if .Sections}}
  {{range .Sections}}
  <div class="panel" style="margin-bottom:16px">
    <div class="panel-header">
      <span class="panel-title">{{.Title}}</span>
    </div>
    {{if and .Headers .Rows}}
    <div style="overflow-x:auto">
      <table class="data-table">
        <thead>
          <tr>
            {{range .Headers}}<th>{{.}}</th>{{end}}
          </tr>
        </thead>
        <tbody>
          {{range .Rows}}
          <tr>
            {{range .}}<td style="font-family:'JetBrains Mono',monospace;font-size:12px">{{.}}</td>{{end}}
          </tr>
          {{end}}
        </tbody>
      </table>
    </div>
    {{else}}
    <div class="empty-state">
      <div class="empty-text">No data in this section</div>
    </div>
    {{end}}
  </div>
  {{end}}
  {{else if .CLIAvailable}}
  {{if .RawOutput}}
  <div class="panel" style="margin-bottom:16px">
    <div class="panel-header"><span class="panel-title">Raw cscli metrics output</span></div>
    <div class="panel-body" style="padding:12px 18px">
      <pre style="font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);white-space:pre-wrap;word-break:break-all;max-height:600px;overflow-y:auto">{{.RawOutput}}</pre>
    </div>
  </div>
  {{else}}
  <div class="empty-state" style="padding:48px">
    <div class="empty-text">No metrics available</div>
    <div class="empty-sub">CrowdSec may not have processed any data yet</div>
  </div>
  {{end}}
  {{end}}

</div>
{{end}}