<x-layouts.auth-layout>
    <div class="flex flex-col max-w-[640px]">
        <form action="{{ route('superadmin.section-rules.update', $id) }}" method="POST">
            @csrf
            @method('PUT')

           <div class="flex flex-wrap justify-between gap-3 py-4">
                <h2 class="text-complement300 font-main text-size-subtitle font-medium">Editar control - regla
                </h2>
            </div>
            <x-controls.validation-errors />

            {{-- Label --}}
            <x-controls.input 
                type="text" 
                name="label" 
                placeholder="Escribe la etiqueta" 
                label="Etiqueta"
                value="{{ old('label', $dto->label) }}" 
                required 
            />

            {{-- Key --}}
            <x-controls.input 
                type="text" 
                name="key" 
                placeholder="Escribe la clave" 
                label="Clave"
                value="{{ old('key', $dto->key) }}" 
                required 
                autofocus 
            />

            {{-- Options --}}
            <x-controls.options-list 
                name="options" 
                label="Opciones" 
                :options="old('options', $dto->options ?? [])" 
            />

            {{-- Default --}}
            <x-controls.input 
                type="text" 
                name="default" 
                placeholder="Valor por defecto" 
                label="Valor por defecto"
                value="{{ old('default', $dto->default) }}" 
            />

            <div class="flex gap-4 mt-8">
                <x-controls.button type="submit">Actualizar</x-controls.button>
                <x-controls.button 
                    href="{{ route('superadmin.section-rules.index') }}" 
                    variant="secondary">
                    Cancelar
                </x-controls.button>
            </div>
        </form>
    </div>
</x-layouts.auth-layout>