{{define "invoice_search"}}
<h2>Update Invoice Status</h2>
<div class="content">
  <h3 class="submenu-header">Search Invoice</h3>
  <div id="search-container">
    <input class="card-input" type="text" name="search" placeholder="Enter invoice numbers/IDs" hx-get="/invoices"
      hx-trigger="keyup changed delay:500ms" hx-target="#invoice-search-results" hx-indicator="#loading-indicator" />

    <div class="help-text">
      <small>For multiple invoices, separate with commas or spaces (e.g., "123456, 789012" or "123456 789012")</small>
    </div>

    <div id="loading-indicator" class="htmx-indicator"
      style="display: flex; align-items: center; gap: 10px; margin-top: 10px;">
      <div class="loading-indicator"></div>
      <span>Searching...</span>
    </div>
  </div>
  <br />
  <div id="invoice-search-results" class="fade-me-out">
    <!-- This is where the invoice details will be loaded -->
  </div>
</div>
{{end}}