{{define "content"}}
{{$data := .Content}}
<section class="row g-3 mb-4">
  <div class="col-12 col-md-6 col-xxl-3">
    <article class="card border-0 shadow-sm uptime-summary-card h-100">
      <div class="card-body">
        <div class="uptime-summary-label"><i class="ti ti-radar-2 me-2"></i>Monitors</div>
        <div class="uptime-summary-value">{{$data.Summary.TotalMonitors}}</div>
      </div>
    </article>
  </div>
  <div class="col-12 col-md-6 col-xxl-3">
    <article class="card border-0 shadow-sm uptime-summary-card h-100">
      <div class="card-body">
        <div class="uptime-summary-label"><i class="ti ti-circle-check me-2"></i>Up</div>
        <div class="uptime-summary-value">{{$data.Summary.UpMonitors}}</div>
      </div>
    </article>
  </div>
  <div class="col-12 col-md-6 col-xxl-3">
    <article class="card border-0 shadow-sm uptime-summary-card h-100">
      <div class="card-body">
        <div class="uptime-summary-label"><i class="ti ti-alert-circle me-2"></i>Down</div>
        <div class="uptime-summary-value">{{$data.Summary.DownMonitors}}</div>
      </div>
    </article>
  </div>
  <div class="col-12 col-md-6 col-xxl-3">
    <article class="card border-0 shadow-sm uptime-summary-card h-100">
      <div class="card-body">
        <div class="uptime-summary-label"><i class="ti ti-wave-sine me-2"></i>Avg latency</div>
        <div class="uptime-summary-value">{{if $data.Summary.AvgLatencyMS}}{{$data.Summary.AvgLatencyMS}}ms{{else}}-{{end}}</div>
      </div>
    </article>
  </div>
</section>

<section class="row g-4 mb-4">
  <div class="col-12 col-xxl-8">
    <article class="card border-0 shadow-sm">
      <div class="card-body p-4">
        <div class="d-flex align-items-center justify-content-between gap-3 mb-4">
          <div>
            <h2 class="h4 mb-1"><i class="ti ti-chart-line me-2"></i>Fleet availability</h2>
            <div class="text-body-secondary small">Last 30 one-minute samples</div>
          </div>
          <span class="text-body-secondary small">1 minute interval</span>
        </div>
        <div class="uptime-chart-shell">
          {{if $data.Chart.Points}}
          <div class="uptime-line-chart">
            <canvas
              id="uptime-chart"
              class="uptime-line-chart-canvas"
              data-labels='{{$data.Chart.LabelsJSON}}'
              data-values='{{$data.Chart.ValuesJSON}}'
              data-point-colors='{{$data.Chart.PointColorsJSON}}'
              aria-label="Fleet availability chart"
            ></canvas>
          </div>
          {{else}}
          <div class="text-body-secondary"><i class="ti ti-radar-off me-2"></i>No checks yet. Add a VM or run checks.</div>
          {{end}}
        </div>
      </div>
    </article>
  </div>

  <div class="col-12 col-xxl-4">
    <article class="card border-0 shadow-sm h-100">
      <div class="card-body p-4">
        <h2 class="h4 mb-4"><i class="ti ti-report-analytics me-2"></i>Availability</h2>
        <div class="table-responsive">
          <table class="table align-middle mb-0 uptime-table uptime-table-compact">
            <thead>
              <tr>
                <th><i class="ti ti-calendar me-2"></i>Period</th>
                <th><i class="ti ti-activity me-2"></i>Availability</th>
                <th><i class="ti ti-plug-connected-x me-2"></i>Downtime</th>
                <th><i class="ti ti-alert-triangle me-2"></i>Incidents</th>
                <th><i class="ti ti-hourglass-high me-2"></i>Longest</th>
                <th><i class="ti ti-average me-2"></i>Avg</th>
              </tr>
            </thead>
            <tbody>
              {{range $data.Periods}}
              <tr>
                <td class="text-nowrap">{{.Label}}</td>
                <td class="text-nowrap">{{.AvailabilityText}}</td>
                <td class="text-nowrap">{{.DowntimeText}}</td>
                <td>{{.Incidents}}</td>
                <td class="text-nowrap">{{.LongestText}}</td>
                <td class="text-nowrap">{{.AverageText}}</td>
              </tr>
              {{end}}
            </tbody>
          </table>
        </div>
      </div>
    </article>
  </div>
</section>

