{{define "rows.html"}}
    {{ range $k, $contact := .contacts }}
      <tr>
        <td><input type="checkbox"
                   name="selected_contact_ids"
                   value="{{ $contact.ID }}"
                   x-model="selected"></td>
        <td>{{ $contact.First }}</td>
        <td>{{ $contact.Last }}</td>
        <td>{{ $contact.Phone }}</td>
        <td>{{ $contact.Email }}</td>
        <td>
          <div data-overflow-menu>
            <button type="button" aria-haspopup="menu"
                    aria-controls="contact-menu-{{ $contact.ID }}"
            >Options
            </button>
            <div role="menu" hidden id="contact-menu-{{ $contact.ID }}">
              <a role="menuitem" href="/contacts/{{ $contact.ID }}/edit">Edit</a>
              <a role="menuitem" href="/contacts/{{ $contact.ID }}">View</a>
              <a role="menuitem" href="#"
                 hx-delete="/contacts/{{ $contact.ID }}"
                 hx-confirm="Are you sure you want to delete this contact?"
                 hx-swap="outerHTML swap:1s"
                 hx-target="closest tr">Delete</a>
            </div>
          </div>
        </td>
      </tr>
    {{ else }}
      <tr>
        <td>No matching rows</td>
      </tr>
    {{end}}
{{end}}