b2in/resources/views/livewire/admin/cms/display-version-list.blade.php

<div>
    <flux:header class="mb-6">
        <flux:heading size="xl">{{ __('Display-Module') }}</flux:heading>
        <flux:subheading>{{ __('Erstellen und verwalten Sie wiederverwendbare Inhalts-Module für Ihre Displays') }}</flux:subheading>
    </flux:header>

    @if (session()->has('success'))
        <x-success-alert>
            {{ session('success') }}
        </x-success-alert>
    @endif

    @if (session()->has('error'))
        <div class="mb-4 rounded-lg border border-red-200 bg-red-50 p-4 dark:border-red-800 dark:bg-red-900/20">
            <div class="flex items-start gap-3">
                <flux:icon.exclamation-circle class="mt-0.5 h-5 w-5 shrink-0 text-red-600 dark:text-red-400" />
                <p class="text-sm font-medium text-red-800 dark:text-red-200">{{ session('error') }}</p>
            </div>
        </div>
    @endif

    <flux:card>
        <div class="flex items-center justify-between mb-6">
            <div>
                <flux:heading size="lg">{{ __('Module') }}</flux:heading>
                <flux:subheading>{{ __('Jedes Modul enthält Inhalte eines bestimmten Typs') }}</flux:subheading>
            </div>
            <flux:button wire:click="openCreateModal" icon="plus" variant="primary">
                {{ __('Modul erstellen') }}
            </flux:button>
        </div>

        @if($versions->isEmpty())
            <div class="text-center py-12 text-zinc-500 dark:text-zinc-400">
                <flux:icon.rectangle-group class="w-16 h-16 mx-auto mb-4 opacity-50" />
                <p>{{ __('Noch keine Module vorhanden. Erstellen Sie Ihr erstes Modul!') }}</p>
            </div>
        @else
            <div class="space-y-3">
                @foreach($versions as $version)
                    <div wire:key="version-{{ $version->id }}"
                         class="flex items-center gap-4 p-4 bg-zinc-50 dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700 hover:border-zinc-300 dark:hover:border-zinc-600 transition">

                        <div class="flex-1 min-w-0">
                            <div class="flex items-center gap-3 mb-1">
                                <flux:badge :color="$version->is_active ? 'green' : 'zinc'" size="sm">
                                    {{ $version->is_active ? __('Aktiv') : __('Inaktiv') }}
                                </flux:badge>
                                <a href="{{ route('admin.cms.display-module-edit', $version) }}"
                                   wire:navigate
                                   class="font-semibold text-sm hover:underline">
                                    {{ $version->name }}
                                </a>
                                <flux:badge color="{{ match($version->type->value) {
                                    'video-display' => 'purple',
                                    'b2in' => 'blue',
                                    'offers' => 'amber',
                                } }}" size="sm">
                                    {{ $version->type->label() }}
                                </flux:badge>
                            </div>
                            <div class="text-xs text-zinc-600 dark:text-zinc-400 space-x-4">
                                <span>{{ $version->items_count }} {{ __('Inhalte') }}</span>
                                <span>{{ $version->displays_count }} {{ __('Displays') }}</span>
                            </div>
                        </div>

                        <div class="flex items-center gap-2">
                            <flux:button wire:click="toggleActive({{ $version->id }})"
                                        size="sm"
                                        variant="ghost"
                                        :icon="$version->is_active ? 'eye-slash' : 'eye'">
                            </flux:button>

                            <flux:button :href="route('admin.cms.display-module-edit', $version)"
                                        wire:navigate
                                        size="sm"
                                        variant="ghost"
                                        icon="pencil">
                            </flux:button>

                            <flux:button wire:click="deleteVersion({{ $version->id }})"
                                        wire:confirm="Möchten Sie dieses Modul wirklich löschen? Alle zugehörigen Inhalte werden ebenfalls gelöscht."
                                        size="sm"
                                        variant="ghost"
                                        icon="trash"
                                        class="text-red-600 hover:text-red-700">
                            </flux:button>
                        </div>
                    </div>
                @endforeach
            </div>
        @endif
    </flux:card>

    {{-- Create Modal --}}
    <flux:modal :open="$showCreateModal" wire:model="showCreateModal">
        <form wire:submit.prevent="createVersion">
            <div class="space-y-6">
                <div>
                    <flux:heading size="lg">{{ __('Neues Modul erstellen') }}</flux:heading>
                </div>

                <flux:input wire:model="newName" label="Name" placeholder="z.B. Herbst 2025 Video" />
                @error('newName') <span class="text-red-600 text-sm">{{ $message }}</span> @enderror

                <flux:select wire:model="newType" label="Typ" placeholder="Typ auswählen...">
                    @foreach($types as $type)
                        <option value="{{ $type->value }}">{{ $type->label() }}</option>
                    @endforeach
                </flux:select>
                @error('newType') <span class="text-red-600 text-sm">{{ $message }}</span> @enderror

                <div class="flex justify-end gap-3 pt-4">
                    <flux:button type="button" wire:click="$set('showCreateModal', false)" variant="ghost">
                        {{ __('Abbrechen') }}
                    </flux:button>
                    <flux:button type="submit" variant="primary">
                        {{ __('Erstellen & Bearbeiten') }}
                    </flux:button>
                </div>
            </div>
        </form>
    </flux:modal>
</div>