@if($version->type->value === 'b2in')
    <flux:select wire:model="settings.theme" label="Theme">
        <option value="dark">Dark</option>
        <option value="light">Light</option>
    </flux:select>
    <div class="space-y-4 rounded-xl border border-zinc-200 p-4 dark:border-zinc-700">
        <flux:heading size="sm">{{ __('Header') }}</flux:heading>
        <livewire:admin.cms.display-media-picker
            :value="null"
            field="settings.header_logo_url"
            type="image"
            label="Header-Logo aus Mediathek"
            :key="'picker-b2in-header-logo-' . $context . '-' . $version->id" />
        <flux:input wire:model="settings.header_logo_url" label="Header-Logo URL" placeholder="../assets/b2in-logo-positive.svg" />
        <flux:input wire:model="settings.header_claim" label="Claim" placeholder="Connecting Design & Property" />
    </div>
    <div class="space-y-4 rounded-xl border border-zinc-200 p-4 dark:border-zinc-700">
        <flux:heading size="sm">{{ __('Footer & QR') }}</flux:heading>
        <flux:input wire:model="settings.footer_prefix" label="Footer-Präfix" placeholder="by" />
        <flux:input wire:model="settings.footer_name" label="Footer Name" placeholder="z.B. Marcel Scheibe" />
        <flux:input wire:model="settings.footer_url" label="Footer Domain" placeholder="z.B. b2in.de" />
        <flux:input wire:model="settings.qr_url" label="QR-URL (optional)" placeholder="https://b2in.de"
                    description="Leer = QR-Code nutzt die Footer-Domain." />
    </div>
    <flux:select wire:model="settings.transition.type" label="Transition">
        <option value="crossfade">Crossfade</option>
        <option value="fade">Fade</option>
        <option value="slide">Slide</option>
    </flux:select>
    <flux:input wire:model="settings.transition.duration_ms" type="number" label="Transition-Dauer (ms)" />
    <flux:input wire:model="settings.default_image_duration" type="number" label="Standard-Bilddauer (Sek.)" />
    <flux:checkbox wire:model="settings.display_active" label="Display aktiv" />
@elseif($version->type->value === 'offers')
    <flux:checkbox wire:model="settings.loop" label="Endlosschleife" />
    <div class="space-y-4 rounded-xl border border-zinc-200 p-4 dark:border-zinc-700">
        <flux:heading size="sm">{{ __('Branding') }}</flux:heading>
        <livewire:admin.cms.display-media-picker
            :value="null"
            field="settings.logo_url"
            type="image"
            label="Logo aus Mediathek"
            :key="'picker-offers-logo-' . $context . '-' . $version->id" />
        <flux:input wire:model="settings.logo_url" label="Logo URL" placeholder="../logo-cabinet-300.png" />
        <flux:input wire:model="settings.brand_text" label="Brand-Text" placeholder="Bielefeld" />
    </div>
    <div class="space-y-4 rounded-xl border border-zinc-200 p-4 dark:border-zinc-700">
        <flux:heading size="sm">{{ __('Footer & QR für alle Slides') }}</flux:heading>
        <flux:input wire:model="settings.footer_claim" label="Footer-Claim" placeholder="z.B. Planung • Beratung • Lieferung & Montage" />
        <flux:input wire:model="settings.footer_url" label="Web/QR-URL" placeholder="https://cabinet-bielefeld.de"
                    description="Wird als QR-Ziel genutzt, wenn der einzelne Slide keine eigene QR-URL hat." />
        <flux:input wire:model="settings.qr_default_title" label="Standard QR-Titel" placeholder="Kontakt" />
        <flux:input wire:model="settings.qr_subtitle" label="QR-Unterzeile" placeholder="QR scannen" />
    </div>
    <flux:select wire:model="settings.transition.type" label="Transition">
        <option value="fade">Fade</option>
        <option value="slide">Slide</option>
    </flux:select>
    <flux:input wire:model="settings.transition.duration" type="number" label="Transition-Dauer (ms)" />
@elseif($version->type->value === 'video-display')
    <flux:input wire:model="settings.qr_label" label="QR-Label im Footer" placeholder="Website" />
@endif