<div class="p-6" @if ($waiting && ! $credentials && ! $failed) wire:poll.2s @endif>
    <h3 class="text-base font-semibold text-ink">{{ __('instances.admin_title', ['name' => $subdomain]) }}</h3>

    @if ($credentials)
        <p class="mt-1 text-sm text-muted">{{ __('instances.admin_ready') }}</p>

        <dl class="mt-4 space-y-2 rounded-lg border border-line bg-surface-2 p-4 text-sm">
            <div class="flex justify-between gap-4">
                <dt class="text-muted">{{ __('instances.admin_url') }}</dt>
                <dd><a href="{{ $credentials['url'] }}" target="_blank" rel="noopener"
                       class="font-mono text-accent-text hover:underline">{{ $credentials['url'] }}</a></dd>
            </div>
            <div class="flex justify-between gap-4">
                <dt class="text-muted">{{ __('instances.admin_user') }}</dt>
                <dd class="font-mono text-body">{{ $credentials['username'] }}</dd>
            </div>
            <div class="flex justify-between gap-4">
                <dt class="text-muted">{{ __('instances.admin_password') }}</dt>
                <dd class="font-mono text-body">{{ $credentials['password'] }}</dd>
            </div>
        </dl>

        <p class="mt-3 text-xs text-muted">{{ __('instances.admin_once') }}</p>

        <div class="mt-5 flex justify-end">
            <x-ui.button variant="secondary" x-on:click="Livewire.dispatch('closeModal')">{{ __('common.close') }}</x-ui.button>
        </div>
    @elseif ($failed)
        <p class="mt-2 rounded-lg border border-danger-border bg-danger-bg p-3 text-sm text-body">
            {{ __('instances.admin_failed') }}
        </p>
        <div class="mt-5 flex justify-end">
            <x-ui.button variant="secondary" x-on:click="Livewire.dispatch('closeModal')">{{ __('common.close') }}</x-ui.button>
        </div>
    @elseif ($waiting)
        <div class="mt-6 flex items-center gap-3 text-sm text-muted">
            <span class="size-2 animate-pulse rounded-pill bg-accent" aria-hidden="true"></span>
            {{ __('instances.admin_working') }}
        </div>
    @else
        <p class="mt-1 text-sm text-muted">{{ __('instances.admin_body') }}</p>

        <form wire:submit="request" class="mt-4 space-y-3">
            <x-ui.input name="password" type="password" wire:model="password"
                        :label="__('instances.your_password')" autocomplete="current-password" />
            <div class="flex justify-end gap-2">
                <x-ui.button variant="secondary" type="button" x-on:click="Livewire.dispatch('closeModal')">{{ __('instances.cancel') }}</x-ui.button>
                <x-ui.button variant="primary" type="submit" wire:loading.attr="disabled">
                    <x-ui.icon name="unlock" class="size-4" />{{ __('instances.admin_confirm') }}
                </x-ui.button>
            </div>
        </form>
    @endif
</div>
