{{ if .Error }}
<div class="alert alert-danger" role="alert">
  <strong>Error:</strong> {{ .Error }}
</div>
{{ else if eq (len .Invoices) 0 }}
<div class="text-center py-4">
  <p class="text-muted mb-0">Nothing to show here yet. Billing records appear once payment processing completes.</p>
</div>
{{ else }}
<div class="table-responsive">
  <table class="table table-sm align-middle">
    <thead>
      <tr>
        <th>Invoice</th>
        <th>Period</th>
        <th>Amount due</th>
        <th>Amount paid</th>
        <th>Status</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      {{ range .Invoices }}
      <tr>
        <td>
          {{ if .InvoiceNumber }}
            <code>{{ .InvoiceNumber }}</code>
          {{ else }}
            <span class="text-body-secondary" title="Assigned when the invoice is issued.">—</span>
          {{ end }}
        </td>
        <td>{{ .Period }}</td>
        <td>{{ .AmountDue }}</td>
        <td>{{ .AmountPaid }}</td>
        <td><span class="badge text-bg-{{ .StatusClass }}">{{ .Status }}</span></td>
        <td class="text-end">
          <button class="btn btn-outline-secondary btn-sm"
            hx-get="{{ routeURL "/partials/member/invoices/{invoiceID}" .InvoiceID }}" hx-target="#billing-content"
            hx-swap="innerHTML">View</button>
        </td>
      </tr>
      {{ end }}
    </tbody>
  </table>
</div>
{{ end }}