{{-- R24: the configuration itself is long, so it is the part that scrolls —
     the title and the close button stay where they were. --}}
<x-ui.modal :title="__('vpn.get_config_title', ['name' => $name])">
    @if ($config === null)
        <p class="text-sm text-muted">{{ __('vpn.get_config_body') }}</p>

        <form id="vpn-config-access" wire:submit="reveal" class="mt-4 space-y-3">
            {{-- autocomplete hint keeps password managers from offering to save
                 this as a new login for the site. --}}
            <x-ui.input name="password" type="password" wire:model="password"
                        :label="__('vpn.your_password')" autocomplete="current-password" />
        </form>
    @else
        <div x-data="vpnConfigActions(@js($this->filename()))">
            <pre x-ref="config" class="max-h-64 overflow-auto rounded-lg border border-line bg-surface-2 p-4 font-mono text-xs leading-relaxed text-body">{{ $config }}</pre>
            <div class="mt-3 flex flex-wrap items-center gap-2">
                <x-ui.button variant="primary" x-on:click="download()">
                    <x-ui.icon name="download" class="size-4" />{{ __('vpn.download') }}
                </x-ui.button>
                <x-ui.button variant="secondary" x-on:click="copy()">
                    <x-ui.icon name="copy" class="size-4" />
                    <span x-text="copied ? @js(__('vpn.copied')) : @js(__('vpn.copy'))"></span>
                </x-ui.button>
                <x-ui.button variant="secondary" wire:click="toggleQr" wire:loading.attr="disabled">
                    <x-ui.icon name="qr-code" class="size-4" />{{ $showQr ? __('vpn.qr_hide') : __('vpn.qr_show') }}
                </x-ui.button>
                <p x-show="failed" x-cloak class="text-xs text-danger">{{ __('vpn.copy_failed') }}</p>
            </div>

            @if ($qrSvg)
                <div class="mt-4 flex flex-col items-center gap-2 rounded-lg border border-line p-4">
                    <div>{!! $qrSvg !!}</div>
                    <p class="text-xs text-muted">{{ __('vpn.qr_hint') }}</p>
                </div>
            @endif

        </div>
    @endif

    <x-slot:footer>
        <div class="flex justify-end gap-2">
            <x-ui.button variant="secondary" type="button" x-on:click="Livewire.dispatch('closeModal')">
                {{ $config === null ? __('vpn.cancel') : __('common.close') }}
            </x-ui.button>
            @if ($config === null)
                {{-- form=, because the footer sits outside the <form>. --}}
                <x-ui.button variant="primary" type="submit" form="vpn-config-access" wire:loading.attr="disabled">
                    <x-ui.icon name="unlock" class="size-4" />{{ __('vpn.reveal') }}
                </x-ui.button>
            @endif
        </div>
    </x-slot:footer>
</x-ui.modal>