{{ 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-700 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 gap-4 sm:flex-row sm:justify-center">
            <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-gray-700 mt-4">All services are online</h1>
          <p class="text-gray-700 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>
          <h1 class="text-gray-700 mt-4">Degraded performance</h1>
          <p class="text-gray-700 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="inline-flex gap-1 justify-center md:justify-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>
        {{ range $group, $monitorsAndStatus := .Monitors }}
          <details
            open
            class="bg-white shadow-md rounded-lg p-6 py-4 gap-2 [&_svg]:open:rotate-90"
          >
            <summary
              class="flex flex-row gap-2 p-3 py-2 -mx-3 cursor-pointer hover:bg-blue-50 rounded-lg"
            >
              {{ if eq $monitorsAndStatus.Status "SUCCESS" }}
                <span
                  class="flex w-3 h-3 bg-green-400 rounded-full self-center"
                ></span>
              {{ else if eq $monitorsAndStatus.Status "FAILURE" }}
                <span
                  class="flex w-3 h-3 bg-red-400 rounded-full self-center"
                ></span>
              {{ else }}
                <span
                  class="flex w-3 h-3 bg-gray-200 rounded-full self-center"
                ></span>
              {{ end }}
              <h2 class="flex-1 font-semibold capitalize">
                {{ $group }}
              </h2>
              <svg
                class="feather h-6 w-6 overflow-visible self-center transition-all duration-300"
              >
                <use href="/static/icons/feather-sprite.svg#chevron-right" />
              </svg>
            </summary>
            {{ range $monitorsAndStatus.Monitors }}
              <div
                class="grid grid-cols-1 sm:grid-cols-2 gap-2 mt-2 pb-2 border-b last-of-type:pb-0 last-of-type:border-0 border-gray-100"
              >
                <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 }}
                    <div
                      class="has-tooltip [&_.tooltip]:hover:flex [&_.tooltip]:hover:visible flex"
                    >
                      {{ if eq .Status "SUCCESS" }}
                        <div
                          class="bg-green-400 hover:bg-green-500 flex-auto"
                        ></div>
                      {{ else if eq .Status "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 }}
                      <div
                        class="tooltip gap-2 bg-white border border-gray-200 rounded p-2 shadow-lg hidden z-50 absolute mt-10 -ml-4 flex-row text-xs"
                      >
                        {{ if eq .Status "SUCCESS" }}
                          <span
                            class="flex w-3 h-3 bg-green-400 rounded-full self-center"
                          ></span>
                        {{ else if eq .Status "FAILURE" }}
                          <span
                            class="flex w-3 h-3 bg-red-400 rounded-full self-center"
                          ></span>
                        {{ else }}
                          <span
                            class="flex w-3 h-3 bg-gray-200 rounded-full self-center"
                          ></span>
                        {{ end }}
                        {{ if eq $.TimeRange "90days" }}
                          {{ .Date.Format "Jan 02" }}
                        {{ else if eq $.TimeRange "48hours" }}
                          {{ .Date.Format "Jan 02, 15:00 MST" }}
                        {{ else if eq $.TimeRange "90minutes" }}
                          {{ .Date.Format "Jan 02, 15:04 MST" }}
                        {{ end }}
                      </div>
                    </div>
                  {{ 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 }}
          </details>
        {{ end }}
      </div>
    {{ end }}
  </div>
{{ end }}