{{ define "settings" }}
  {{ $description := "Monitors are constantly checking weather a service is online and working correctly." }}

  {{ $length := len .Monitors }}
  {{ if eq $length 0 }}
    <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"
      >
        {{ $description }}
      </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>
  {{ else }}
    <section>
      <table>
        <caption>
          List of Monitors
          <div class="mt-1 gap-4 grid grid-cols-1 md:grid-cols-[1fr,20%]">
            <p>
              {{ $description }}
            </p>
            <a
              href="/settings/monitors/create"
              class="h-min inline-flex justify-center items-center py-2 px-4 text-sm font-medium text-center text-white rounded-lg bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300"
            >
              Create New
              <svg class="feather h-5 w-5 overflow-visible">
                <use href="/static/icons/feather-sprite.svg#plus" />
              </svg>
            </a>
          </div>
        </caption>
        <thead class="text-xs text-gray-700 uppercase bg-gray-50">
          <tr>
            <th scope="col">Monitor Group</th>
            <th scope="col">Name</th>
            <th scope="col">Worker Groups</th>
            <th scope="col">Status</th>
            <th scope="col">Schedule</th>
            <th scope="col">Action</th>
          </tr>
        </thead>
        <tbody>
          {{ range .MonitorGroups }}
            {{ $currentGroup := . }}
            <tr class="row-special">
              <th scope="row">
                {{ . }}
              </th>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            {{ range $group, $monitors := $.Monitors }}
              {{ if eq $group $currentGroup }}
                {{ range $monitors }}
                  <tr>
                    <th scope="row">└─</th>
                    <th scope="row">
                      {{ .Name }}
                    </th>
                    <td>
                      {{ range .WorkerGroups }}
                        <span
                          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800"
                        >
                          {{ . }}
                        </span>
                      {{ end }}
                    </td>
                    <td>
                      {{ if eq .Status "ACTIVE" }}
                        <span
                          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"
                        >
                          ACTIVE
                        </span>
                      {{ else if eq .Status "PAUSED" }}
                        <span
                          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800"
                        >
                          PAUSED
                        </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 }}
                    </td>
                    <td>
                      {{ .Schedule }}
                    </td>
                    <td>
                      <a href="/settings/monitors/{{ .Id }}" class="link"
                        >Details</a
                      >
                    </td>
                  </tr>
                {{ end }}
              {{ end }}
            {{ end }}
          {{ end }}
        </tbody>
      </table>
    </section>
  {{ end }}
{{ end }}