<div class="space-y-6">

    {{-- HEADER --}}
    <div class="flex items-start justify-between gap-4">
        <div>
            <h2 class="text-xl font-semibold text-gray-800">{{ t('translations.title') }}</h2>
            <p class="text-sm text-gray-500 mt-1">{{ t('translations.subtitle') }}</p>
        </div>

        <div class="flex items-center gap-2 shrink-0">

            {{-- Suche --}}
            <div class="relative">
                <x-heroicon-o-magnifying-glass class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400"/>
                <input type="text"
                       placeholder="{{ t('translations.search_placeholder') }}"
                       wire:model.live.debounce.300ms="search"
                       class="pl-9 pr-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:border-indigo-400 placeholder:text-gray-400 w-52">
            </div>

            {{-- Nur fehlende --}}
            <label class="flex items-center gap-2 cursor-pointer px-3 py-2 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
                <div class="relative">
                    <input type="checkbox" wire:model.live="onlyMissing" class="peer sr-only">
                    <div class="w-4 h-4 rounded border border-gray-300 bg-white flex items-center justify-center
                                peer-checked:bg-indigo-600 peer-checked:border-indigo-600 transition-colors">
                        <x-heroicon-s-check class="w-2.5 h-2.5 text-white opacity-0 peer-checked:opacity-100"/>
                    </div>
                </div>
                <span class="text-xs font-medium text-gray-600">{{ t('translations.filter_missing') }}</span>
            </label>

            {{-- Neu --}}
            <button wire:click="$dispatch('openModal', { component: 'admin.translations.modals.edit-modal' })"
                    class="flex items-center gap-1.5 text-sm font-medium bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg transition-colors">
                <x-heroicon-o-plus class="w-4 h-4"/>
                {{ t('translations.add_key') }}
            </button>

        </div>
    </div>


    {{-- TABELLE --}}
    @if(empty($grouped))
        <div class="bg-white border border-gray-100 rounded-xl shadow-sm py-16 flex flex-col items-center gap-3">
            <div class="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center">
                <x-heroicon-o-language class="w-6 h-6 text-gray-400"/>
            </div>
            <p class="text-sm text-gray-500">{{ t('translations.empty') }}</p>
        </div>
    @else
        <div class="bg-white border border-gray-100 rounded-xl shadow-sm overflow-hidden">
            <table class="w-full text-sm">

                <thead>
                    <tr class="border-b border-gray-50 bg-gray-50/50">
                        <th class="text-left text-xs font-medium text-gray-500 px-5 py-3">Key</th>
                        @foreach(config('app.locales') as $code => $label)
                            <th class="text-left text-xs font-medium text-gray-500 px-5 py-3 uppercase">{{ $label }}</th>
                        @endforeach
                        <th class="px-5 py-3 w-24"></th>
                    </tr>
                </thead>

                <tbody>
                    @foreach($grouped as $group => $items)

                        {{-- Gruppen-Header --}}
                        <tr class="bg-gray-50 border-y border-gray-100">
                            <td colspan="100%" class="px-5 py-2">
                                <span class="text-[10px] font-bold text-gray-400 uppercase tracking-wider">{{ $group }}</span>
                            </td>
                        </tr>

                        @foreach($items as $item)
                            <tr class="border-b border-gray-50 hover:bg-gray-50/50 transition-colors">

                                {{-- KEY --}}
                                <td class="px-5 py-3">
                                    <code class="text-xs font-mono text-gray-600 bg-gray-100 px-1.5 py-0.5 rounded">{{ $item['key'] }}</code>
                                </td>

                                {{-- WERTE je Sprache --}}
                                @foreach(config('app.locales') as $code => $label)
                                    @php $value = $item['values'][$code] ?? null; @endphp
                                    <td class="px-5 py-3 max-w-xs">
                                        @if($value)
                                            <span class="text-sm text-gray-700">{{ \Illuminate\Support\Str::limit($value, 50) }}</span>
                                        @else
                                            <span class="flex items-center gap-1.5 text-xs text-red-500">
                                                <x-heroicon-o-exclamation-circle class="w-3.5 h-3.5 shrink-0"/>
                                                {{ t('translations.missing') }}
                                            </span>
                                        @endif
                                    </td>
                                @endforeach

                                {{-- AKTIONEN --}}
                                <td class="px-5 py-3">
                                    <div class="flex items-center gap-1 justify-end">
                                        <button wire:click="$dispatch('openModal', {
                                                    component: 'admin.translations.modals.edit-modal',
                                                    arguments: { key: '{{ $item['key'] }}' }
                                                })"
                                                class="p-1.5 text-gray-400 hover:text-indigo-600 hover:bg-indigo-50 rounded-lg transition-colors"
                                                title="{{ t('translations.edit') }}">
                                            <x-heroicon-o-pencil class="w-4 h-4"/>
                                        </button>
                                        <button wire:click="$dispatch('openModal', {
                                                    component: 'translations.modals.delete-modal',
                                                    arguments: { key: '{{ $item['key'] }}' }
                                                })"
                                                class="p-1.5 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors"
                                                title="{{ t('translations.delete') }}">
                                            <x-heroicon-o-trash class="w-4 h-4"/>
                                        </button>
                                    </div>
                                </td>

                            </tr>
                        @endforeach

                    @endforeach
                </tbody>

            </table>
        </div>
    @endif

</div>
