<div class="space-y-4 rounded-lg border border-line bg-surface p-6 shadow-xs">
    <div>
        <h2 class="font-semibold text-ink">{{ __('billing.invoices_open_title') }}</h2>
        <p class="mt-1 max-w-[70ch] text-sm text-muted">{{ __('billing.invoices_open_body') }}</p>
    </div>

    @if ($failure !== null)
        {{-- Stripes Wortlaut, nicht unsere Zusammenfassung: er nennt den Grund,
             und danach kann der Kunde handeln. --}}
        <x-ui.alert variant="danger">{{ $failure }}</x-ui.alert>
    @endif

    @if ($invoices === [])
        <p class="text-sm text-muted">{{ __('billing.invoices_none') }}</p>
    @else
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="border-b border-line text-left text-xs font-medium text-muted">
                        <th class="py-2 pr-4">{{ __('billing.invoice_number') }}</th>
                        <th class="py-2 pr-4">{{ __('billing.invoice_date') }}</th>
                        <th class="py-2 pr-4 text-right">{{ __('billing.invoice_amount') }}</th>
                        <th class="py-2"></th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($invoices as $invoice)
                        <tr wire:key="invoice-{{ $invoice['id'] }}" class="border-b border-line last:border-0">
                            <td class="py-3 pr-4 font-mono text-xs text-body">{{ $invoice['number'] ?? $invoice['id'] }}</td>
                            <td class="py-3 pr-4 text-muted">
                                {{-- Stripes `created` ist ein Unix-Zeitstempel, kein
                                     Carbon. ->local() ist R19 und nicht verhandelbar:
                                     was ein Mensch liest, geht auf die Wanduhr. --}}
                                {{ \Illuminate\Support\Carbon::createFromTimestamp((int) $invoice['created_at'])->local()->isoFormat('D. MMM YYYY') }}
                            </td>
                            <td class="py-3 pr-4 text-right font-medium text-ink">
                                {{ number_format($invoice['amount_due_cents'] / 100, 2, ',', '.') }} {{ $invoice['currency'] }}
                            </td>
                            <td class="py-3 text-right">
                                <x-ui.button variant="secondary" size="sm"
                                             wire:click="pay('{{ $invoice['id'] }}')"
                                             wire:loading.attr="disabled"
                                             wire:target="pay('{{ $invoice['id'] }}')">
                                    {{ __('billing.invoice_pay') }}
                                </x-ui.button>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        @if (count($invoices) > 1)
            <x-ui.button variant="primary" wire:click="payAll"
                         wire:loading.attr="disabled" wire:target="payAll">
                {{ __('billing.invoice_pay_all') }}
            </x-ui.button>
        @endif
    @endif
</div>
