{{define "status_body"}}
<div id="status-body" data-poll aria-live="polite" hx-get="/status/fragment" hx-trigger="load" hx-swap="outerHTML">
  <div class="card" id="overall">
    <h2>Overall <span class="st st-{{.OverallStatus}}">{{.OverallStatus}}</span></h2>
    <p class="muted">{{.OverallHeading}}</p>
  </div>

  <div class="split">
    <div class="card" id="machine">
      <h2>Machine <span class="st st-{{.Machine.Status}}">{{.Machine.Status}}</span></h2>
      <table>
        <thead><tr><th class="metric">Resource</th><th>Usage</th><th>Detail</th></tr></thead>
        <tbody>
          <tr>
            <td class="metric">CPU</td>
            <td class="metric">
              {{if .Machine.CPU.Measured}}
              <meter value="{{.Machine.CPU.Percent}}" min="0" max="100" low="70" high="90" optimum="10">{{.Machine.CPU.BusyText}}</meter>
              {{.Machine.CPU.BusyText}}
              {{else}}<span class="muted">—</span>{{end}}
            </td>
            <td class="muted">{{.Machine.CPU.Detail}}</td>
          </tr>
          <tr>
            <td class="metric">Memory</td>
            <td class="metric">
              {{if .Machine.Memory.Measured}}
              <meter value="{{.Machine.Memory.Percent}}" min="0" max="100" low="70" high="90" optimum="10">{{.Machine.Memory.PctText}}</meter>
              {{.Machine.Memory.PctText}}
              {{else}}<span class="muted">—</span>{{end}}
            </td>
            <td class="muted">{{.Machine.Memory.Detail}}</td>
          </tr>
          <tr>
            <td class="metric">Network</td>
            <td class="metric">
              {{if .Machine.Network.Measured}}
              ↓ {{.Machine.Network.InRateText}}<br>↑ {{.Machine.Network.OutRateText}}
              {{else}}<span class="muted">—</span>{{end}}
            </td>
            <td class="muted">
              {{range .Machine.Network.Interfaces}}
              <div>{{.Name}}: {{.InText}} in, {{.OutText}} out</div>
              {{end}}
              {{if .Machine.Network.Detail}}<div>{{.Machine.Network.Detail}}</div>{{end}}
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="card" id="processes">
      <h2>Processes <span class="st st-{{.ProcessStatus}}">{{.ProcessStatus}}</span></h2>
      {{if .ProcessError}}
      <p class="error">Could not ask supervisord for the process list.</p>
      {{else}}
      <table>
        <thead><tr><th>Program</th><th>State</th><th>Detail</th></tr></thead>
        <tbody>
          {{range .Processes}}
          <tr>
            <td>{{.Name}}</td>
            <td><span class="st st-{{.Status}}">{{.State}}</span></td>
            <td class="muted">{{.Detail}}</td>
          </tr>
          {{end}}
        </tbody>
      </table>
      {{end}}
    </div>
  </div>

  <div class="split">
    <div class="card" id="queue">
      <h2>Mail queue <span class="st st-{{.QueueStatus}}">{{.QueueStatus}}</span></h2>
      {{if .QueueError}}
      <p class="error">{{.QueueError}}</p>
      {{else}}
      <p>{{if .QueueSummary}}{{.QueueSummary}}{{else}}Mail queue is empty.{{end}}</p>
      <a class="btn" href="/mail-queue">View queue</a>
      {{end}}
    </div>

    <div class="card" id="certificate">
      <h2>TLS certificate <span class="st st-{{.Cert.Status}}">{{.Cert.Status}}</span></h2>
      {{if not .Cert.NotAfter.IsZero}}
      <label>Expires</label>
      <span class="code">{{.Cert.NotAfter.UTC.Format "2006-01-02 15:04 UTC"}}</span>
      {{end}}
      <p class="{{if eq .Cert.Status "ok"}}muted{{else}}error{{end}}">{{.Cert.Detail}}</p>
    </div>
  </div>

  <div class="split">
    <div class="card" id="sockets">
      <h2>Milter sockets <span class="st st-{{.SocketStatus}}">{{.SocketStatus}}</span></h2>
      <table>
        <thead><tr><th>Milter</th><th>State</th><th>Detail</th></tr></thead>
        <tbody>
          {{range .Sockets}}
          <tr>
            <td>{{.Name}}</td>
            <td><span class="st st-{{.Status}}">{{.Status}}</span></td>
            <td class="muted">{{.Detail}}</td>
          </tr>
          {{end}}
        </tbody>
      </table>
    </div>

    <div class="card" id="hostname">
      <h2>Hostname and reverse DNS <span class="st st-{{.PTR.Status}}">{{.PTR.Status}}</span></h2>

      <label>Server hostname</label>
      <span class="code">{{if .Hostname}}{{.Hostname}}{{else}}(SELFPOST_HOSTNAME is not set){{end}}</span>

      {{if .PTR.Records}}
      <label>Forward and reverse lookup</label>
      <span class="code">{{range .PTR.Records}}{{.}}
{{end}}</span>
      {{end}}

      <form class="inline" method="post" action="/status/recheck">
        <button type="submit">Re-check DNS</button>
      </form>
    </div>
  </div>
</div>
{{end}}