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

    {{-- Form --}}
    <div class="bg-white rounded-2xl border border-gray-100 p-6">
        <h3 class="font-semibold text-gray-900 mb-4">
            {{ $editingId ? t('admin.versions.edit') : t('admin.versions.new') }}
        </h3>

        <div class="grid grid-cols-2 gap-4 mb-4">
            <div>
                <label class="text-sm font-medium text-gray-700 block mb-1">{{ t('admin.versions.version') }}</label>
                <input wire:model="version" placeholder="1.1.0"
                    class="w-full border border-gray-200 rounded-xl px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"/>
                @error('version') <p class="text-xs text-red-500 mt-1">{{ $message }}</p> @enderror
            </div>
            <div>
                <label class="text-sm font-medium text-gray-700 block mb-1">{{ t('admin.versions.name') }}</label>
                <input wire:model="name" placeholder="Reminder Update"
                    class="w-full border border-gray-200 rounded-xl px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"/>
                @error('name') <p class="text-xs text-red-500 mt-1">{{ $message }}</p> @enderror
            </div>
        </div>

        <div class="grid grid-cols-3 gap-4 mb-4">
            <div>
                <label class="text-sm font-medium text-gray-700 block mb-1">{{ t('admin.versions.status') }}</label>
                <select wire:model="status"
                    class="w-full border border-gray-200 rounded-xl px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
                    <option value="draft">Draft</option>
                    <option value="beta">Beta</option>
                    <option value="live">Live</option>
                    <option value="rollback">Rollback</option>
                </select>
            </div>
            <div>
                <label class="text-sm font-medium text-gray-700 block mb-1">{{ t('admin.versions.platform') }}</label>
                <select wire:model="platform"
                    class="w-full border border-gray-200 rounded-xl px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
                    <option value="all">{{ t('admin.versions.platform_all') }}</option>
                    <option value="web">Web</option>
                    <option value="app">App</option>
                </select>
            </div>
            <div class="flex items-end pb-2">
                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="checkbox" wire:model="show_popup" class="rounded"/>
                    <span class="text-sm text-gray-700">{{ t('admin.versions.show_popup') }}</span>
                </label>
            </div>
        </div>

        <div class="mb-4">
            <label class="text-sm font-medium text-gray-700 block mb-1">{{ t('admin.versions.changelog') }}</label>
            <textarea wire:model="changelog" rows="3" placeholder="{{ t('admin.versions.changelog_placeholder') }}"
                class="w-full border border-gray-200 rounded-xl px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"></textarea>
        </div>

        <div class="flex gap-2">
            <button wire:click="save"
                class="bg-indigo-600 text-white rounded-xl px-4 py-2 text-sm font-medium hover:bg-indigo-700">
                {{ $editingId ? t('common.save') : t('common.create') }}
            </button>
            @if($editingId)
            <button wire:click="$set('editingId', null)"
                class="bg-gray-100 text-gray-700 rounded-xl px-4 py-2 text-sm hover:bg-gray-200">
                {{ t('common.cancel') }}
            </button>
            @endif
        </div>
    </div>

    {{-- Liste --}}
    <div class="bg-white rounded-2xl border border-gray-100 overflow-hidden">
        <table class="w-full">
            <thead class="bg-gray-50 border-b border-gray-100">
                <tr>
                    <th class="text-left px-4 py-3 text-xs font-medium text-gray-500">{{ t('admin.versions.version') }}</th>
                    <th class="text-left px-4 py-3 text-xs font-medium text-gray-500">{{ t('admin.versions.name') }}</th>
                    <th class="text-left px-4 py-3 text-xs font-medium text-gray-500">{{ t('admin.versions.status') }}</th>
                    <th class="text-left px-4 py-3 text-xs font-medium text-gray-500">{{ t('admin.versions.platform') }}</th>
                    <th class="text-left px-4 py-3 text-xs font-medium text-gray-500">{{ t('admin.versions.released') }}</th>
                    <th class="px-4 py-3"></th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-50">
                @foreach($this->versions as $v)
                <tr class="hover:bg-gray-50 transition">
                    <td class="px-4 py-3">
                        <span class="font-mono text-sm font-medium text-gray-900">{{ $v->version }}</span>
                    </td>
                    <td class="px-4 py-3 text-sm text-gray-700">{{ $v->name }}</td>
                    <td class="px-4 py-3">
                        <span class="px-2 py-1 rounded-full text-xs font-medium
                            {{ match($v->status) {
                                'live'     => 'bg-green-100 text-green-700',
                                'beta'     => 'bg-amber-100 text-amber-700',
                                'draft'    => 'bg-gray-100 text-gray-600',
                                'rollback' => 'bg-red-100 text-red-600',
                                default    => ''
                            } }}">
                            {{ ucfirst($v->status) }}
                        </span>
                    </td>
                    <td class="px-4 py-3 text-sm text-gray-500">{{ ucfirst($v->platform) }}</td>
                    <td class="px-4 py-3 text-sm text-gray-500">
                        {{ $v->released_at?->format('d.m.Y H:i') ?? '—' }}
                    </td>
                    <td class="px-4 py-3">
                        <div class="flex items-center gap-2 justify-end">
                            @if($v->status !== 'live')
                            <button wire:click="setLive('{{ $v->id }}')"
                                class="text-xs text-green-600 hover:text-green-800 font-medium">
                                {{ t('admin.versions.go_live') }}
                            </button>
                            @endif
                            <button wire:click="edit('{{ $v->id }}')"
                                class="text-xs text-indigo-600 hover:text-indigo-800">
                                {{ t('common.edit') }}
                            </button>
                            <button wire:click="delete('{{ $v->id }}')"
                                wire:confirm="{{ t('admin.versions.confirm_delete') }}"
                                class="text-xs text-red-500 hover:text-red-700">
                                {{ t('common.delete') }}
                            </button>
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>

</div>
