12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364 |
- {{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}}
|