@php($project = $project ?? null)

<div class="grid gap-5 sm:grid-cols-2">
    {{-- Nombre --}}
    <div class="sm:col-span-2">
        <x-label for="name">Nombre del proyecto *</x-label>
        <x-input id="name" type="text" name="name" value="{{ old('name', $project?->name) }}" required maxlength="120" />
        <x-error for="name" />
    </div>

    {{-- Descripción --}}
    <div class="sm:col-span-2">
        <x-label for="description">Descripción</x-label>
        <textarea id="description" name="description" rows="3" maxlength="1000"
            class="mt-1 block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm placeholder:text-gray-400 focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary dark:border-white/10 dark:bg-gray-800 dark:text-white">{{ old('description', $project?->description) }}</textarea>
        <x-error for="description" />
    </div>

    {{-- Color --}}
    <div>
        <x-label>Color *</x-label>
        <div class="mt-2 flex flex-wrap gap-2">
            @foreach ($palette as $hex)
                <label class="cursor-pointer">
                    <input type="radio" name="color" value="{{ $hex }}" class="sr-only"
                        @checked(old('color', $project?->color ?? '#38BDF8') === $hex)>
                    <span class="block size-8 rounded-full ring-2 ring-transparent ring-offset-2 ring-offset-white transition dark:ring-offset-gray-900"
                          style="background-color: {{ $hex }}"
                          x-data="{ selected: '{{ old('color', $project?->color ?? '#38BDF8') }}' }"
                          :class="selected === '{{ $hex }}' ? 'ring-gray-900 dark:ring-white' : ''"
                          @click="$root.querySelector('[name=color][value=\'{{ $hex }}\']').checked = true; selected = '{{ $hex }}'">
                    </span>
                </label>
            @endforeach
        </div>
        <x-error for="color" />
    </div>

    {{-- Icono --}}
    <div>
        <x-label for="icon">Icono *</x-label>
        <div class="mt-2 grid grid-cols-5 gap-2" x-data="{ selected: '{{ old('icon', $project?->icon ?? 'fa-folder') }}' }">
            @foreach ($icons as $fa)
                <label class="cursor-pointer">
                    <input type="radio" name="icon" value="{{ $fa }}" class="sr-only"
                        @checked(old('icon', $project?->icon ?? 'fa-folder') === $fa)
                        x-on:change="selected = '{{ $fa }}'">
                    <span class="flex size-10 items-center justify-center rounded-lg border-2 transition"
                          :class="selected === '{{ $fa }}' ? 'border-primary bg-primary/10 text-primary' : 'border-gray-200 text-gray-500 hover:border-gray-400 dark:border-white/10 dark:text-gray-400'">
                        <i class="fa-solid {{ $fa }} text-sm"></i>
                    </span>
                </label>
            @endforeach
        </div>
        <x-error for="icon" />
    </div>
</div>

<div class="mt-8 flex items-center justify-end gap-3">
    <a href="{{ route('projects.index') }}">
        <x-button type="button" variant="secondary">Cancelar</x-button>
    </a>
    <x-button type="submit"><i class="fa-solid fa-floppy-disk"></i> Guardar</x-button>
</div>