{{define "invoice_search"}}
<div id="search-container">
  <input
    type="text"
    name="search"
    placeholder="Enter invoice number or id"
    hx-get="/invoices"
    hx-trigger="keyup changed delay:500ms"
    hx-target="#invoice-search-results"
    hx-indicator="#loading-indicator" />

  <div id="loading-indicator" class="htmx-indicator">
    <span>Searching...</span>
    <div class="loading-indicator"></div>
  </div>
</div>
<br />
<div id="invoice-search-results" class="fade-me-out">
  <!-- This is where the invoice details will be loaded -->
</div>
{{end}}