@if($version->type->value === 'b2in')
    @php
        $footerShown = ($settings['show_footer'] ?? true) !== false;
        $showLogo = ($settings['show_logo'] ?? true) !== false;
        $showClaim = ($settings['show_claim'] ?? true) !== false;
        $logoPos = $settings['logo_position'] ?? 'top-left';
        $claimPos = $settings['claim_position'] ?? 'top-right';
        $brandPositions = [
            'top-left' => __('Oben links'),
            'top-right' => __('Oben rechts'),
            'bottom-left' => __('Unten links'),
            'bottom-right' => __('Unten rechts'),
        ];
    @endphp
    <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">{{ __('Marke') }}</flux:heading>
        <flux:subheading>{{ __('Logo und Claim. Standardmäßig oben im Header. Die Ecken lassen sich frei wählen.') }}</flux:subheading>
        <livewire:admin.cms.display-media-picker
            :value="null"
            field="settings.header_logo_url"
            type="image"
            label="Logo aus Mediathek"
            :key="'picker-b2in-header-logo-' . $context . '-' . $version->id" />
        <div class="flex items-end gap-3">
            <x-media-thumb :url="$settings['header_logo_url'] ?? ''" />
            <flux:input wire:model.live.debounce.500ms="settings.header_logo_url" label="Logo URL" placeholder="../assets/b2in-logo-positive.svg" class="flex-1" />
        </div>
        <flux:input wire:model="settings.header_claim" label="Claim" placeholder="Connecting Design & Property" />

        <div class="flex flex-wrap gap-6">
            <flux:switch wire:model.live="settings.show_logo" label="Logo anzeigen" />
            <flux:switch wire:model.live="settings.show_claim" label="Claim anzeigen" />
        </div>

        @if($showLogo)
            <flux:select wire:model.live="settings.logo_position" label="Logo-Position">
                @foreach($brandPositions as $value => $label)
                    <option value="{{ $value }}" @disabled($footerShown && str_starts_with($value, 'bottom'))>{{ $label }}</option>
                @endforeach
            </flux:select>
        @endif

        @if($showClaim)
            <flux:select wire:model.live="settings.claim_position" label="Claim-Position">
                @foreach($brandPositions as $value => $label)
                    <option value="{{ $value }}"
                        @disabled(($showLogo && $value === $logoPos) || ($footerShown && str_starts_with($value, 'bottom')))>
                        {{ $label }}{{ ($showLogo && $value === $logoPos) ? ' '.__('(Logo)') : '' }}
                    </option>
                @endforeach
            </flux:select>
        @endif

        @if($footerShown)
            <flux:callout variant="secondary" icon="information-circle">
                <flux:callout.text>{{ __('Untere Ecken sind nur verfügbar, wenn der Footer ausgeblendet ist.') }}</flux:callout.text>
            </flux:callout>
        @endif
    </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:switch wire:model.live="settings.show_footer" label="Footer anzeigen"
            description="Blendet die Fußzeile mit Domain, Name und QR-Code ein oder aus." />
        <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.eu" />
        <flux:input wire:model="settings.qr_url" label="QR-URL (optional)" placeholder="https://b2in.e"
                    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" />
    <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)" />
    <flux:callout variant="secondary" icon="information-circle">
        <flux:callout.text>{{ __('Logo, Marken-Text, QR-Code und Kontakt werden je Angebot direkt am Element gepflegt.') }}</flux:callout.text>
    </flux:callout>
@elseif($version->type->value === 'video-display')
    <flux:input wire:model="settings.qr_label" label="QR-Label im Footer" placeholder="Website" />
@endif