{{ 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>
    <table>
      <caption>
        History
        <p>Last 10 executions.</p>
      </caption>
      <thead>
        <tr>
          <th>Check ID</th>
          <th>Status</th>
          <th>Worker Group</th>
          <th>Started At</th>
          <th>Ended At</th>
          <th>Duration</th>
          <th>Note</th>
        </tr>
      </thead>
      <tbody>
        {{ range .History }}
          {{ if eq .Status "Running" }}
            <tr>
              <td>{{ .CheckId }}</td>
              <td>
                <span
                  class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800"
                >
                  {{ .Status }}...
                </span>
              </td>
              <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>{{ .StartTime.Format "2006-01-02 15:04:05" }}</td>
              <td></td>
              <td></td>
              <td class="whitespace-normal"></td>
            </tr>
          {{ else }}
            <tr>
              <td>{{ .CheckId }}</td>
              <td>
                <span
                  class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full
                  {{ if eq .Status "Completed" }}
                    bg-purple-100 text-purple-800
                  {{ else }}
                    bg-red-100 text-red-800
                  {{ end }}
                  "
                >
                  {{ .Status }}
                </span>
              </td>
              <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>{{ .StartTime.Format "2006-01-02 15:04:05" }}</td>
              <td>{{ .EndTime.Format "2006-01-02 15:04:05" }}</td>
              <td>{{ DurationRoundMillisecond .Duration }}</td>
              <td class="whitespace-normal">{{ .Note }}</td>
            </tr>
          {{ end }}
        {{ end }}
      </tbody>
    </table>
  </section>
{{ end }}