<x-ui.modal>
    {{-- Its own header: the badge belongs beside the title, which the plain
         `title` prop cannot express. --}}
    <x-slot:header>
        <div class="flex items-center justify-between gap-3">
            <h3 class="text-base font-semibold text-ink">{{ __('users.edit_title') }}</h3>
            @if ($isOwner)
                <span class="rounded-pill bg-accent-subtle px-2.5 py-0.5 text-xs font-semibold text-accent-text">{{ __('users.role_owner') }}</span>
            @endif
        </div>
    </x-slot:header>

    <div class="space-y-4">
        <div>
            <label class="text-sm font-medium text-body" for="seat-name">{{ __('users.name_optional') }}</label>
            <input id="seat-name" type="text" wire:model="name" wire:keydown.enter="save"
                   class="mt-1.5 w-full rounded-md border border-line-strong bg-surface px-3 py-2 text-sm text-ink" />
            @error('name')<p class="mt-1 text-xs text-danger">{{ $message }}</p>@enderror
        </div>

        <div>
            <label class="text-sm font-medium text-body" for="seat-email">{{ __('users.invite_email') }}</label>
            @if ($addressEditable)
                <input id="seat-email" type="email" wire:model="email" wire:keydown.enter="save"
                       class="mt-1.5 w-full rounded-md border border-line-strong bg-surface px-3 py-2 text-sm text-ink" />
                <p class="mt-1 text-xs text-muted">{{ __('users.email_invited_hint') }}</p>
                @error('email')<p class="mt-1 text-xs text-danger">{{ $message }}</p>@enderror
            @else
                {{-- Shown but not editable, and the reason said out loud: a
                     greyed-out field with no explanation is the thing people
                     ring about. --}}
                <p class="mt-1.5 rounded-md border border-line bg-surface-2 px-3 py-2 font-mono text-sm text-muted">{{ $email }}</p>
                <p class="mt-1 text-xs text-muted">{{ __('users.email_locked_hint') }}</p>
            @endif
        </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">{{ __('users.save') }}</x-ui.button>
        </div>
    </x-slot:footer>
</x-ui.modal>
