<div>
    <form wire:submit="submitForm">
        @csrf
        <div class="space-y-4">

            <!-- Language Selection -->
            @if(count($languages) > 1)
            <div>
                <x-label for="language" :value="__('modules.menu.selectLanguage')" />
                <x-select class="mt-1 block w-full" wire:model.live="currentLanguage">
                    @foreach($languages as $code => $name)
                    <option value="{{ $code }}">{{ $name }}</option>
                    @endforeach
                </x-select>
            </div>
            @endif

            <!-- Menu Name with Translation -->
            <div>
                <x-label for="menuName"
                    :value="__('modules.menu.menuName') . ' (' . ($languages[$currentLanguage] ?? strtoupper($currentLanguage)) . ')'" />
                <x-input id="menuName" class="block mt-1 w-full" type="text"
                    placeholder="{{ __('placeholders.menuNamePlaceholder') }}" wire:model.defer="menuName"
                    wire:change="updateTranslation" />
                    <x-input-error for="translations.{{ $globalLocale }}" class="mt-2" />
            </div>

            <!-- Translation Preview with Delete Option -->
            @if(count($languages) > 1 && array_filter($translations))
            <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-2.5">
                <x-label :value="__('modules.menu.translations')" class="text-sm mb-2 last:mb-0" />
                <div class="divide-y divide-gray-200 dark:divide-gray-600">
                    @foreach($translations as $lang => $text)
                    @if(!empty($text))
                    <div class="flex items-center gap-3 py-1.5">
                        <span class="min-w-[80px] text-xs font-medium text-gray-600 dark:text-gray-300">
                            {{ $languages[$lang] ?? strtoupper($lang) }}
                        </span>
                        <span class="flex-1 text-xs text-gray-700 dark:text-gray-200">{{ $text }}</span>
                        @if($lang !== $globalLocale)
                        <button type="button"
                            class="p-1 text-gray-400 hover:text-red-500 dark:hover:text-red-300 transition-colors rounded-full hover:bg-red-100 dark:hover:bg-red-800"
                            wire:click="removeTranslation('{{ $lang }}')"
                            title="Remove translation">
                            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                            </svg>
                        </button>
                        @endif
                    </div>
                    @endif
                    @endforeach
                </div>
            </div>
            @endif
        </div>

        <!-- Buttons -->
        <div class="flex space-x-4 mt-6 pb-4">
            <x-button>@lang('app.save')</x-button>
            <x-button-cancel wire:click="$dispatch('hideEditMenu')" wire:loading.attr="disabled">@lang('app.cancel')
            </x-button-cancel>
        </div>
    </form>
</div>
