{{define "main"}}
  <div class="flex flex-col items-center">
    <svg class="feather h-20 w-20 rounded-full bg-green-300 p-4 overflow-visible"><use href="/static/icons/feather-sprite.svg#check" /></svg>
    <h1 class="text-slate-500">All services are online</h1>
    <p class="text-slate-500 text-sm">Last updated on Feb 10 at 10:55am UTC</p>
  </div>
  <div class="flex flex-col items-center mt-20">
    <svg class="feather h-20 w-20 rounded-full bg-red-300 p-4 overflow-visible"><use href="/static/icons/feather-sprite.svg#alert-triangle" /></svg>
    <h3 class="text-slate-500">Degraded performance</h3>
    <p class="text-slate-500 text-sm">Last updated on Feb 10 at 10:55am UTC</p>
  </div>
  <div class="healthchecks">
    {{ range .HealthChecks }}
    <div class="grid grid-cols-2 gap-2">
      <div class="flex items-center">
        {{ if .Healthy }}
        <span class="flex w-3 h-3 me-2 bg-green-500 rounded-full"></span>
        {{ else }}
        <span class="flex w-3 h-3 me-2 bg-red-500 rounded-full"></span>
        {{ end }}
        <p>{{ .Domain }}</p>
      </div>
      <div class="justify-self-end text-sm">{{ .Uptime }}% uptime</div>
      <div class="grid gap-px col-span-2 grid-flow-col h-8 rounded overflow-hidden">
        {{ range .History }}
        {{ if . }}
        <div class="bg-green-500 hover:bg-green-700 flex-auto"></div>
        {{ else }}
        <div class="bg-red-500 hover:bg-red-700 flex-auto"></div>
        {{ end }}
        {{ end }}
     </div>
      <div class="text-slate-500 justify-self-start text-sm">90 days ago</div>
      <div class="text-slate-500 justify-self-end text-sm">Today</div>
    </div>
    {{ end }}
  </div>
{{end}}