<?php use Illuminate\Support\Number; ?>
<div class="rounded-lg bg-surface p-6">
    @php
        $loc = app()->getLocale();
        $priceCents = (int) config('provisioning.storage_addon.price_cents', 0);
    @endphp
    {{-- Null buchbare Blöcke: Absage statt Kaufzusage. Das Fenster wird von
         einer Karte geöffnet, deren Zahl älter sein kann als der Vertrag — und
         ein Dialog, der einen Block verspricht, den purchase() danach ablehnt,
         ist eine Falle. --}}
    @if ($packs < 1)
        <div class="flex items-start gap-3">
            <span class="grid size-10 shrink-0 place-items-center rounded-lg bg-warning-bg text-warning">
                <x-ui.icon name="alert-triangle" class="size-5" />
            </span>
            <div class="min-w-0">
                <h3 class="text-base font-semibold text-ink">{{ __('billing.storage_confirm_blocked_title') }}</h3>
                <p class="mt-1 text-sm text-muted">{{ $refusal }}</p>
            </div>
        </div>
        <div class="mt-6 flex justify-end">
            <x-ui.button variant="secondary" x-on:click="Livewire.dispatch('closeModal')">{{ __('common.close') }}</x-ui.button>
        </div>
    @else
        <div class="flex items-start gap-3">
            <span class="grid size-10 shrink-0 place-items-center rounded-lg bg-accent-subtle text-accent-active">
                <x-ui.icon name="database" class="size-5" />
            </span>
            <div class="min-w-0">
                <h3 class="text-base font-semibold text-ink">{{ __('billing.storage_confirm_title', ['count' => $packs]) }}</h3>
                <p class="mt-1 text-sm text-muted">
                    {{ __('billing.storage_confirm_body', [
                        'count' => $packs,
                        'gb' => $packs * $packGb,
                        'total' => Number::currency($packs * $priceCents / 100, in: 'EUR', locale: $loc),
                    ]) }}
                </p>
            </div>
        </div>
        <div class="mt-6 flex justify-end gap-3">
            <x-ui.button variant="secondary" x-on:click="Livewire.dispatch('closeModal')">{{ __('billing.storage_confirm_cancel') }}</x-ui.button>
            <x-ui.button variant="primary" wire:click="proceed" wire:loading.attr="disabled">
                <x-ui.icon name="database" class="size-4" />{{ __('billing.storage_confirm_cta') }}
            </x-ui.button>
        </div>
    @endif
</div>
