{{define "index.html"}}
    {{ block "content" . }}

        {{ template "archive_ui.html" . }}

        <form action="/contacts" method="get" class="tool-bar">
          <label for="search">Search Term</label>
          <input id="search" type="search" name="q" value="{{ .search }}"
                 hx-get="/contacts"
                 hx-trigger="search, keyup delay:200ms changed"
                 hx-target="tbody"
                 hx-push-url="true"
                 hx-indicator="#spinner"/>
          <img style="height: 20px" id="spinner" class="htmx-indicator" src="/static/img/spinning-circles.svg"/>
          <input type="submit" value="Search"/>
        </form>

        <form x-data="{ selected: [] }">
          <template
                  x-if="selected.length > 0">
            <div class="box info tool-bar flxed top">
              <slot x-text="selected.length"></slot>
              contacts selected

              <button type="button" class="bad bg color border"
                      @click="confirm(`Delete ${selected.length} contacts?`) &&
                    htmx.ajax('DELETE', '/contacts/', { source: $root, target: document.body })"
              >Delete
              </button>
              <hr aria-orientation="vertical">
              <button type="button" @click="selected = []">Cancel</button>
            </div>
          </template>
          <table>
            <thead>
            <tr>
              <th></th>
              <th>First</th>
              <th>Last</th>
              <th>Phone</th>
              <th>Email</th>
              <th></th>
            </tr>
            </thead>
            <tbody>
            {{ template "rows.html" . }}
            </tbody>
          </table>
          <button hx-delete="/contacts"
                  hx-confirm="Are you sure you want to delete these contacts?"
                  hx-target="body">
            Delete Selected Contacts
          </button>
        </form>
        <p>
          <a href="/contacts/new">Add Contact</a>
          <span hx-get="/contacts/count" hx-trigger="revealed">
          <img id="spinner" style="height: 20px" class="htmx-indicator" src="/static/img/spinning-circles.svg"/>
        </span>
        </p>

    {{ end }}
{{end}}