{{-- R24: ein Modal mit Eingabefeld benutzt <x-ui.modal> — Kopf und Fuss
     bleiben stehen, gescrollt wird nur die Mitte. --}}
<x-ui.modal :title="__('payment_problems.resolve_title')" :subtitle="$label">
    <p class="text-sm text-muted">{{ __('payment_problems.resolve_body') }}</p>

    <form id="resolve-failed-checkout" wire:submit="confirm" class="mt-4">
        <x-ui.input name="note" wire:model="note"
                    :label="__('payment_problems.note')"
                    :hint="__('payment_problems.note_hint')" />
    </form>

    <x-slot:footer>
        <x-ui.button variant="secondary" x-on:click="Livewire.dispatch('closeModal')">
            {{ __('common.cancel') }}
        </x-ui.button>
        {{-- type=submit + form=… ist der Preis für einen Fuss, der nicht
             wegscrollt (R24) — ein HTML-Attribut, kein Trick. --}}
        <x-ui.button variant="primary" type="submit" form="resolve-failed-checkout"
                     wire:loading.attr="disabled">
            {{ __('payment_problems.resolve') }}
        </x-ui.button>
    </x-slot:footer>
</x-ui.modal>