{{- /* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Commercial */ -}}
{{- /* SPDX-FileCopyrightText: 2025-2026 Christian Galo */ -}}

{{/* member_invoice_detail.html
     One invoice's detail, swapped into #billing-content in place of the
     invoices list. It replaces the Invoices section, so its title is that
     section's title and comes from sectionHeader (overview-consistency
     D9); the status badge sits on the line below with the Stripe number
     and the period. The back control is a swap, not navigation (the URL
     never changes), so it stays a link-styled button rather than a
     location trail. States render through statusBadge. */}}
<div class="mb-3">
  <button type="button" class="btn btn-link p-0 text-decoration-none" hx-get="/partials/member/invoices"
    hx-target="#billing-content" hx-swap="innerHTML">&larr; Back to invoices</button>
  {{ template "sectionHeader" .Header }}
  <div class="d-flex flex-wrap align-items-center gap-2">
    {{ template "statusBadge" .StatusBadge }}
    {{ if .StripeInvoiceNumber }}<span class="text-body-secondary small">Stripe invoice {{ .StripeInvoiceNumber }}</span>{{ end }}
    <span class="text-muted">{{ .Period }}</span>
  </div>
</div>

{{ if .Error }}
<div class="alert alert-danger" role="alert">
  <strong>Error:</strong> {{ .Error }}
</div>
{{ end }}

<dl class="row mb-3">
  <dt class="col-sm-3">Amount due</dt>
  <dd class="col-sm-9">{{ .AmountDue }}</dd>
  <dt class="col-sm-3">Amount paid</dt>
  <dd class="col-sm-9">{{ .AmountPaid }}</dd>
  {{ if .DueDate }}
  <dt class="col-sm-3">Due date</dt>
  <dd class="col-sm-9">{{ .DueDate }}</dd>
  {{ end }}
  {{ if .PaidAt }}
  <dt class="col-sm-3">Paid</dt>
  <dd class="col-sm-9">{{ .PaidAt }}</dd>
  {{ end }}
</dl>

{{ template "sectionHeader" .LineItemsHeader }}
{{ if eq (len .LineItems) 0 }}
<p class="text-muted">No line items recorded for this invoice.</p>
{{ else }}
<div class="table-responsive mb-3">
  <table class="table table-sm">
    <thead>
      <tr>
        <th>Description</th>
        <th class="text-end">Qty</th>
        <th class="text-end">Amount</th>
      </tr>
    </thead>
    <tbody>
      {{ range .LineItems }}
      <tr>
        <td>{{ if .Description }}{{ .Description }}{{ else }}<span class="text-muted">—</span>{{ end }}</td>
        <td class="text-end">{{ .Quantity }}</td>
        <td class="text-end">{{ .Amount }}</td>
      </tr>
      {{ end }}
    </tbody>
  </table>
</div>
{{ end }}

{{ template "sectionHeader" .PaymentsHeader }}
{{ if eq (len .Payments) 0 }}
<p class="text-muted">No payments recorded.</p>
{{ else }}
<div class="table-responsive">
  <table class="table table-sm align-middle">
    <thead>
      <tr>
        <th>Date</th>
        <th>Amount</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      {{ range .Payments }}
      <tr>
        <th scope="row">{{ .Date }}</th>
        <td>{{ .Amount }}</td>
        <td>{{ template "statusBadge" .StatusBadge }}</td>
      </tr>
      {{ end }}
    </tbody>
  </table>
</div>
{{ end }}