{{ define "main" }}
  <div
    id="page-index"
    class="container max-w-screen-md flex flex-col mt-20 gap-20"
  >
    {{ $length := len .Targets }}
    {{ 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 targets yet.
          </h1>
          <p
            class="mb-8 text-l font-normal text-gray-700 lg:text-l sm:px-8 lg:px-40"
          >
            Create a target to target 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/targets/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 Target
              <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 eq .Outcome "HEALTHY" }}
        <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 text-lg">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 if eq .Outcome "UNKNOWN" }}
        <div class="flex flex-col items-center">
          <svg
            class="feather h-20 w-20 rounded-full bg-gray-300 p-4 overflow-visible"
          >
            <use href="/static/icons/feather-sprite.svg#help-circle" />
          </svg>
          <h1 class="text-gray-700 mt-4 text-lg">
            We are unable to determine current status
          </h1>
          <p class="text-gray-700 text-sm">
            Last updated on
            {{ Now.UTC.Format "Jan 02 at 15:04 MST" }}
          </p>
        </div>
      {{ else if eq .Outcome "DOWN" }}
        <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-circle" />
          </svg>
          <h1 class="text-gray-700 mt-4 text-lg">Some services are down</h1>
          <p class="text-gray-700 text-sm">
            Last updated on
            {{ Now.UTC.Format "Jan 02 at 15:04 MST" }}
          </p>
        </div>
      {{ else if eq .Outcome "DEGRADED" }}
        <div class="flex flex-col items-center">
          <svg
            class="feather h-20 w-20 rounded-full bg-orange-300 p-4 overflow-visible"
          >
            <use href="/static/icons/feather-sprite.svg#alert-triangle" />
          </svg>
          <h1 class="text-gray-700 mt-4 text-lg">Degraded services</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="targets flex flex-col gap-4">
        <div
          class="inline-flex gap-1 justify-center md:justify-end time-range"
          role="group"
        >
          <a
            href="/?time-range=60days"
            class="{{ if eq .TimeRange "60days" }}active{{ end }}"
            type="button"
            >60 Days</a
          >
          <a
            href="/?time-range=48hours"
            class="{{ if eq .TimeRange "48hours" }}active{{ end }}"
            type="button"
            >48 Hours</a
          >
          <a
            href="/?time-range=60minutes"
            class="{{ if eq .TimeRange "60minutes" }}active{{ end }}"
            type="button"
            >60 Minutes</a
          >
        </div>
        {{ range $group, $targetsAndStatus := .Targets }}
          <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"
            >
              <span
                class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full
                {{ if eq $targetsAndStatus.Outcome "HEALTHY" }}
                  bg-green-100 text-green-800
                {{ else if eq $targetsAndStatus.Outcome "DOWN" }}
                  bg-red-100 text-red-800
                {{ else if eq $targetsAndStatus.Outcome "DEGRADED" }}
                  bg-orange-100 text-orange-800
                {{ else }}
                  bg-gray-100 text-gray-800
                {{ end }}"
                >{{ .Outcome }}</span
              >
              <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 $targetsAndStatus.Targets }}
              <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">
                  <span
                    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full
                    {{ if eq .Outcome "HEALTHY" }}
                      bg-green-100 text-green-800
                    {{ else if eq .Outcome "DOWN" }}
                      bg-red-100 text-red-800
                    {{ else if eq .Outcome "DEGRADED" }}
                      bg-orange-100 text-orange-800
                    {{ else }}
                      bg-gray-100 text-gray-800
                    {{ end }}"
                    >{{ .Outcome }}</span
                  >
                  <h4>
                    {{ .Name }}
                    {{ if eq .Visibility "PUBLIC" }}
                    {{ else if eq .Visibility "PRIVATE" }}
                      <span
                        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-fuchsia-100 text-fuchsia-800"
                      >
                        Private
                      </span>
                    {{ else }}
                      <span
                        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
                      >
                        Unknown
                      </span>
                    {{ end }}
                  </h4>
                </div>
                <div class="justify-self-end text-sm">
                  {{ printf "%.2f" .Uptime }}% uptime
                </div>

                <div
                  class="grid gap-px col-span-2 grid-flow-col h-8 rounded overflow-hidden"
                >
                  {{ range .History }}
                    <div
                      class="has-tooltip [&_.tooltip]:hover:flex [&_.tooltip]:hover:visible flex
                          {{ if eq .Outcome "HEALTHY" }}
                        history healthy
                      {{ else if eq .Outcome "DOWN" }}
                        history down
                      {{ else if eq .Outcome "DEGRADED" }}
                        history degraded
                      {{ else }}
                        history unknown
                      {{ end }}"
                    >
                      <div class="flex-auto bar"></div>
                      <div
                        class="tooltip flex flex-col 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"
                      >
                        <div class="flex flex-row gap-2 justify-between">
                          {{ if eq $.TimeRange "60days" }}
                            {{ .Date.Format "Jan 02" }}
                          {{ else if eq $.TimeRange "48hours" }}
                            {{ .Date.Format "Jan 02, 15:00 MST" }}
                          {{ else if eq $.TimeRange "60minutes" }}
                            {{ .Date.Format "Jan 02, 15:04 MST" }}
                          {{ end }}
                          <span
                            class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full
                              {{ if eq .Outcome "HEALTHY" }}
                              bg-green-100 text-green-800
                            {{ else if eq .Outcome "DOWN" }}
                              bg-red-100 text-red-800
                            {{ else if eq .Outcome "DEGRADED" }}
                              bg-orange-100 text-orange-800
                            {{ else }}
                              bg-gray-100 text-gray-800
                            {{ end }}"
                            >{{ .Outcome }}
                          </span>
                        </div>
                      </div>
                    </div>
                  {{ end }}
                </div>

                <div
                  class="text-slate-500 justify-self-start text-xs tracking-wider"
                >
                  {{ if eq $.TimeRange "60days" }}
                    60 days ago
                  {{ else if eq $.TimeRange "48hours" }}
                    48 hours ago
                  {{ else if eq $.TimeRange "60minutes" }}
                    60 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 }}