{{define "content"}}
<div class="card p-3 p-md-4 mb-4 bg-white">
<div class="row g-2 align-items-center">
<div class="col-md-8">
<input class="form-control form-control-lg search" name="q" id="q" placeholder="Suche nach Name, E‑Mail, Fingerprint…"
hx-get="/search" hx-trigger="keyup changed delay:300ms" hx-target="#results" hx-indicator="#busy">
</div>
<div class="col-md-4 text-md-end">
<span id="busy" class="htmx-indicator text-muted">Suche…</span>
</div>
</div>
</div>


<div class="card p-0 bg-white">
<div class="table-responsive">
<table class="table align-middle mb-0">
<thead class="table-light">
<tr>
<th style="width:30%">Name</th>
<th style="width:30%">E‑Mail</th>
<th style="width:25%">Fingerprint</th>
<th style="width:15%" class="text-end">Aktion</th>
</tr>
</thead>
<tbody id="results">
{{template "rows" .Items}}
</tbody>
</table>
</div>
</div>
{{end}}