{{-- Form per traduzioni - usato da create.blade.php e edit.blade.php --}}
<div class="space-y-6">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Gruppo *</label>
            <input type="text" name="group" value="{{ old('group', $translation?->group ?? 'messages') }}" required
                list="groups"
                placeholder="es: messages, validation, etc."
                class="w-full rounded-lg border-gray-300 focus:border-umami-accent focus:ring-umami-accent">
            <datalist id="groups">
                @foreach($groups as $group)
                    <option value="{{ $group }}">
                @endforeach
            </datalist>
            <p class="text-xs text-gray-400 mt-1">Il gruppo organizza le traduzioni (default: messages)</p>
            @error('group') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
        </div>

        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Chiave *</label>
            <input type="text" name="key" value="{{ old('key', $translation?->key) }}" required
                placeholder="es: hero_subtitle"
                class="w-full rounded-lg border-gray-300 focus:border-umami-accent focus:ring-umami-accent font-mono">
            <p class="text-xs text-gray-400 mt-1">La chiave usata nel codice: __('chiave')</p>
            @error('key') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
        </div>
    </div>

    <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">Descrizione (opzionale)</label>
        <input type="text" name="description" value="{{ old('description', $translation?->description) }}"
            placeholder="Breve descrizione per aiutare a capire dove viene usata"
            class="w-full rounded-lg border-gray-300 focus:border-umami-accent focus:ring-umami-accent">
        <p class="text-xs text-gray-400 mt-1">Visibile solo nell'admin, utile per ricordare dove viene usata</p>
        @error('description') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
    </div>

    <div class="border-t border-gray-200 pt-6">
        <h4 class="text-sm font-medium text-gray-700 mb-4">Traduzioni</h4>

        <div class="space-y-4">
            <div>
                <label class="flex items-center gap-2 text-sm font-medium text-gray-700 mb-1">
                    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9" />
                    </svg>
                    Italiano
                </label>
                <textarea name="it" rows="3"
                    placeholder="Testo in italiano..."
                    class="w-full rounded-lg border-gray-300 focus:border-umami-accent focus:ring-umami-accent">{{ old('it', $translation?->it) }}</textarea>
                @error('it') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
            </div>

            <div>
                <label class="flex items-center gap-2 text-sm font-medium text-gray-700 mb-1">
                    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9" />
                    </svg>
                    English
                </label>
                <textarea name="en" rows="3"
                    placeholder="English text..."
                    class="w-full rounded-lg border-gray-300 focus:border-umami-accent focus:ring-umami-accent">{{ old('en', $translation?->en) }}</textarea>
                @error('en') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
            </div>
        </div>
    </div>

    <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
        <div class="flex gap-3">
            <svg class="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            <div class="text-sm text-blue-800">
                <p class="font-medium mb-1">Come usare la traduzione:</p>
                <code class="bg-white px-2 py-1 rounded text-xs">{{ '{{ __(\''.old('key', $translation?->key ?? 'chiave').'\')\}\}' }}</code>
            </div>
        </div>
    </div>
</div>