{{ define "settings" }}
  {{ $description := "Notifications are connections to other services to notify about events. This can be slack messages, emails, webhooks, anything." }}

  {{ $length := len .Notifications }}
  {{ 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 notifications 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/notifications/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 Notification
          <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 Notifications
          <div class="mt-1 gap-4 grid grid-cols-1 md:grid-cols-[1fr,20%]">
            <p>
              {{ $description }}
            </p>
            <a
              href="/settings/notifications/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 .Notifications }}
          <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/notifications/{{ .Id }}" class="link"
                  >Details</a
                >
              </td>
            </tr>
          </tbody>
        {{ end }}
      </table>
    </section>
  {{ end }}
{{ end }}