<div class="space-y-6" x-data="{ msgs: @js(['soon' => __('cloud.action_toast')]) }">
    <div class="animate-rise">
        <h1 class="text-2xl font-bold tracking-tight text-ink">{{ __('cloud.title') }}</h1>
        <p class="mt-1 text-sm text-muted">{{ __('cloud.subtitle') }}</p>
    </div>

    <div class="rounded-lg border border-line bg-surface p-5 shadow-xs animate-rise [animation-delay:60ms]">
        <div class="flex flex-wrap items-center gap-3">
            <div class="min-w-0">
                <p class="font-semibold text-ink">{{ $instance['name'] }}</p>
                <a href="https://{{ $instance['domain'] }}" target="_blank" rel="noopener noreferrer" class="font-mono text-sm text-accent-text hover:underline">{{ $instance['domain'] }}</a>
            </div>
            <x-ui.badge :status="$instance['status']" class="sm:ml-2">{{ __('cloud.status_'.$instance['status']) }}</x-ui.badge>
            @if ($maintenance)
                @php $mActive = now()->between($maintenance->starts_at, $maintenance->ends_at); @endphp
                <span class="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-semibold text-warning">
                    <x-ui.icon name="alert-triangle" class="size-3.5" />
                    {{ $mActive ? __('cloud.maintenance_active') : __('cloud.maintenance_planned') }}
                </span>
            @endif
            <a href="https://{{ $instance['domain'] }}" target="_blank" rel="noopener noreferrer"
               class="ml-auto inline-flex items-center gap-2 rounded-pill bg-accent-active px-4 py-2 text-sm font-semibold text-on-accent transition hover:bg-accent-press">
                <x-ui.icon name="external-link" class="size-4" />{{ __('cloud.open') }}
            </a>
        </div>
        @if ($maintenance)
            <div class="mt-4 flex items-start gap-2.5 rounded-lg border border-warning-border bg-warning-bg p-3">
                <x-ui.icon name="alert-triangle" class="mt-0.5 size-4 shrink-0 text-warning" />
                <div class="min-w-0 text-sm">
                    <p class="font-semibold text-ink">{{ $maintenance->title }}</p>
                    <p class="text-body">{{ __('cloud.maintenance_window', ['start' => $maintenance->starts_at->local()->isoFormat('LLL'), 'end' => $maintenance->ends_at->local()->isoFormat('LT')]) }}</p>
                    @if ($maintenance->public_description)
                        <p class="mt-0.5 text-muted">{{ $maintenance->public_description }}</p>
                    @endif
                </div>
            </div>
        @endif

        @if ($restartPending)
            <div class="mt-4 flex items-start gap-2.5 rounded-lg border border-warning-border bg-warning-bg p-3">
                <x-ui.icon name="rotate-ccw" class="mt-0.5 size-4 shrink-0 text-warning" />
                <div class="min-w-0 text-sm">
                    <p class="font-semibold text-ink">{{ __('cloud.restart_pending_title') }}</p>
                    <p class="text-body">{{ __('cloud.restart_pending_body') }}</p>
                </div>
            </div>
        @endif

        <dl class="mt-4 grid grid-cols-1 gap-4 border-t border-line pt-4 sm:grid-cols-2 lg:grid-cols-3">
            @foreach ([
                ['cloud.plan', $instance['plan']],
                ['cloud.seats', $instance['seats']],
                ['cloud.performance', $instance['performance']],
                ['cloud.location', $instance['location']],
                ['cloud.storage', $storageLabel],
            ] as [$key, $val])
                <div>
                    <dt class="text-xs font-semibold text-muted">{{ __($key) }}</dt>
                    <dd class="mt-1 font-mono text-sm text-body">{{ $val }}</dd>
                </div>
            @endforeach
        </dl>
    </div>

    <div class="rounded-lg border border-line bg-surface p-5 shadow-xs animate-rise [animation-delay:120ms]">
        <h2 class="font-semibold text-ink">{{ __('cloud.storage_growth') }}</h2>
        <p class="text-sm text-muted">{{ __('cloud.storage_growth_sub') }}</p>
        <div class="mt-4 h-56" wire:ignore>
            <x-ui.chart :config="$storageChart" class="h-56" :label="__('cloud.storage_growth')" />
        </div>
    </div>

    <div class="flex flex-wrap gap-3 animate-rise [animation-delay:180ms]">
        <x-ui.button variant="secondary" :disabled="! $canRestart"
                     @click="$dispatch('openModal', { component: 'confirm-restart-cloud' })">
            <x-ui.icon name="rotate-ccw" class="size-4" />{{ __('cloud.restart') }}
        </x-ui.button>
        <x-ui.button variant="secondary" @click="$dispatch('notify', { message: msgs.soon })">{{ __('cloud.snapshot') }}</x-ui.button>
        <x-ui.button variant="secondary" @click="$dispatch('notify', { message: msgs.soon })">{{ __('cloud.logs') }}</x-ui.button>
    </div>
</div>