<section class="mb-4">
  <article class="card border-0 shadow-sm">
    <div class="card-body p-4">
      <div class="d-flex align-items-center justify-content-between gap-3 mb-4">
        <h2 class="h4 mb-0"><i class="ti ti-server-2 me-2"></i>Nodes</h2>
        <span class="text-body-secondary small">{{len $data.Monitors}} total</span>
      </div>
      <div class="table-responsive">
        <table class="table align-middle mb-0 uptime-table uptime-table-nodes">
          <thead>
            <tr>
              <th><i class="ti ti-server-2 me-2"></i>Node</th>
              <th><i class="ti ti-heartbeat me-2"></i>Status</th>
              <th><i class="ti ti-activity me-2"></i>Availability</th>
              <th><i class="ti ti-wave-sine me-2"></i>Latency</th>
              <th><i class="ti ti-clock me-2"></i>Checked</th>
              <th><i class="ti ti-timeline me-2"></i>Window</th>
              <th><i class="ti ti-chart-bar me-2"></i>Recent</th>
            </tr>
          </thead>
          <tbody>
            {{if $data.Monitors}}
              {{range $data.Monitors}}
              <tr>
                <td>
                  <div class="fw-semibold text-body-emphasis"><i class="ti ti-server-2 me-2"></i>{{.Monitor.Name}}</div>
                  <div class="small text-body-secondary"><i class="ti ti-world me-1"></i>{{.Monitor.Target}}{{if .Monitor.GroupName}} · {{.Monitor.GroupName}}{{end}}</div>
                </td>
                <td>
                  <span class="uptime-monitor-badge {{if eq .Monitor.LastStatus "down"}}is-down{{else if eq .Monitor.LastStatus "up"}}is-up{{else}}is-pending{{end}}">
                    {{if eq .Monitor.LastStatus "down"}}Down{{else if eq .Monitor.LastStatus "up"}}Up{{else}}Pending{{end}}
                  </span>
                </td>
                <td class="text-nowrap">{{.AvailabilityText}}</td>
                <td class="text-nowrap">{{if .Monitor.LastLatencyMS}}{{.Monitor.LastLatencyMS}}ms{{else}}-{{end}}</td>
                <td class="text-nowrap">{{.LastCheckedText}}</td>
                <td class="text-nowrap">{{.StateDurationText}}</td>
                <td>
                  <div class="uptime-check-strip uptime-check-strip-table" aria-hidden="true">
                    {{if .RecentChecks}}
                      {{range .RecentChecks}}
                      <span class="uptime-check-pill {{if eq .Status "down"}}is-down{{else if eq .Status "up"}}is-up{{else}}is-pending{{end}}" title="{{.Status}} · {{.CheckedAt.Format "2006-01-02 15:04:05"}}"></span>
                      {{end}}
                    {{else}}
                      <span class="small text-body-secondary">No checks</span>
                    {{end}}
                  </div>
                </td>
              </tr>
              {{end}}
            {{else}}
              <tr>
                <td colspan="7" class="text-body-secondary">No monitors yet. Add a VM to start tracking uptime.</td>
              </tr>
            {{end}}
          </tbody>
        </table>
      </div>
    </div>
  </article>
</section>

<section>
  <article class="card border-0 shadow-sm">
    <div class="card-body p-4">
      <div class="d-flex align-items-center justify-content-between gap-3 mb-4">
        <h2 class="h4 mb-0"><i class="ti ti-alert-octagon me-2"></i>Incidents</h2>
        <span class="text-body-secondary small">{{len $data.Incidents}} recent</span>
      </div>
      <div class="table-responsive">
        <table class="table align-middle mb-0 uptime-table uptime-table-compact">
          <thead>
            <tr>
              <th><i class="ti ti-radar-2 me-2"></i>Monitor</th>
              <th><i class="ti ti-player-play me-2"></i>Started</th>
              <th><i class="ti ti-player-stop me-2"></i>Ended</th>
              <th><i class="ti ti-clock-hour-4 me-2"></i>Duration</th>
              <th><i class="ti ti-bug me-2"></i>Error</th>
            </tr>
          </thead>
          <tbody>
            {{if $data.Incidents}}
              {{range $data.Incidents}}
              <tr>
                <td class="text-nowrap">{{.MonitorName}}</td>
                <td class="text-nowrap">{{.StartedAt.Format "2006-01-02 15:04:05"}}</td>
                <td class="text-nowrap">{{if .EndedAt}}{{.EndedAt.Format "2006-01-02 15:04:05"}}{{else}}Active{{end}}</td>
                <td class="text-nowrap">{{.DurationText}}</td>
                <td>{{if .ErrorMessage}}{{.ErrorMessage}}{{else}}Connection failed{{end}}</td>
              </tr>
              {{end}}
            {{else}}
              <tr>
                <td colspan="5" class="text-body-secondary">No incidents recorded yet.</td>
              </tr>
            {{end}}
          </tbody>
        </table>
      </div>
    </div>
  </article>
</section>
{{end}}
