<?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
    <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>
</div>
