<x-ui.modal :title="__('mail_settings.edit')">
    <div class="space-y-4">
        <x-ui.input name="address" type="email" wire:model="address" :label="__('mail_settings.address')" />

        <x-ui.input name="displayName" wire:model="displayName" :label="__('mail_settings.display_name')" />

        <x-ui.input name="username" wire:model="username"
                    :label="__('mail_settings.username')" :hint="__('mail_settings.username_hint')" />

        <x-ui.input name="password" type="password" autocomplete="off" wire:model="password"
                    :label="__('mail_settings.password')"
                    :hint="$authenticates ? __('mail_settings.password_hint') : __('mail_settings.password_hint_unauthenticated')" />

        <div>
            {{-- .live: the password hint above reads differently depending on
                 this, so toggling it has to reach the server and re-render
                 rather than sit deferred until the next unrelated action. --}}
            <x-ui.checkbox name="authenticates" wire:model.live="authenticates" :label="__('mail_settings.authenticates')" />
            <p class="pl-7 text-xs text-muted">{{ __('mail_settings.authenticates_hint') }}</p>
        </div>

        @if (! $passwordConfirmed)
            {{-- The second gate, only reached if a new password is actually
                 typed above: address, display name, username and active save
                 without it. Shown here rather than blocking the whole modal
                 behind it, the same as saveServer() leaves savePurposes()
                 alone on the console page. --}}
            <form wire:submit="confirmPassword" class="rounded-lg border border-line bg-surface-2 p-4">
                <p class="text-sm text-body">{{ __('mail_settings.confirm_first') }}</p>
                <div class="mt-3 flex flex-wrap items-start gap-2">
                    <div class="min-w-56 flex-1">
                        <x-ui.input name="confirmablePassword" type="password" autocomplete="current-password"
                                    :label="__('admin_settings.password_current')" wire:model="confirmablePassword" />
                    </div>
                    <x-ui.button type="submit" variant="secondary" class="mt-7" wire:loading.attr="disabled" wire:target="confirmPassword">
                        {{ __('mail_settings.confirm_button') }}
                    </x-ui.button>
                </div>
            </form>
        @endif

        <div class="space-y-2 rounded-lg border border-line bg-surface-2 p-4">
            <x-ui.checkbox name="noReply" wire:model="noReply" :label="__('mail_settings.no_reply')" />
            <p class="pl-7 text-xs text-muted">{{ __('mail_settings.no_reply_hint') }}</p>

            <x-ui.checkbox name="active" wire:model="active" :label="__('mail_settings.active')" />
            @error('active')<p class="pl-7 text-xs text-danger">{{ $message }}</p>@enderror
        </div>
    </div>

    <x-slot:footer>
        <div class="flex justify-end gap-3">
            <x-ui.button variant="secondary" x-on:click="Livewire.dispatch('closeModal')">{{ __('common.cancel') }}</x-ui.button>
            <x-ui.button variant="primary" wire:click="save" wire:loading.attr="disabled" wire:target="save">{{ __('mail_settings.save') }}</x-ui.button>
        </div>
    </x-slot:footer>
</x-ui.modal>
