{{ define "settings" }}
  {{ $description := "Targets are definitions of what will be monitored. This can include webpages, servers, anything. You can also use discovery mechanisem to automatically add targets from Kubernetes, Docker, Terraform, DNS and other sources." }}

  {{ $length := len .Targets }}
  {{ 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 targets 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/targets/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 Target
          <svg class="feather ml-1 h-5 w-5 overflow-visible">
            <use href="/static/icons/feather-sprite.svg#plus" />
          </svg>
        </a>
        <a
          href="/settings/targets/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 Auto Discovered Targets
          <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 Targets
          <div class="mt-1 gap-4 grid grid-cols-1 md:grid-cols-[1fr,20%]">
            <p>
              {{ $description }}
            </p>
            <a
              href="/settings/targets/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 .Targets }}
          <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/targets/{{ .Id }}" class="link">Details</a>
              </td>
            </tr>
          </tbody>
        {{ end }}
      </table>
    </section>
  {{ end }}
{{ end }}