<div class="rounded-lg bg-surface p-6">
    <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">{{ __('withdrawal.admin_title') }}</h3>
            <p class="mt-1 text-sm text-muted">{{ __('withdrawal.admin_sub', ['name' => $customerName]) }}</p>
        </div>
    </div>

    @if ($refusal !== null)
        {{-- The same sentence the customer would be shown. An operator being
             told "nicht möglich" in developer's words would then explain it to
             the customer in their own, and the two would not match. --}}
        <div class="mt-4 rounded-lg border border-danger-border bg-danger-bg p-4 text-sm text-danger">
            {{ $refusal }}
        </div>
    @else
        <dl class="mt-4 space-y-1.5 text-sm">
            <div class="flex justify-between gap-3">
                <dt class="text-muted">{{ __('withdrawal.admin_window') }}</dt>
                <dd class="text-ink">{{ $right->endsAt?->local()->isoFormat('LL') }}</dd>
            </div>
            {{-- Nothing is charged for them any more. Still shown, because an
                 operator taking a withdrawal on the telephone is asked how long
                 the cloud has been running and should not have to work it out. --}}
            <div class="flex justify-between gap-3">
                <dt class="text-muted">{{ __('withdrawal.admin_delivered') }}</dt>
                <dd class="font-mono tabular-nums text-ink">{{ $deliveredDays }} / {{ $termDays }}</dd>
            </div>
        </dl>

        <p class="mt-4 text-sm text-body">{{ __('withdrawal.admin_effect') }}</p>
    @endif

    <div class="mt-6 flex justify-end gap-3">
        <x-ui.button variant="secondary" x-on:click="Livewire.dispatch('closeModal')">{{ __('withdrawal.keep') }}</x-ui.button>
        @if ($refusal === null)
            <x-ui.button variant="danger" wire:click="record" wire:loading.attr="disabled">
                {{ __('withdrawal.admin_confirm') }}
            </x-ui.button>
        @endif
    </div>
</div>
