@props([
    'group' => null,
    'sectors' => collect(),
    'action',
    'method' => 'POST',
])

<form method="POST" action="{{ $action }}" class="space-y-6">
    @csrf
    @if($method !== 'POST')
        @method($method)
    @endif

    <div>
        <x-form.label for="sector_id" value="Setor (área / departamento)" />
        <select
            name="sector_id"
            id="sector_id"
            required
            class="block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500/40"
        >
            <option value="" @selected(old('sector_id', $group?->sector_id) === null || (string) old('sector_id', $group?->sector_id) === '')>Selecione um setor</option>
            @foreach($sectors as $sectorOption)
                <option value="{{ $sectorOption->id }}" @selected((string) old('sector_id', $group?->sector_id) === (string) $sectorOption->id)>
                    {{ $sectorOption->name }}
                </option>
            @endforeach
        </select>
        <x-form.error name="sector_id" />
        <p class="mt-1 text-xs text-gray-500">O grupo fica vinculado a este departamento; o nome do grupo pode repetir em outro setor.</p>
    </div>

    <div>
        <x-form.label for="name" value="Nome do grupo" />
        <x-form.input
            id="name"
            name="name"
            value="{{ old('name', $group?->name) }}"
            required
            maxlength="191"
        />
        <x-form.error name="name" />
    </div>

    <div class="flex items-center gap-2">
        <input type="hidden" name="is_active" value="0">
        <input
            type="checkbox"
            name="is_active"
            id="is_active"
            value="1"
            class="rounded border-gray-300 text-blue-600 shadow-sm focus:ring-blue-500"
            @checked(old('is_active', $group?->is_active ?? true))
        >
        <x-form.label for="is_active" value="Grupo ativo (apenas grupos ativos entram na validação de importação)" />
    </div>
    <x-form.error name="is_active" />

    <div class="flex justify-end gap-3">
        <a href="{{ route('training.groups.index') }}" class="text-gray-600 hover:text-gray-900">
            Cancelar
        </a>

        <x-ui.button type="submit">
            {{ $group ? 'Atualizar' : 'Salvar' }}
        </x-ui.button>
    </div>
</form>