<?php ?>
<div class="space-y-6" x-data="{ msgs: @js(['purchased' => __('billing.purchased')]) }">
    @php $loc = app()->getLocale(); $eur = fn ($c) => Number::currency($c / 100, in: 'EUR', locale: $loc); @endphp

    <div class="animate-rise">
        <h1 class="text-2xl font-bold tracking-tight text-ink">{{ __('billing.title') }}</h1>
        <p class="mt-1 text-sm text-muted">{{ __('billing.subtitle') }}</p>
    </div>

    {{-- Ganz oben, vor allem anderen: wer hier landet, weil eine Abbuchung
         gescheitert ist, soll nicht erst an Paketen vorbeiscrollen. Darunter
         die zwei Bauteile, die das Problem tatsächlich lösen — offene
         Rechnungen begleichen und die Karte tauschen. --}}
    @if ($pastDue)
        <x-ui.alert variant="danger" class="animate-rise">
            <p class="font-semibold">{{ __('billing.past_due_title') }}</p>
            <p class="mt-1 text-sm">{{ __('billing.past_due_body') }}</p>
        </x-ui.alert>
    @endif

    @if ($hasStripeCustomer)
        <div class="grid gap-5 animate-rise [animation-delay:20ms] lg:grid-cols-2 lg:items-start">
            @livewire('open-invoices')
            @livewire('payment-method')
        </div>
    @endif

    {{-- purchase() refuses before touching anything when the active mode has
         no Stripe key — a sentence here, not a 500 page, and not a cart entry
         nobody can ever pay for.

         OUTSIDE the contract branch below on purpose: the customer most likely
         to meet this is the one buying for the FIRST time, who has no contract
         yet. Inside the @else it would be invisible to exactly them. --}}
    @error('purchase')
        <x-ui.alert variant="danger">{{ $message }}</x-ui.alert>
    @enderror

    {{-- Nothing booked. Said plainly instead of falling back to the first plan
         and rendering it as "AKTUELLES PAKET — Status Aktiv": that is a contract
         nobody entered into, on the page a customer opens to find out what they
         pay, and the dashboard said the opposite about the same account.

         Everything below needs a contract to mean anything — an "Upgrade" from
         nothing is a purchase, and that has its own page. --}}
    @if (! $hasContract)
        <div class="rounded-lg border border-line bg-surface p-8 shadow-xs animate-rise [animation-delay:60ms]">
            <h2 class="text-lg font-semibold text-ink">{{ __('billing.none_title') }}</h2>
            <p class="mt-2 max-w-[70ch] text-sm leading-relaxed text-muted">{{ __('billing.none_body') }}</p>

            <div class="mt-6 flex flex-wrap gap-2.5">
                <x-ui.button variant="ink" :href="route('order')" wire:navigate>{{ __('billing.none_cta') }}</x-ui.button>
                <x-ui.button variant="secondary" :href="route('support')" wire:navigate>{{ __('dashboard.nav.support') }}</x-ui.button>
            </div>
        </div>
    @else

    {{-- Current plan --}}
    <div class="overflow-hidden rounded-lg border border-line bg-surface shadow-xs animate-rise [animation-delay:60ms]">
        <div class="flex flex-wrap items-center justify-between gap-4 border-b border-line bg-surface-2 px-6 py-4">
            <div>
                <p class="text-xs font-semibold uppercase tracking-wider text-muted">{{ __('billing.current_plan') }}</p>
                <p class="mt-0.5 text-lg font-semibold text-ink">{{ __('billing.plan.'.$currentKey) }}</p>
            </div>
            <div class="text-right">
                @if ($current['granted'] ?? false)
                    {{-- Not "free", not struck through — just the service. A
                         later conversion to paid must not read as a negotiation. --}}
                    <p class="text-xs text-muted">{{ __('billing.granted_plan') }}</p>
                @else
                    <p class="text-2xl font-semibold text-ink">{{ $eur($current['price_cents'] ?? 0) }}</p>
                    <p class="text-xs text-muted">{{ __('billing.net_per_month') }}</p>
                    {{-- A yearly contract is charged once a year; the figure
                         above is per month whatever the term, so without this
                         line a yearly customer read a number that never appears
                         on a statement. --}}
                    @if (($current['term'] ?? null) === App\Models\Subscription::TERM_YEARLY)
                        <p class="mt-1 text-xs font-medium text-body">
                            {{ __('billing.term_yearly_note', ['total' => $eur($current['term_total_cents'] ?? 0)]) }}
                            @if ($current['renews_at'] ?? null)
                                {{-- R19: stored in UTC, read on the wall clock. --}}
                                · {{ __('billing.renews_at', ['date' => $current['renews_at']->local()->isoFormat('D. MMM YYYY')]) }}
                            @endif
                        </p>
                    @endif
                    @if ($totalMonthlyCents !== null && $totalMonthlyCents !== ($current['price_cents'] ?? 0))
                        {{-- The plan alone is not the bill once modules are booked,
                             and every part of it is frozen at what was agreed. --}}
                        <p class="mt-1 text-sm font-medium text-body">
                            {{ __('billing.total_with_addons', ['total' => $eur($totalMonthlyCents)]) }}
                        </p>
                    @endif
                @endif
            </div>
        </div>
        <div class="grid grid-cols-2 gap-px bg-line sm:grid-cols-4">
            {{-- Storage is the figure Nextcloud actually enforces: the package
                 plus every booked pack. Printing the package alone told a
                 customer with two packs that they had 500 GB while their own
                 cloud was giving them 700. --}}
            @foreach ([
                ['billing.storage', ($current['storage_gb'] ?? 0).' GB'],
                ['billing.seats', $current['seats'] ?? '—'],
                ['billing.performance', __('billing.perf.'.($current['performance'] ?? 'standard'))],
                ['billing.status', __('billing.status_active')],
            ] as [$label, $value])
                <div class="bg-surface px-6 py-4">
                    <p class="text-xs text-muted">{{ __($label) }}</p>
                    <p class="mt-0.5 font-semibold text-ink">{{ $value }}</p>
                </div>
            @endforeach
        </div>

        {{-- Where the storage above comes from, once it is no longer only the
             package. A customer who books packs should be able to see them in
             the figure they are enforced in, not only as a line on the bill. --}}
        @if (($current['storage_packs'] ?? 0) > 0)
            <div class="flex items-start gap-2 border-t border-line px-6 py-3">
                <x-ui.icon name="database" class="mt-0.5 size-4 shrink-0 text-muted" />
                <p class="text-sm text-muted">
                    {{ __('billing.storage_includes_packs', [
                        'count' => $current['storage_packs'],
                        'gb' => $current['storage_pack_gb'] ?? 0,
                    ]) }}
                </p>
            </div>
        @endif

        {{-- A change already booked, on the card that states what they have. A
             contract quietly due to shrink at the end of the term is not
             something a customer should have to remember on their own — and it
             is announced here rather than only in the cart, because the cart
             entry goes the moment it is paid for and the booking does not. --}}
        @if ($pendingChange)
            <div class="flex items-start gap-2 border-t border-line bg-warning-bg px-6 py-3">
                <x-ui.icon name="calendar" class="mt-0.5 size-4 shrink-0 text-warning" />
                <p class="text-sm text-body">
                    {{ __('billing.pending_change_note', ['plan' => $pendingChange['plan'], 'date' => $pendingChange['at']]) }}
                </p>
            </div>
        @endif
    </div>
    @endif

    {{-- Cart: "5 purchases pending" told nobody what they had ordered, and
         offered no way to change their mind.

         Outside the contract gate on purpose: a customer can have something in
         their cart before they have any contract at all, and hiding it there
         would hide the thing they came to pay for. --}}
    @if ($pending->isNotEmpty())
        <div class="overflow-hidden rounded-lg border border-info-border bg-surface shadow-xs animate-rise">
            <div class="flex items-center gap-2 border-b border-line bg-info-bg px-5 py-3">
                <x-ui.icon name="receipt" class="size-4 shrink-0 text-info" />
                <h2 class="text-sm font-semibold text-ink">{{ __('billing.cart.title') }}</h2>
                <span class="ml-auto text-xs text-muted">{{ __('billing.cart.subtitle') }}</span>
            </div>

            <ul class="divide-y divide-line">
                @foreach ($pending as $order)
                    <li wire:key="order-{{ $order->uuid }}" class="flex flex-wrap items-center gap-3 px-5 py-3">
                        <div class="min-w-0 flex-1">
                            <p class="text-sm font-medium text-ink">{{ $order->label() }}</p>
                            <p class="mt-0.5 text-xs text-muted">
                                {{ __('billing.cart.added', ['when' => $order->created_at->local()->isoFormat('LL')]) }}
                            </p>
                        </div>
                        <div class="text-right">
                            <p class="font-mono text-sm text-body">{{ $eur($order->amount_cents) }}</p>
                            <p class="text-xs text-muted">
                                {{ __('billing.cart.net') }} ·
                                {{ $order->isRecurring() ? __('billing.cart.per_month') : __('billing.cart.once') }}
                            </p>
                        </div>
                        <button type="button" aria-label="{{ __('billing.cart.remove') }}" title="{{ __('billing.cart.remove') }}"
                                x-on:click="$dispatch('openModal', { component: 'confirm-remove-order', arguments: { uuid: '{{ $order->uuid }}' } })"
                                class="grid size-8 place-items-center rounded-md border border-line text-muted transition hover:border-danger hover:text-danger">
                            <x-ui.icon name="trash-2" class="size-4" />
                        </button>
                    </li>
                @endforeach
            </ul>

            @php
                $net = $pending->sum('amount_cents');
                $gross = $pending->sum(fn ($o) => $o->grossCents());
                // Summed from the same per-order rounding the total uses: rounding
                // after aggregating would let the two figures disagree by a cent.
                $recurringGross = $pending->filter->isRecurring()->sum(fn ($o) => $o->grossCents());
            @endphp
            <div class="space-y-1.5 border-t border-line bg-surface-2 px-5 py-3.5 text-sm">
                <div class="flex items-center justify-between text-muted">
                    <span>{{ __('billing.cart.subtotal_net') }}</span>
                    <span class="font-mono">{{ $eur($net) }}</span>
                </div>
                <div class="flex items-center justify-between text-muted">
                    <span>
                        {{ $tax->reverseCharge
                            ? __('billing.cart.reverse_charge')
                            : __('billing.cart.vat', ['percent' => $tax->percentLabel()]) }}
                    </span>
                    <span class="font-mono">{{ $eur($gross - $net) }}</span>
                </div>
                <div class="flex items-center justify-between border-t border-line pt-1.5 font-semibold text-ink">
                    <span>{{ __('billing.cart.total_gross') }}</span>
                    <span class="font-mono">{{ $eur($gross) }}</span>
                </div>
                @if ($recurringGross > 0)
                    {{-- The number that actually matters every month, kept apart
                         from a one-off traffic top-up in the same cart. --}}
                    <p class="pt-1 text-xs text-muted">
                        {{ __('billing.cart.recurring_note', ['amount' => $eur($recurringGross)]) }}
                    </p>
                @endif
            </div>
        </div>
    @endif

    @if ($hasContract)

    {{-- Upgrades --}}
    @if (count($upgrades) > 0)
        <div class="animate-rise [animation-delay:120ms]">
            <h2 class="mb-3 font-semibold text-ink">{{ __('billing.upgrade_title') }}</h2>
            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
                @foreach ($upgrades as $key)
                    @php $p = $plans[$key]; @endphp
                    <div wire:key="upgrade-{{ $key }}" class="flex flex-col rounded-lg border border-line bg-surface p-5 shadow-xs transition hover:border-accent-border">
                        <div class="flex items-baseline justify-between">
                            <p class="font-semibold text-ink">{{ __('billing.plan.'.$key) }}</p>
                            <span class="rounded-pill bg-accent-subtle px-2 py-0.5 text-xs font-semibold text-accent-text">{{ __('billing.perf.'.($p['performance'] ?? 'standard')) }}</span>
                        </div>
                        <p class="mt-1 text-sm text-muted">{{ $p['quota_gb'] }} GB · {{ __('billing.seats_count', ['count' => $p['seats'] ?? 0]) }}</p>
                        <ul class="mt-3 space-y-1.5">
                            @foreach (array_slice($features[$key] ?? [], 0, 4) as $f)
                                <li class="flex items-center gap-2 text-sm text-body">
                                    <x-ui.icon name="check" class="size-4 shrink-0 text-success-bright" />
                                    {{ __('billing.feature.'.$f) }}
                                </li>
                            @endforeach
                        </ul>
                        <p class="mt-4 text-xl font-semibold text-ink">{{ $eur($p['price_cents']) }}<span class="text-sm font-normal text-muted"> / {{ __('billing.month_short') }}</span></p>
                        <p class="text-xs text-muted">
                            {{ $tax->reverseCharge
                                ? __('billing.net_reverse_charge')
                                : __('billing.net_hint', ['percent' => $tax->percentLabel()]) }}
                        </p>
                        <x-ui.button variant="primary" size="sm" class="mt-4 w-full" wire:click="purchase('upgrade', '{{ $key }}')" wire:target="purchase('upgrade', '{{ $key }}')" wire:loading.attr="disabled">
                            {{ __('billing.upgrade_cta') }}
                        </x-ui.button>
                    </div>
                @endforeach
            </div>
        </div>
    @endif

    {{-- ── Downgrade ──────────────────────────────────────────────────────
         Smaller plans are listed even when they cannot be taken, with the
         reason in the customer's own numbers. A plan that quietly disappears
         reads as "no longer offered"; a greyed-out button that does not say
         what is in the way is the thing people ring about. --}}
    @if ($downgrades !== [])
        <section class="animate-rise">
            <h2 class="text-md font-semibold text-ink">{{ __('billing.downgrade') }}</h2>
            <p class="mt-1 text-sm text-muted">{{ __('billing.downgrade_hint') }}</p>

            <div class="mt-4 grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
                @foreach ($downgrades as $key => $plan)
                    <article class="flex flex-col rounded-lg border border-line bg-surface p-5 shadow-xs">
                        <div class="flex items-start justify-between gap-3">
                            <div class="min-w-0">
                                <h3 class="text-md font-semibold text-ink">{{ $plan['name'] ?? $key }}</h3>
                                <p class="mt-1 text-xs text-muted">
                                    {{ $plan['quota_gb'] ?? 0 }} GB · {{ __('billing.seats_count', ['count' => $plan['seats'] ?? 0]) }}
                                </p>
                            </div>
                            <p class="shrink-0 text-right font-mono text-lg font-semibold text-ink">
                                {{ $eur($plan['price_cents'] ?? 0) }}
                                <span class="mt-0.5 block text-xs font-normal text-muted">{{ __('billing.per_month') }}</span>
                            </p>
                        </div>

                        {{-- What the move would take away, above the button that
                             makes it — being told afterwards that an own domain
                             has been switched off is the same failure as a
                             greyed-out button with no reason on it. --}}
                        @if ($plan['check']->consequences !== [])
                            <div class="mt-5 rounded border border-accent-border bg-accent-subtle p-3">
                                <p class="flex items-center gap-1.5 text-xs font-semibold text-accent-text">
                                    <x-ui.icon name="alert-triangle" class="size-4" />{{ __('billing.downgrade_consequence_title') }}
                                </p>
                                <ul class="mt-2 space-y-1.5">
                                    @foreach ($plan['check']->consequences as $consequence)
                                        <li class="text-xs leading-relaxed text-ink">
                                            {{ __('billing.downgrade_consequence.'.$consequence['key'], $consequence['replace']) }}
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        @if ($plan['check']->allowed)
                            <x-ui.button variant="secondary" class="mt-5 w-full"
                                         wire:click="purchase('downgrade', '{{ $key }}')"
                                         wire:loading.attr="disabled" wire:target="purchase('downgrade', '{{ $key }}')">
                                {{ __('billing.downgrade_to', ['plan' => $plan['name'] ?? $key]) }}
                            </x-ui.button>
                        @else
                            <div class="mt-5 rounded border border-warning-border bg-warning-bg p-3">
                                <p class="text-xs font-semibold text-warning">{{ __('billing.downgrade_blocked') }}</p>
                                <ul class="mt-2 space-y-1.5">
                                    @foreach ($plan['check']->blockers as $blocker)
                                        <li class="text-xs leading-relaxed text-ink">
                                            {{ __('billing.downgrade_blocker.'.$blocker['key'], [
                                                'current' => $blocker['current'],
                                                'limit' => $blocker['limit'],
                                            ]) }}
                                        </li>
                                    @endforeach
                                </ul>

                                {{-- "No" with a way out of it. A customer blocked
                                     by their own data has exactly two: buy the
                                     room, or delete the files and have us look
                                     again — and being told to wait for tonight's
                                     reading after clearing 40 GB is the same
                                     dead end as a greyed-out button.

                                     Buying is only one of them while it actually
                                     works. Where the packs this contract may book
                                     cannot lift the blocker, `short` is set, and
                                     then the sentence says so and no button
                                     offers a charge that would leave the customer
                                     exactly where they are. --}}
                                @if ($remedy = $plan['check']->storageRemedy)
                                    <div class="mt-3 border-t border-warning-border pt-3">
                                        <p class="text-xs leading-relaxed text-ink">
                                            {{ __('billing.downgrade_escape.'.($remedy['short'] === null ? 'intro' : 'capped'), [
                                                'used' => $remedy['used'],
                                                'limit' => $remedy['limit'],
                                                'over' => $remedy['over'],
                                                'short' => $remedy['short'] ?? '',
                                            ]) }}
                                        </p>
                                        <div class="mt-3 flex flex-wrap gap-2">
                                            @if ($remedy['packs'] > 0)
                                                <x-ui.button variant="primary" size="sm"
                                                             x-on:click="$dispatch('openModal', { component: 'confirm-book-storage', arguments: { packs: {{ $remedy['packs'] }} } })">
                                                    <x-ui.icon name="database" class="size-4" />{{ __('billing.downgrade_escape.book', ['count' => $remedy['packs'], 'gb' => $remedy['packs'] * $remedy['pack_gb']]) }}
                                                </x-ui.button>
                                            @endif
                                            <x-ui.button variant="secondary" size="sm"
                                                         wire:click="remeasureStorage" wire:target="remeasureStorage" wire:loading.attr="disabled">
                                                <x-ui.icon name="refresh" class="size-4" />{{ __('billing.downgrade_escape.remeasure') }}
                                            </x-ui.button>
                                        </div>
                                        @if ($storageMeasuredAt)
                                            <p class="mt-2 text-xs text-muted">
                                                {{ __('billing.downgrade_escape.measured_at', ['when' => $storageMeasuredAt->local()->isoFormat('LLL')]) }}
                                            </p>
                                        @endif
                                    </div>
                                @endif
                            </div>
                        @endif
                    </article>
                @endforeach
            </div>
        </section>
    @endif

    {{-- Extra storage + Add-ons --}}
    <div class="grid grid-cols-1 gap-4 lg:grid-cols-3 xl:grid-cols-4 animate-rise [animation-delay:180ms]">
        {{-- Storage --}}
        <div class="flex flex-col rounded-lg border border-accent-border bg-accent-subtle p-5">
            <div class="flex items-center gap-2">
                <x-ui.icon name="database" class="size-5 text-accent-active" />
                <p class="font-semibold text-ink">{{ __('billing.storage_title') }}</p>
            </div>
            <p class="mt-2 text-sm text-body">{{ __('billing.storage_body', ['gb' => $storage['gb'], 'price' => $eur($storage['price_cents'])]) }}</p>
            <p class="mt-1 text-xs text-muted">{{ __('billing.net_per_month') }}</p>
            {{-- Kein Knopf, wo purchase() ohnehin ablehnen würde: ein Angebot,
                 das abgewiesen wird, ist schlechter als gar keines — derselbe
                 Grund wie beim Eigene-Domain-Knopf oben im Modul-Grid. --}}
            @if ($storageLimitNote === null)
                <x-ui.button variant="primary" size="sm" class="mt-4 w-full" wire:click="purchase('storage')" wire:target="purchase('storage')" wire:loading.attr="disabled">
                    {{ __('billing.storage_cta', ['gb' => $storage['gb']]) }}
                </x-ui.button>
            @else
                <p class="mt-4 text-xs text-muted">{{ $storageLimitNote }}</p>
            @endif
        </div>

        {{-- Traffic --}}
        <div class="flex flex-col rounded-lg border {{ $trafficMeter && $trafficMeter->state() !== 'ok' ? 'border-warning-border bg-warning-bg' : 'border-line bg-surface shadow-xs' }} p-5">
            <div class="flex items-center gap-2">
                <x-ui.icon name="activity" class="size-5 {{ $trafficMeter && $trafficMeter->state() !== 'ok' ? 'text-warning' : 'text-muted' }}" />
                <p class="font-semibold text-ink">{{ __('billing.traffic_title') }}</p>
            </div>
            <p class="mt-2 text-sm text-body">{{ __('billing.traffic_body', ['gb' => $trafficAddon['gb'], 'price' => $eur($trafficAddon['price_cents'])]) }}</p>
            <p class="mt-1 text-xs text-muted">{{ __('billing.net_once') }}</p>
            @if ($trafficMeter)
                <p class="mt-2 font-mono text-xs text-muted">
                    {{ __('billing.traffic_used', [
                        'used' => \App\Support\Bytes::human($trafficMeter->usedBytes),
                        'quota' => \App\Support\Bytes::human($trafficMeter->quotaBytes),
                    ]) }}
                </p>
            @endif
            <x-ui.button variant="{{ $trafficMeter && $trafficMeter->state() !== 'ok' ? 'primary' : 'secondary' }}" size="sm" class="mt-4 w-full"
                         wire:click="purchase('traffic')" wire:target="purchase('traffic')" wire:loading.attr="disabled">
                {{ __('billing.traffic_cta', ['gb' => $trafficAddon['gb']]) }}
            </x-ui.button>
        </div>

        {{-- Add-ons --}}
        @foreach ($addons as $key => $addon)
            <div wire:key="addon-{{ $key }}" class="flex flex-col rounded-lg border border-line bg-surface p-5 shadow-xs">
                <div class="flex items-center gap-2">
                    <x-ui.icon name="box" class="size-5 text-muted" />
                    <p class="font-semibold text-ink">{{ __('billing.addon.'.$key.'.name') }}</p>
                </div>
                <p class="mt-2 flex-1 text-sm text-muted">{{ __('billing.addon.'.$key.'.desc') }}</p>
                @if ($addon['included'] ?? false)
                    {{-- Part of the package they already pay for. Neither a
                         price nor a button belongs here: both would be selling
                         a customer something they have. --}}
                    <p class="mt-3 inline-flex items-center gap-1.5 rounded-pill border border-success-border bg-success-bg px-2.5 py-0.5 text-xs font-medium text-success">
                        <x-ui.icon name="check" class="size-4" />{{ __('billing.addon_included') }}
                    </p>
                @elseif ($addon['granted'] ?? false)
                    {{-- Not "free", not struck through — just the service. --}}
                    <p class="mt-3 text-sm font-medium text-muted">{{ __('billing.granted_plan') }}</p>
                @else
                    {{-- What they actually pay for it once booked (packs and all),
                         and today's price while it is still a sale to be made. --}}
                    <p class="mt-3 text-lg font-semibold text-ink">
                        {{ $eur($addon['booked'] ? $addon['monthly_cents'] : (int) $addon['price_cents']) }}<span class="text-sm font-normal text-muted"> / {{ __('billing.month_short') }}</span>
                        @if ($addon['booked'] && $addon['quantity'] > 1)
                            <span class="text-sm font-normal text-muted">· {{ __('billing.addon_packs', ['count' => $addon['quantity']]) }}</span>
                        @endif
                    </p>
                    <p class="text-xs text-muted">
                        {{ $tax->reverseCharge
                            ? __('billing.net_reverse_charge')
                            : __('billing.net_hint', ['percent' => $tax->percentLabel()]) }}
                    </p>
                @endif
                @if ($addon['booked'] && ($addon['cancelling'] ?? false))
                    {{-- Cancelled and still running. The customer has to be able
                         to see both halves of that: the date it actually stops,
                         and that they can still take it back until then. What is
                         NOT offered is a second cancellation — the card that
                         says "gekündigt" must not also say "kündigen". --}}
                    <p class="mt-3 inline-flex items-center gap-1.5 rounded-pill border border-warning-border bg-warning-bg px-2.5 py-0.5 text-xs font-medium text-warning">
                        <x-ui.icon name="calendar" class="size-4" />
                        {{ __('billing.addon_runs_until', ['date' => $addon['cancels_at']?->local()->isoFormat('LL')]) }}
                    </p>
                @elseif ($addon['booked'])
                    {{-- Already theirs, at the price they booked it for — which
                         is why this card does not show today's. --}}
                    <p class="mt-3 inline-flex items-center gap-1.5 rounded-pill border border-success-border bg-success-bg px-2.5 py-0.5 text-xs font-medium text-success">
                        <span class="size-1.5 rounded-pill bg-current" aria-hidden="true"></span>
                        {{ __('billing.addon_booked') }}
                    </p>
                @elseif ($addon['in_cart'] ?? false)
                    {{-- Placed and waiting to be paid for. Saying so is what
                         stops the second click: an unchanged card invites one,
                         and a second order for the same module is a second
                         charge for one thing. --}}
                    <p class="mt-3 inline-flex items-center gap-1.5 rounded-pill border border-info-border bg-info-bg px-2.5 py-0.5 text-xs font-medium text-info">
                        <x-ui.icon name="receipt" class="size-4" />
                        {{ __('billing.addon_in_cart_badge') }}
                    </p>
                @endif

                {{-- The button appears only where the purchase would actually
                     go through. A module the package includes has nothing to
                     sell; one already booked is a second charge for the same
                     thing, unless it is sold in packs, where a second one is
                     genuinely a second helping (see `sold_as` in
                     config/provisioning.php); and one already in the cart is
                     that second charge one step earlier. An offer that would be
                     refused is worse than no offer. --}}
                @if (! ($addon['included'] ?? false)
                    && ! ($addon['in_cart'] ?? false)
                    && ! ($addon['booked'] && ($addon['entitlement'] ?? true)))
                    <x-ui.button variant="secondary" size="sm" class="mt-3 w-full" wire:click="purchase('addon', '{{ $key }}')" wire:target="purchase('addon', '{{ $key }}')" wire:loading.attr="disabled">
                        {{ __('billing.addon_cta') }}
                    </x-ui.button>
                @endif

                {{-- The way out, which the page did not have at all. The owner's
                     rule is that a module can be cancelled monthly, and until
                     now the only way to exercise it was to write to us.

                     Not offered on a granted module: nothing is being charged
                     for it, so there is no recurring cost to escape, and letting
                     a customer "cancel" a gift would take away something they
                     were given rather than stopping a payment. --}}
                @if ($addon['booked'] && ! ($addon['granted'] ?? false))
                    @if ($addon['cancelling'] ?? false)
                        <button type="button" wire:click="resumeAddon('{{ $key }}')"
                                wire:target="resumeAddon('{{ $key }}')" wire:loading.attr="disabled"
                                class="mt-3 inline-flex w-full items-center justify-center gap-1.5 text-xs font-semibold text-accent-text hover:underline">
                            <x-ui.icon name="rotate-ccw" class="size-4" />
                            {{ __('billing.addon_resume_cta') }}
                        </button>
                    @else
                        <button type="button"
                                x-on:click="$dispatch('openModal', { component: 'confirm-cancel-addon', arguments: { key: '{{ $key }}' } })"
                                class="mt-3 inline-flex w-full items-center justify-center text-xs font-semibold text-muted hover:text-danger hover:underline">
                            {{ __('billing.addon_cancel_cta') }}
                        </button>
                    @endif
                @endif
            </div>
        @endforeach
    </div>

    @endif

    <p class="text-xs text-muted">{{ __('billing.mock_note') }}</p>
</div>
