{{define "index.html"}}
{% extends 'layout.html' %}

{{ block "content" . }}

    {% include '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="{{ .request.args.get 'q' }}"
               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>
        {% include '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}}