{{ define "settings" }}
  {{ $description := "Hooks can be used to monitor <strong>CronJobs</strong> by making sure they execute at specified intervals, for  <strong>alert integrations</strong> and <strong>heartbeat monitoring</strong> to notify when requests stop coming for certain time periods." }}

  {{ $length := len .Hooks }}
  {{ 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 hooks yet.
      </h1>
      <p
        class="mb-8 text-l font-normal text-gray-700 lg:text-l sm:px-8 lg:px-40"
      >
        {{ $description }}
      </p>
      <div class="flex flex-col gap-4 sm:flex-row sm:justify-center">
        <a
          href="/settings/hooks/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 Hook
          <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 Hooks
          <div class="mt-1 gap-4 grid grid-cols-1 md:grid-cols-[1fr,20%]">
            <p>
              {{ $description }}
            </p>
            <a
              href="/settings/hooks/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">Name</th>
            <th scope="col">Targets</th>
            <th scope="col">State</th>
            <th scope="col">Schedule</th>
            <th scope="col">Action</th>
          </tr>
        </thead>
        <tbody>
          {{ range $hooks := .Hooks }}
            <tr>
              <th scope="row">
                {{ .Name }}
              </th>
              <td>
                <span
                  class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
                  >3</span
                >
              </td>
              <td>
                {{ if eq .State "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 .State "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/hooks/{{ .Id }}" class="link">Details</a>
              </td>
            </tr>
          {{ end }}
        </tbody>
      </table>
    </section>
  {{ end }}
{{ end }}