{{define "invoice_search_results"}}
{{if .Error}}
<div class="not-found">
  {{.ErrorMsg}}
  <p>Search term: "{{.SearchTerm}}"</p>
</div>

{{else if .NotFound}}
<div class="not-found">
  {{.ErrorMsg}}
  <p>Search term: "{{.SearchTerm}}"</p>
</div>

{{else if .MultipleInvoices}}
<div class="multiple-invoices">
  <h3>Multiple Invoices Found</h3>
  <div class="invoice-summary">
    <p>Found <strong>{{.TotalFound}}</strong> of {{.TotalSearched}} invoices for: "{{.SearchTerm}}"</p>
    {{if gt .FailedCount 0}}
    <p class="error-text">Failed to find {{.FailedCount}} invoices: {{range $i, $id := .FailedIDs}}{{if $i}},
      {{end}}{{$id}}{{end}}</p>
    {{end}}
  </div>

  {{range .Invoices}}
  <div class="invoice-card">
    <div class="invoice-header">
      <h4>Invoice #{{.invoiceNumber}}</h4>
      <div class="invoice-status {{.status}}">{{.status}}</div>
    </div>

    <div class="invoice-details">
      <div class="invoice-info">
        {{with .customer}}<p><strong>Customer:</strong> {{.name}}</p>{{end}}
        {{with .job}}<p><strong>Job:</strong> {{.name}}</p>{{end}}
        <p><strong>Total:</strong> ${{.totalPrice}}</p>
      </div>

      <div class="invoice-actions">
        <div class="button-group">
          {{range .buttons}}
          <button hx-put="{{.Action}}" hx-confirm="{{.ConfirmText}}" hx-target="#invoice-search-results"
            class="compact-button {{.Class}}" title="{{.Label}}" data-status="{{.Status}}">
            <span class="icon">
              {{if eq .Status "draft"}}📝
              {{else if eq .Status "ok"}}✅
              {{else if eq .Status "failed"}}❌
              {{else if eq .Status "pending_accounting"}}⏳
              {{else if eq .Status "processed"}}📊
              {{else if eq .Status "void"}}🚫
              {{end}}
            </span>
          </button>
          {{end}}
        </div>
      </div>
    </div>
  </div>
  {{end}}
</div>

{{else if .invoiceNumber}}
<div class="multiple-invoices">
  <h3>Invoice Details</h3>

  <div class="invoice-card">
    <div class="invoice-header">
      <h4>Invoice #{{.invoiceNumber}}</h4>
      <div class="invoice-status {{.status}}">{{.status}}</div>
    </div>

    <div class="invoice-details">
      <div class="invoice-info">
        {{with .customer}}<p><strong>Customer:</strong> {{.name}}</p>{{end}}
        {{with .job}}<p><strong>Job:</strong> {{.name}}</p>{{end}}
        {{with .location}}<p><strong>Location:</strong> {{.name}}</p>{{end}}
        <p><strong>Total Price:</strong> ${{.totalPrice}}</p>

        {{if .items}}
        <div class="invoice-items">
          <h5>Items</h5>
          <ul>
            {{range .items}}
            <li>{{.description}} - ${{.totalPrice}}</li>
            {{end}}
          </ul>
        </div>
        {{end}}
      </div>

      <div class="invoice-actions">
        <div class="button-group">
          {{range .buttons}}
          <button hx-put="{{.Action}}" hx-confirm="{{.ConfirmText}}" hx-target="#invoice-search-results"
            class="compact-button {{.Class}}" title="{{.Label}}" data-status="{{.Status}}">
            <span class="icon">
              {{if eq .Status "draft"}}📝
              {{else if eq .Status "ok"}}✅
              {{else if eq .Status "failed"}}❌
              {{else if eq .Status "pending_accounting"}}⏳
              {{else if eq .Status "processed"}}📊
              {{else if eq .Status "void"}}🚫
              {{end}}
            </span>
          </button>
          {{end}}
        </div>
      </div>
    </div>
  </div>
</div>

{{else}}
<p>Unexpected response. Please try again.</p>
{{end}}
{{end}}