<div class="flex w-full flex-col gap-6">
    <div class="flex flex-wrap items-center gap-3">
        <a href="{{ route('works.index') }}" wire:navigate class="setel-btn-secondary inline-flex items-center gap-2">
            <flux:icon.arrow-left class="size-4" />
            Volver al listado
        </a>
    </div>

    <div class="setel-card overflow-hidden p-5 md:p-6">
        <h2 class="text-lg font-semibold text-[var(--setel-text)]">Registrar orden de trabajo</h2>
        <p class="mt-1 text-sm text-[var(--setel-text-muted)]">Registre los datos operativos de la OT (OT, estados, fechas, SLA, prioridad, observaciones, sitio y tipo). NOC, técnico y coordinador pueden asignarse al editar la OT o desde <strong>Operaciones → Asignaciones</strong>. Los cambios posteriores quedan en el historial de auditoría.</p>

        <form class="mt-6 flex flex-col gap-6" wire:submit="save">
            @include('livewire.works.partials.coordinator-fields-work')

            <div class="flex flex-wrap gap-3">
                <button type="submit" class="setel-btn-primary" wire:loading.attr="disabled" wire:target="save">
                    <span wire:loading.remove wire:target="save">Guardar OT</span>
                    <span wire:loading wire:target="save">Guardando…</span>
                </button>
                <a href="{{ route('works.index') }}" wire:navigate class="setel-btn-secondary">Cancelar</a>
            </div>
        </form>
    </div>
</div>
