{{define "invoice_search"}}
<h2>Invoices</h2>
<div class="content">
  <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>
</div>
{{end}}