<div class="flex flex-col">

    {{-- HEADER --}}
    <div class="flex items-center justify-between px-6 py-4 border-b border-gray-100">
        <div>
            <p class="text-sm font-semibold text-gray-800">{{ t('translations.edit_title') }}</p>
            <p class="text-xs text-gray-400">{{ t('translations.edit_subtitle') }}</p>
        </div>
        <button wire:click="$dispatch('closeModal')"
                class="p-1.5 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">
            <x-heroicon-o-x-mark class="w-5 h-5"/>
        </button>
    </div>

    {{-- BODY --}}
    <div class="px-6 py-5 space-y-4">

        <div>
            <label class="block text-xs font-medium text-gray-600 mb-1.5">{{ t('translations.key') }}</label>
            <input type="text" wire:model="key"
                   class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm font-mono focus:outline-none focus:border-indigo-400">
        </div>

        @foreach(config('app.locales') as $code => $label)
            <div>
                <label class="flex items-center gap-1.5 text-xs font-medium text-gray-600 mb-1.5 uppercase">
                    <span class="w-5 h-5 rounded bg-gray-100 text-gray-500 font-bold text-[10px] flex items-center justify-center">{{ strtoupper($code) }}</span>
                    {{ $label }}
                </label>
                <input type="text" wire:model="values.{{ $code }}"
                       class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:border-indigo-400 placeholder:text-gray-400"
                       placeholder="{{ $label }}…">
            </div>
        @endforeach

    </div>

    {{-- FOOTER --}}
    <div class="px-6 py-4 border-t border-gray-100 flex gap-2 justify-end">
        <button wire:click="$dispatch('closeModal')"
                class="px-4 py-2 text-sm text-gray-600 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
            {{ t('translations.cancel') }}
        </button>
        <button wire:click="save"
                class="px-4 py-2 text-sm font-medium bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg transition-colors">
            {{ t('translations.save') }}
        </button>
    </div>

</div>
