{{ define "settings" }}
  {{ $description := "Incidents represent an event where some services were unavailable. Incidents can either be created automatically via the Triggers or manually. Incidents can be resolved manually or via triggers as well, once services are healthy again." }}

  {{ $length := len .Incidents }}
  {{ 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 incidents 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/incidents/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"
        >
          Add Manual Incident
          <svg class="feather ml-1 h-5 w-5 overflow-visible">
            <use href="/static/icons/feather-sprite.svg#plus" />
          </svg>
        </a>
        <a
          href="/settings/triggers"
          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"
        >
          Go to Triggers
        </a>
      </div>
    </div>
  {{ else }}
    <section>
      <table>
        <caption>
          List of Incidents
          <div class="mt-1 gap-4 grid grid-cols-1 md:grid-cols-[1fr,20%]">
            <p>
              {{ $description }}
            </p>
            <a
              href="/settings/incidents/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>
          <tr>
            <th>Name</th>
            <th>Type</th>
            <th>Action</th>
          </tr>
        </thead>
        {{ range .Incidents }}
          <tbody>
            <tr>
              <th scope="row">
                {{ .Name }}
              </th>
              <td>
                <span
                  class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800"
                >
                  {{ .Type }}
                </span>
              </td>
              <td>
                <a href="/settings/incidents/{{ .Id }}" class="link">Details</a>
              </td>
            </tr>
          </tbody>
        {{ end }}
      </table>
    </section>
  {{ end }}
{{ end }}