{{-- R24: Kopf und Fuß stehen fest, gescrollt wird nur die Mitte. Die
     Befehlszeile ist lang, und sie darf ihren eigenen Kopieren-Knopf nicht aus
     dem Fenster schieben. --}}
<x-ui.modal>
    <x-slot:header>
        <h2 class="text-lg font-semibold text-ink">
            {{ $command === null ? __('hosts.reissue.title') : __('hosts.takeover.command_title') }}
        </h2>
        <p class="mt-1 max-w-[60ch] text-sm text-muted">
            {{ $command === null ? __('hosts.reissue.body', ['name' => $name]) : __('hosts.takeover.command_sub') }}
        </p>
    </x-slot:header>

    @if ($command === null)
        @if ($missingSettings !== [])
            {{-- Erst gar nicht ausstellen: eine Zeile ohne Hub-Schlüssel oder
                 Endpunkt sieht vollständig aus und scheitert erst auf der
                 Maschine, nach dem Neuaufsetzen der Platten. --}}
            <x-ui.alert variant="warning">
                <p class="font-medium">{{ __('hosts.takeover.missing_title') }}</p>
                <p class="mt-1">{{ __('hosts.takeover.missing_body', ['settings' => implode(', ', $missingSettings)]) }}</p>
            </x-ui.alert>
        @elseif ($refusal !== null)
            <x-ui.alert variant="warning">
                <p>{{ $refusal }}</p>
            </x-ui.alert>
        @else
            <p class="text-sm leading-relaxed text-body">{{ __('hosts.reissue.invalidates') }}</p>
        @endif
    @else
        <div x-data="{ copied: false }" class="overflow-hidden rounded-lg border border-accent-border bg-surface shadow-xs">
            <div class="flex items-center justify-between gap-3 border-b border-line bg-accent-subtle px-4 py-2.5">
                <p class="min-w-0 text-xs font-medium text-accent-text">{{ __('hosts.takeover.once_title') }}</p>
                <button type="button"
                        class="inline-flex shrink-0 items-center gap-1.5 rounded border border-line bg-surface px-2.5 py-1 text-xs font-medium text-body transition hover:text-ink"
                        x-on:click="navigator.clipboard.writeText($refs.command.textContent.trim()); copied = true; setTimeout(() => copied = false, 2000)">
                    <x-ui.icon name="copy" class="size-4" x-show="!copied" />
                    <x-ui.icon name="check" class="size-4" x-show="copied" x-cloak />
                    <span x-text="copied ? @js(__('hosts.takeover.copied')) : @js(__('hosts.takeover.copy'))">{{ __('hosts.takeover.copy') }}</span>
                </button>
            </div>

            {{-- Umbrechen statt waagerecht rollen: aus einem Kasten mit
                 Rollbalken markiert jemand die Hälfte und merkt es erst auf der
                 Maschine. --}}
            <pre class="max-h-64 overflow-y-auto px-4 py-3.5 font-mono text-xs leading-relaxed break-all whitespace-pre-wrap text-ink"
                 x-ref="command">{{ $command }}</pre>
        </div>

        <p class="mt-3 text-xs leading-relaxed text-muted">{{ __('hosts.takeover.once_body') }}</p>
    @endif

    <x-slot:footer>
        <div class="flex justify-end gap-3">
            @if ($command === null)
                <x-ui.button variant="secondary" x-on:click="Livewire.dispatch('closeModal')">{{ __('hosts.cancel') }}</x-ui.button>
                @if ($missingSettings === [] && $refusal === null)
                    <x-ui.button wire:click="issue" wire:loading.attr="disabled">
                        <x-ui.icon name="refresh" class="size-4" />{{ __('hosts.reissue.confirm') }}
                    </x-ui.button>
                @endif
            @else
                {{-- „Fertig" und nicht „Abbrechen": ausgestellt ist ausgestellt,
                     und das Schließen nimmt nichts zurück. --}}
                <x-ui.button variant="secondary" x-on:click="Livewire.dispatch('closeModal')">{{ __('hosts.reissue.done') }}</x-ui.button>
            @endif
        </div>
    </x-slot:footer>
</x-ui.modal>