{{ define "main" }}
  <div class="container max-w-screen-md flex flex-col mt-20 gap-20">
    {{ $length := len .Monitors }}
    {{ if eq $length 0 }}
      <section>
        <div class="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16">
          <h1
            class="mb-4 text-2xl font-extrabold tracking-tight leading-none text-gray-900 md:text-3xl lg:text-4xl"
          >
            There are no monitors yet.
          </h1>
          <p
            class="mb-8 text-l font-normal text-gray-500 lg:text-l sm:px-8 lg:px-40"
          >
            Create a monitor to monitor your services and get notified when they
            are down.
          </p>
          <div
            class="flex flex-col space-y-4 sm:flex-row sm:justify-center sm:space-y-0"
          >
            <a
              href="/settings/monitors/create"
              class="inline-flex justify-center items-center py-3 px-5 text-base font-medium text-center text-white rounded-lg bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300"
            >
              Create First Monitor
              <svg class="feather ml-1 h-5 w-5 overflow-visible">
                <use href="/static/icons/feather-sprite.svg#plus" />
              </svg>
            </a>
          </div>
        </div>
      </section>
    {{ else }}
      {{ if or (eq .Status "UNKNOWN") (eq .Status "SUCCESS") }}
        <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 mt-4">All services are online</h1>
          <p class="text-slate-500 text-sm">
            Last updated on
            {{ Now.UTC.Format "Jan 02 at 15:04 MST" }}
          </p>
        </div>
      {{ else }}
        <div class="flex flex-col items-center">
          <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 mt-4">Degraded performance</h3>
          <p class="text-slate-500 text-sm">
            Last updated on
            {{ Now.UTC.Format "Jan 02 at 15:04 MST" }}
          </p>
        </div>
      {{ end }}
      <div class="monitors flex flex-col gap-4">
        <div class="grid grid-cols-1 sm:grid-cols-2 px-4 sm:px-0">
          <h2
            class="text-xl font-normal text-gray-800 text-center sm:text-left"
          >
            Monitors
          </h2>
          <div
            class="inline-flex gap-1 justify-self-center sm:justify-self-end time-range"
            role="group"
          >
            <a
              href="/?time-range=90days"
              class="{{ if eq .TimeRange "90days" }}active{{ end }}"
              type="button"
              >90 Days</a
            >
            <a
              href="/?time-range=48hours"
              class="{{ if eq .TimeRange "48hours" }}active{{ end }}"
              type="button"
              >48 Hours</a
            >
            <a
              href="/?time-range=90minutes"
              class="{{ if eq .TimeRange "90minutes" }}active{{ end }}"
              type="button"
              >90 Minutes</a
            >
          </div>
        </div>
        {{ range $group, $monitors := .Monitors }}
          <div class="monitors-list gap-2">
            <h3 class="flex flex-row gap-2 p-5 py-4 border-b border-gray-200">
              <span
                class="flex w-3 h-3 bg-green-400 rounded-full self-center"
              ></span>
              <span class="flex-1 font-semibold uppercase ">{{ $group }}</span>
              <svg class="feather h-6 w-6 overflow-visible self-center">
                <use href="/static/icons/feather-sprite.svg#chevron-down" />
              </svg>
            </h3>
            {{ range $monitors }}
              <div class="grid grid-cols-1 sm:grid-cols-2 gap-2 p-5 py-2">
                <div class="flex items-center gap-2">
                  {{ if eq .Status "SUCCESS" }}
                    <span class="flex w-3 h-3 bg-green-400 rounded-full"></span>
                  {{ else if eq .Status "FAILURE" }}
                    <span class="flex w-3 h-3 bg-red-400 rounded-full"></span>
                  {{ else }}
                    <span class="flex w-3 h-3 bg-gray-200 rounded-full"></span>
                  {{ end }}
                  <h4>{{ .Name }}</h4>
                </div>
                <div class="justify-self-end text-sm">
                  {{ .History.Uptime }}% uptime
                </div>
                <div
                  class="grid gap-px col-span-2 grid-flow-col h-8 rounded overflow-hidden"
                >
                  {{ range .History.List }}
                    {{ if eq . "SUCCESS" }}
                      <div
                        class="bg-green-400 hover:bg-green-500 flex-auto"
                      ></div>
                    {{ else if eq . "FAILURE" }}
                      <div class="bg-red-400 hover:bg-red-500 flex-auto"></div>
                    {{ else }}
                      <div
                        class="bg-gray-200 hover:bg-gray-300 flex-auto"
                      ></div>
                    {{ end }}
                  {{ end }}
                </div>
                <div
                  class="text-slate-500 justify-self-start text-xs tracking-wider"
                >
                  {{ if eq $.TimeRange "90days" }}
                    90 days ago
                  {{ else if eq $.TimeRange "48hours" }}
                    48 hours ago
                  {{ else if eq $.TimeRange "90minutes" }}
                    90 minutes ago
                  {{ end }}
                </div>
                <div
                  class="text-slate-500 justify-self-end text-xs tracking-wider"
                >
                  Now
                </div>
              </div>
            {{ end }}
          </div>
        {{ end }}
      </div>
    {{ end }}
  </div>
{{ end }}