<div class="py-8 max-w-3xl mx-auto sm:px-6 lg:px-8">

    <div class="flex items-center justify-between mb-6">
        <h2 class="text-2xl font-bold text-gray-800">
            {{ $role ? __('Edit role') : __('New role') }}
        </h2>
        <a href="{{ route('admin.roles') }}" class="btn btn-ghost btn-sm gap-1" wire:navigate>
            <x-heroicon-o-arrow-left class="w-4 h-4" /> {{ __('Back') }}
        </a>
    </div>

    <div class="bg-white rounded-lg shadow p-6">
        <form wire:submit.prevent="save" class="space-y-5">

            {{-- Nombre --}}
            <div class="flex items-start gap-4">
                <label class="w-40 shrink-0 pt-2 text-sm font-medium text-gray-700">
                    {{ __('Name') }} <span class="text-error">*</span>
                </label>
                <div class="flex-1">
                    <input type="text" wire:model="name"
                           class="input input-bordered w-full @error('name') input-error @enderror"
                           placeholder="{{ __('e.g. Site Supervisor') }}"
                           @if($isProtected) readonly @endif />
                    @error('name') <p class="text-error text-xs mt-1">{{ $message }}</p> @enderror
                    @if($isProtected)
                        <p class="text-xs text-gray-400 mt-1">{{ __('This role is protected and cannot be renamed.') }}</p>
                    @endif
                </div>
            </div>

            {{-- Descripción --}}
            <div class="flex items-start gap-4">
                <label class="w-40 shrink-0 pt-2 text-sm font-medium text-gray-700">
                    {{ __('Description') }}
                </label>
                <div class="flex-1">
                    <textarea wire:model="description" rows="2"
                              class="textarea textarea-bordered w-full @error('description') textarea-error @enderror"
                              placeholder="{{ __('What is this role for?') }}"></textarea>
                    @error('description') <p class="text-error text-xs mt-1">{{ $message }}</p> @enderror
                </div>
            </div>

            <p class="text-xs text-gray-400 pl-44">
                {{ __('Permissions are assigned from the role view, in the "Permissions" tab.') }}
            </p>

            <div class="flex items-center justify-end gap-3 pt-2 border-t border-base-200">
                <a href="{{ route('admin.roles') }}" class="btn btn-ghost" wire:navigate>{{ __('Cancel') }}</a>
                <button type="submit" class="btn btn-primary gap-2" wire:loading.attr="disabled" wire:target="save">
                    <span wire:loading wire:target="save" class="loading loading-spinner loading-sm"></span>
                    <x-heroicon-o-check class="w-4 h-4" />
                    {{ $role ? __('Update role') : __('Create role') }}
                </button>
            </div>
        </form>
    </div>
</div>
