<x-layouts.auth-layout>
    <div class="flex flex-col max-w-[640px]">
        <form action="{{ route('superadmin.contract-template.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 plantilla de contrato
                </h2>
            </div>
            <x-controls.validation-errors />
            {{-- Key --}}
            <x-controls.input type="text" name="name" placeholder="Escribe el nombre" label="Nombre"
                value="{{ old('name') }}" required autofocus />
            <x-controls.textarea name="description" placeholder="Escribe la descripción" label="Descripción"
                value="{{ old('description') }}" />
            {{-- Secciones --}}
            <div class="mt-6">
                <h3 class="font-medium mb-2 text-gray-600">Secciones</h3>
                <x-controls.sections-list :allRules="$controlRules" :sections="old('sections', [])" />
            </div>
            <div class="flex gap-4 mt-8">
                <x-controls.button type="submit">Guardar</x-controls.button>
                <x-controls.button href="{{ route('superadmin.contract-template.index') }}" variant="secondary">
                    Cancelar
                </x-controls.button>
            </div>
        </form>
    </div>
</x-layouts.auth-layout>