<x-layouts.auth-layout>
    <div class="flex flex-col max-w-[640px]">
        <form action="{{ route('superadmin.section-rules.store') }}" method="POST">
            @csrf
            <div class="flex flex-wrap justify-between gap-3 py-4">
                <h2 class="text-complement300 font-main text-size-subtitle font-medium">
                    Crear regla de sección
                </h2>
            </div>
            <x-controls.validation-errors />
            {{-- Label --}}
            <x-controls.input type="text" name="label" placeholder="Escribe la etiqueta" label="Etiqueta"
                value="{{ old('label') }}" required />
                
            {{-- Key --}}
            <x-controls.input type="text" name="key" placeholder="Escribe la clave" label="Clave"
                value="{{ old('key') }}" required autofocus />

            <x-controls.options-list name="options" label="Opciones" :options="old('options', [])" />

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

            <div class="flex gap-4 mt-8">
                <x-controls.button type="submit">Guardar</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>