<div @if ($polling) wire:poll.4s @endif>
    @if ($active)
        <div class="rounded-lg border border-line bg-surface p-5 shadow-xs animate-rise">
            <div class="flex items-center gap-2">
                <span class="size-2 rounded-pill {{ $failed ? 'bg-danger' : 'bg-info animate-pulse' }}" aria-hidden="true"></span>
                <h2 class="font-semibold text-ink">
                    {{ $parked ? __('delivery.parked_title') : __('dashboard.provisioning_title') }}
                </h2>
            </div>
            {{-- Parked is not failed and not slow: the order is paid and a
                 machine is being bought for it. Left under the generic "wird
                 eingerichtet" wording, a customer watching a stepper stand
                 still for two days has every reason to think something broke. --}}
            <p class="mb-4 mt-1 max-w-[70ch] text-sm text-muted">
                @if ($failed)
                    {{ __('dashboard.provisioning_failed') }}
                @elseif ($parked)
                    {{ __('delivery.parked_body') }}
                @else
                    {{ __('dashboard.provisioning_sub') }}
                @endif
            </p>
            <x-ui.progress-stepper :steps="$steps" />
        </div>
    @endif
</div>
