{{ define "settings" }}
  <div class="pt-8 mx-auto max-w-screen-xl text-center lg:pt-16">
    <h1
      class="mb-4 text-2xl font-extrabold tracking-tight leading-none text-gray-900 md:text-3xl lg:text-4xl"
    >
      Hi there, {{ .User.Email }}.
    </h1>
    <p class="mb-8 text-l font-normal text-gray-500 lg:text-l sm:px-8 md:px-40">
      Welcome to the settings page. Here you can manage your worker groups,
      checks, and notifications.
    </p>
  </div>

  <div class="mx-auto max-w-screen-xl flex flex-col sm:flex-row gap-4">
    <div
      class="inline-block bg-white rounded-lg shadow p-5 text-center sm:text-left"
    >
      <h3 class="text-sm leading-6 font-medium text-gray-400">Total Targets</h3>
      <p class="text-3xl font-bold text-black">{{ .ChecksCount }}</p>
    </div>
    <div
      class="inline-block bg-white rounded-lg shadow p-5 text-center sm:text-left"
    >
      <h3 class="text-sm leading-6 font-medium text-gray-400">Total Checks</h3>
      <p class="text-3xl font-bold text-black">{{ .ChecksCount }}</p>
    </div>
    <div
      class="inline-block bg-white rounded-lg shadow p-5 text-center sm:text-left"
    >
      <h3 class="text-sm leading-6 font-medium text-gray-400">
        Total Worker Groups
      </h3>
      <p class="text-3xl font-bold text-black">{{ .WorkerGroupsCount }}</p>
    </div>
    <div
      class="inline-block bg-white rounded-lg shadow p-5 text-center sm:text-left"
    >
      <h3 class="text-sm leading-6 font-medium text-gray-400">
        Total Notifications
      </h3>
      <p class="text-3xl font-bold text-black">{{ .NotificationsCount }}</p>
    </div>
  </div>

  <section class="mt-4">
    <table>
      <caption>
        Execution History
        <p>Last 10 executions for all checks and worker groups.</p>
      </caption>
      <thead>
        <tr>
          <th>Check</th>
          <th>Worker Group</th>
          <th>Status</th>
          <th>Executed At</th>
          <th>Note</th>
        </tr>
      </thead>
      <tbody>
        {{ range .History }}
          <tr>
            <th>
              <a
                class="underline hover:text-blue-600"
                href="/settings/checks/{{ .CheckId }}"
                >{{ .CheckId }}</a
              >
            </th>
            <td>
              <span
                class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800"
              >
                { .WorkerGroupName }
              </span>
            </td>
            <td>
              <span
                class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full {{ if eq .Status "SUCCESS" }}
                  bg-green-100 text-green-800
                {{ else }}
                  bg-red-100 text-red-800
                {{ end }}"
              >
                {{ .Status }}
              </span>
            </td>
            <td>{ .CreatedAt.Time.Format "2006-01-02 15:04:05" }</td>
            <td class="whitespace-normal">{ .Note }</td>
          </tr>
        {{ end }}
      </tbody>
    </table>
  </section>
{{ end }}