{{define "rows.html"}}
{% for contact in 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>
{% endfor %}
{{end}}