{{-- Offers: Slides --}}
@php
    $slides = $items->get('slide', collect());
@endphp

<flux:card>
    <div class="flex items-center justify-between mb-6">
        <div>
            <flux:heading size="lg">{{ __('Slides') }}</flux:heading>
            <flux:subheading>{{ __('Angebots-Slides werden in der angegebenen Reihenfolge angezeigt') }}</flux:subheading>
        </div>
        <flux:button wire:click="openItemModal(null, 'slide')" icon="plus">
            {{ __('Slide hinzufügen') }}
        </flux:button>
    </div>

    @if($slides->isEmpty())
        <div class="text-center py-12 text-zinc-500 dark:text-zinc-400">
            <flux:icon.presentation-chart-bar class="w-16 h-16 mx-auto mb-4 opacity-50" />
            <p>{{ __('Noch keine Slides vorhanden.') }}</p>
        </div>
    @else
        <div class="space-y-3">
            @foreach($slides as $index => $item)
                <div wire:key="item-{{ $item->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 transition">

                    <div class="flex flex-col gap-1">
                        @if($index > 0)
                            <flux:button wire:click="moveItem({{ $item->id }}, 'up')" size="xs" variant="ghost" icon="chevron-up" class="text-zinc-400 hover:text-zinc-600"></flux:button>
                        @endif
                        @if($index < count($slides) - 1)
                            <flux:button wire:click="moveItem({{ $item->id }}, 'down')" size="xs" variant="ghost" icon="chevron-down" class="text-zinc-400 hover:text-zinc-600"></flux:button>
                        @endif
                    </div>

                    <div class="flex h-28 w-20 shrink-0 flex-col rounded-lg border border-zinc-200 bg-white p-1.5 dark:border-zinc-700 dark:bg-zinc-900">
                        <div class="mb-1.5 h-14 rounded bg-zinc-100 bg-cover bg-center dark:bg-zinc-800"
                             @if(!empty($item->content['image_url'])) style="background-image: url('{{ $item->content['image_url'] }}')" @endif></div>
                        <div class="line-clamp-2 text-[10px] font-semibold leading-tight text-zinc-700 dark:text-zinc-200">{{ $item->content['title'] ?? 'Slide' }}</div>
                        <div class="mt-auto truncate text-[9px] text-zinc-500">{{ $item->content['price'] ?? ($item->content['badge_text'] ?? '') }}</div>
                    </div>

                    <div class="flex-1 min-w-0">
                        <div class="flex items-center gap-3 mb-1">
                            <flux:badge :color="$item->is_active ? 'green' : 'zinc'" size="sm">
                                {{ $item->is_active ? __('Aktiv') : __('Inaktiv') }}
                            </flux:badge>
                            <flux:badge color="amber" size="sm">
                                {{ match($item->content['type'] ?? '') {
                                    'intro' => 'Intro',
                                    'product-hero' => 'Produkt-Hero',
                                    'product-details' => 'Produkt-Details',
                                    'product-impulse' => 'Produkt-Impuls',
                                    default => $item->content['type'] ?? '–',
                                } }}
                            </flux:badge>
                            <span class="font-semibold text-sm">{{ $item->content['title'] ?? '–' }}</span>
                        </div>
                        <div class="text-xs text-zinc-600 dark:text-zinc-400 space-x-4">
                            @if(!empty($item->content['price']))
                                <span class="font-medium">{{ $item->content['price'] }}</span>
                            @endif
                            <span>{{ number_format(($item->content['duration'] ?? 8000) / 1000, 1) }}s</span>
                            @if(!empty($item->content['badge_text']))
                                <span>{{ $item->content['badge_text'] }}</span>
                            @endif
                        </div>
                    </div>

                    <div class="flex items-center gap-2">
                        <flux:button wire:click="toggleItemStatus({{ $item->id }})" size="sm" variant="ghost" :icon="$item->is_active ? 'eye-slash' : 'eye'"></flux:button>
                        <flux:button wire:click="openItemModal({{ $item->id }})" size="sm" variant="ghost" icon="pencil"></flux:button>
                        <flux:button wire:click="deleteItem({{ $item->id }})" wire:confirm="Möchten Sie diesen Eintrag wirklich löschen?" size="sm" variant="ghost" icon="trash" class="text-red-600 hover:text-red-700"></flux:button>
                    </div>
                </div>
            @endforeach
        </div>
    @endif
</flux:card>