{{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}}
  <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}}

</div>
{{end}}
