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

{{/* operator_billing_invoice_detail.html
     Operator invoice detail (design D7; operator-billing-views: "Operator
     invoice detail is addressable"). Rendered as the InnerTemplate of the
     operator_billing.html wrapper, whose header this data's WrapperHeader
     supplies: the invoice's number as the title below the Billing /
     Invoices trail (chrome-conventions "One location trail"; the back
     link retired). States render through statusBadge (Overdue is the
     derived danger state); the Stripe provenance is a fact row rendered
     only when Stripe is configured (maintainer, 2026-08-30: provenance is
     noise on a deployment with no provider). Reuses the member
     invoice-detail projection queries plus the operator-only organization
     and Stripe-mapping reads (loadOperatorInvoiceDetailData). The
     invoice's UUID sits on its own muted line beneath the wrapper's
     header rather than inline with the organization (design D14): it is
     an internal identifier, not part of the sentence a reader forms about
     who owes what. */}}
<p class="text-muted small mb-1 text-nowrap"><code class="small text-body-secondary">{{ .InvoiceID }}</code></p>
<div class="d-flex flex-wrap align-items-start justify-content-between gap-2 mb-3">
    <p class="text-body-secondary small mb-0">
        {{ if .OrgName }}
            <a href="{{ routeURL "/operator/organizations/{orgID}" .OrgID }}">{{ .OrgName }}</a>
        {{ else if .OrgID }}
            <span class="text-muted">{{ .OrgID }}</span>
        {{ end }}
    </p>
    {{ template "statusBadge" .StatusBadge }}
</div>

<div class="row g-3 mb-3">
    <div class="col-sm-6 col-lg-3">
        <p class="text-body-secondary small mb-0">Amount due</p>
        <p class="mb-0">{{ .AmountDue }}</p>
    </div>
    <div class="col-sm-6 col-lg-3">
        <p class="text-body-secondary small mb-0">Amount paid</p>
        <p class="mb-0">{{ .AmountPaid }}</p>
    </div>
    <div class="col-sm-6 col-lg-3">
        <p class="text-body-secondary small mb-0">Due date</p>
        <p class="mb-0">{{ if .DueDate }}{{ .DueDate }}{{ else }}<span class="text-muted">—</span>{{ end }}</p>
    </div>
    <div class="col-sm-6 col-lg-3">
        <p class="text-body-secondary small mb-0">Paid date</p>
        <p class="mb-0">{{ if .PaidAt }}{{ .PaidAt }}{{ else }}<span class="text-muted">—</span>{{ end }}</p>
    </div>
    {{ if .StripeConfigured }}
    <div class="col-sm-6 col-lg-3">
        <p class="text-body-secondary small mb-0">Stripe</p>
        <p class="mb-0">
            {{ template "statusBadge" .SyncBadge }}
            {{ if .StripeInvoiceNumber }}<span class="text-body-secondary small">{{ .StripeInvoiceNumber }}</span>{{ end }}
            {{ if .StripeURL }}<a class="small" href="{{ .StripeURL }}" target="_blank" rel="noopener noreferrer">View in Stripe</a>{{ end }}
        </p>
    </div>
    {{ end }}
</div>

<p class="text-body-secondary small mb-3">Period: {{ .Period }}</p>

{{ template "sectionHeader" .LineItemsHeader }}
{{ if .Error }}
<div class="alert alert-danger" role="alert">
    <strong>Error:</strong> {{ .Error }}
</div>
{{ else if eq (len .LineItems) 0 }}
{{ template "emptyState" .NoLineItems }}
{{ else }}
<div class="table-responsive">
    <table class="table table-hover table-sm table-record">
        <thead>
            <tr>
                <th>Description</th>
                <th>Quantity</th>
                <th>Amount</th>
                <th>Period</th>
            </tr>
        </thead>
        <tbody>
            {{ range .LineItems }}
            <tr>
                <td>{{ if .Description }}{{ .Description }}{{ else }}<span class="text-muted">—</span>{{ end }}</td>
                <td>{{ .Quantity }}</td>
                <td class="text-nowrap">{{ .Amount }}</td>
                <td class="text-nowrap">{{ .Period }}</td>
            </tr>
            {{ end }}
        </tbody>
    </table>
</div>
{{ end }}