<div>
    {{-- Nombre --}}
    <div>
        <label class="block text-sm font-medium text-gray-700 mb-2">Nombre</label>
        <input type="text" wire:model="name"
            class="w-full rounded-lg border border-gray-300 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('name') border-red-500 @enderror"
            placeholder="Introduce tu nombre"
            required>
        @error('name')
            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
        @enderror
    </div>

    {{-- Dominio / URL --}}
    <div>
        <label class="block text-sm font-medium text-gray-700 mb-2">Dominio / URL</label>
        <input type="text" wire:model="domain"
            class="w-full rounded-lg border border-gray-300 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('domain') border-red-500 @enderror"
            placeholder="www.tresipunt.com"
            required>
        @error('domain')
            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
        @enderror
    </div>

    {{-- Descripción --}}
    <div>
        <label class="block text-sm font-medium text-gray-700 mb-2">Descripción</label>
        <textarea wire:model="description" rows="3"
            class="w-full rounded-lg border border-gray-300 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('description') border-red-500 @enderror"
            placeholder="Escribe una breve descripción del entorno aquí..."></textarea>
        @error('description')
            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
        @enderror
    </div>

    {{-- Grid de 2 columnas para selects --}}
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        {{-- Tipo de entorno --}}
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">Tipo de entorno</label>
            <select wire:model="type_id"
                class="w-full rounded-lg border border-gray-300 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('type_id') border-red-500 @enderror">
                <option value="">Selecciona el tipo</option>
                @foreach($types as $type)
                    <option value="{{ $type->id }}">{{ $type->name }}</option>
                @endforeach
            </select>
            @error('type_id')
                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
            @enderror
        </div>

        {{-- Versión --}}
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">Versión</label>
            <input type="text" wire:model="version"
                class="w-full rounded-lg border border-gray-300 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('version') border-red-500 @enderror"
                placeholder="Selecciona la versión"
                required>
            @error('version')
                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
            @enderror
        </div>

        {{-- Desarrollo --}}
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">Desarrollo</label>
            <select wire:model="env"
                class="w-full rounded-lg border border-gray-300 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent @error('env') border-red-500 @enderror"
                required>
                <option value="">Selecciona el desarrollo</option>
                @foreach($envs as $key => $label)
                    <option value="{{ $key }}">{{ $label }}</option>
                @endforeach
            </select>
            @error('env')
                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
            @enderror
        </div>
    </div>
</div>

