{{define "alert_row"}}
{{$a := .Alert}}
{{$hostNames := .HostNames}}
{{$usernames := .Usernames}}
{{$filter := .Filter}}
{{$status := alertStatus $a.ResolvedAt $a.AcknowledgedAt}}

{{/* derive query string for redirect-back after ack/resolve */}}
{{$qs := ""}}
{{if $filter.Status}}{{$qs = printf "status=%s" $filter.Status}}{{end}}
{{if $filter.Severity}}{{$qs = printf "%s&severity=%s" $qs $filter.Severity}}{{end}}
{{if $filter.HostID}}{{$qs = printf "%s&host_id=%s" $qs $filter.HostID}}{{end}}
{{if $filter.Search}}{{$qs = printf "%s&q=%s" $qs $filter.Search}}{{end}}

<div class="alert-row severity-{{$a.Severity}}{{if eq $status "resolved"}} resolved{{end}}"
     {{if eq $status "acknowledged"}}style="background: color-mix(in oklch, var(--warn), transparent 96%);"{{end}}>

  {{/* dot */}}
  <div>
    {{if eq $status "resolved"}}
      <span class="dot dot-online"></span>
    {{else if eq $a.Severity "critical"}}
      <span class="dot dot-failed"></span>
    {{else if eq $a.Severity "warning"}}
      <span class="dot dot-degraded"></span>
    {{else}}
      <span class="dot dot-offline"></span>
    {{end}}
  </div>

  {{/* severity + kind tag */}}
  <div>
    {{if eq $a.Severity "critical"}}
      <span class="tag tag-critical">{{$a.Kind}}</span>
    {{else if eq $a.Severity "warning"}}
      <span class="tag tag-warn">{{$a.Kind}}</span>
    {{else}}
      <span class="tag tag-info">{{$a.Kind}}</span>
    {{end}}
  </div>

  {{/* host */}}
  <div class="mono {{if eq $status "resolved"}}text-ink-mid{{else}}text-ink{{end}}">
    {{mapGet $hostNames $a.HostID}}
  </div>

  {{/* message */}}
  <div class="{{if eq $status "resolved"}}text-ink-mute{{else}}text-ink{{end}}">
    {{$a.Message}}
  </div>

  {{/* raised (created_at) */}}
  <div class="mono {{if eq $status "resolved"}}text-ink-fade{{else}}text-ink-mid{{end}}">
    {{relTime $a.CreatedAt}}
  </div>

  {{/* last seen */}}
  <div class="mono {{if and (eq $status "open") (stillHappening $a.LastSeenAt)}}text-warn{{else if eq $status "resolved"}}text-ink-fade{{else}}text-ink-mid{{end}}">
    {{if and (eq $status "open") (stillHappening $a.LastSeenAt)}}
      still happening · {{relTime $a.LastSeenAt}}
    {{else}}
      {{relTime $a.LastSeenAt}}
    {{end}}
  </div>

  {{/* actions */}}
  <div style="display: flex; gap: 6px; justify-content: flex-end; align-items: center;">
    {{if eq $status "open"}}
      <form method="post" action="/alerts/{{$a.ID}}/acknowledge">
        {{if $qs}}<input type="hidden" name="qs" value="{{$qs}}">{{end}}
        <button type="submit" class="btn"
                hx-post="/alerts/{{$a.ID}}/acknowledge{{if $qs}}?{{$qs}}{{end}}"
                hx-swap="none"
                title="I've seen this — silence further fan-out, but the alert is still open until the condition clears or you Resolve it.">Acknowledge</button>
      </form>
      <form method="post" action="/alerts/{{$a.ID}}/resolve">
        {{if $qs}}<input type="hidden" name="qs" value="{{$qs}}">{{end}}
        <button type="submit" class="btn"
                hx-post="/alerts/{{$a.ID}}/resolve{{if $qs}}?{{$qs}}{{end}}"
                hx-swap="none"
                title="The underlying issue is fixed. Closes the alert. If the condition fires again a fresh alert will be raised with a new fan-out.">Resolve</button>
      </form>
    {{else if eq $status "acknowledged"}}
      <span class="text-ink-fade" style="font-size: 11px;">
        {{$ackedBy := ""}}
        {{if $a.AcknowledgedBy}}
          {{$id := deref $a.AcknowledgedBy}}
          {{if index $usernames $id}}{{$ackedBy = index $usernames $id}}{{else}}{{$ackedBy = $id}}{{end}}
        {{end}}
        ack'd{{if $ackedBy}} by {{$ackedBy}}{{end}} · {{relTime $a.AcknowledgedAt}}
      </span>
      <form method="post" action="/alerts/{{$a.ID}}/resolve">
        {{if $qs}}<input type="hidden" name="qs" value="{{$qs}}">{{end}}
        <button type="submit" class="btn"
                hx-post="/alerts/{{$a.ID}}/resolve{{if $qs}}?{{$qs}}{{end}}"
                hx-swap="none"
                title="The underlying issue is fixed. Closes the alert.">Resolve</button>
      </form>
    {{else}}
      <span class="text-ink-fade" style="font-size: 11px;">resolved · {{relTime $a.ResolvedAt}}</span>
    {{end}}
  </div>

</div>
{{end}}