{{-- R24: the ten-row textarea scrolls, the title and the buttons stay. --}}
<x-ui.modal :title="__('templates.edit_title')" :subtitle="__('templates.edit_body')">
    <form id="edit-mail-template" wire:submit="save" class="space-y-4">
        <x-ui.input name="name" wire:model="name" :label="__('templates.name')" />
        <x-ui.input name="subject" wire:model="subject" :label="__('templates.subject')" />

        <div>
            <label for="edit-body" class="block text-sm font-medium text-body">{{ __('templates.body') }}</label>
            <textarea id="edit-body" rows="10" wire:model="body"
                      class="mt-1.5 block w-full rounded border border-line bg-surface px-3.5 py-2.5 text-sm text-ink"></textarea>
            @error('body')<p class="mt-1.5 text-xs text-danger">{{ $message }}</p>@enderror
        </div>

        {{-- One checkbox, one value: retiring an answer rather than deleting it,
             because it is still the answer somebody was given last year. --}}
        <label class="flex items-center gap-2.5 text-sm text-body">
            <input type="checkbox" wire:model="active"
                   class="size-4 rounded border-line-strong text-accent-active focus:ring-accent-active" />
            {{ __('templates.active') }}
        </label>

        <div class="rounded-md border border-line bg-surface-2 p-3">
            <p class="lbl">{{ __('templates.placeholders') }}</p>
            <p class="mt-2 flex flex-wrap gap-x-3 gap-y-1 font-mono text-xs text-accent-text">
                @foreach ($placeholders as $token => $explanation)
                    {{-- See mail-templates.blade.php: a literal }} inside an
                         echo tag ends the tag. --}}
                    @php $literal = '{{'.$token.'}}'; @endphp
                    <span class="select-all">{{ $literal }}</span>
                @endforeach
            </p>
        </div>

    </form>

    <x-slot:footer>
        <div class="flex flex-wrap gap-2">
            {{-- form=, because the button lives outside the <form> it submits —
                 the price of a footer that does not scroll away, and an HTML
                 attribute rather than a workaround. --}}
            <x-ui.button type="submit" form="edit-mail-template" variant="primary"
                         wire:loading.attr="disabled" wire:target="save">
                {{ __('templates.save') }}
            </x-ui.button>
            {{-- Livewire.dispatch, not Alpine's $dispatch. Alpine's fires a
                 browser DOM event, and the modal listens for a LIVEWIRE event of
                 that name — so the button did nothing at all. --}}
            <x-ui.button variant="secondary" x-on:click="Livewire.dispatch('closeModal')">{{ __('templates.cancel') }}</x-ui.button>
        </div>
    </x-slot:footer>
</x-ui.modal>