{{-- R24. --}}
<x-ui.modal :title="__('instances.admin_title', ['name' => $subdomain])">
    {{-- The poll on an element of its own, not on the component tag: a Blade
         directive inside a component's attribute list compiles into the
         attribute bag and breaks the view outright — the same trap as @disabled
         on a component. Livewire polls the whole component whichever element
         carries it, so this does the same job from inside the body.

         Only while there is something to wait for: a poll that keeps running
         after the credentials are on screen is a request every two seconds for
         nothing. --}}
    @if ($waiting && ! $credentials && ! $failed)
        <div wire:poll.2s class="hidden" aria-hidden="true"></div>
    @endif

    @if ($credentials)
        <p class="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>
    @elseif ($failed)
        <p class="rounded-lg border border-danger-border bg-danger-bg p-3 text-sm text-body">
            {{ __('instances.admin_failed') }}
        </p>
    @elseif ($waiting)
        <div class="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="text-sm text-muted">{{ __('instances.admin_body') }}</p>

        <form id="instance-admin-access" 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" />
        </form>
    @endif

    <x-slot:footer>
        <div class="flex justify-end gap-2">
            <x-ui.button variant="secondary" type="button" x-on:click="Livewire.dispatch('closeModal')">
                {{ $credentials || $failed ? __('common.close') : __('instances.cancel') }}
            </x-ui.button>
            @if (! $credentials && ! $failed && ! $waiting)
                {{-- form=, because the footer sits outside the <form> it submits. --}}
                <x-ui.button variant="primary" type="submit" form="instance-admin-access" wire:loading.attr="disabled">
                    <x-ui.icon name="unlock" class="size-4" />{{ __('instances.admin_confirm') }}
                </x-ui.button>
            @endif
        </div>
    </x-slot:footer>
</x-ui.modal>