@if(isset($variableSchemaAvailable) && $variableSchemaAvailable)
    <div style="position: relative; z-index: 999999; background: #1e1e2e; color: #cdd6f4; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; border-bottom: 1px solid #313244;">
        <div style="display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; gap: 12px; flex-wrap: wrap;">

            {{-- Left: status + toggle --}}
            <div style="display: flex; align-items: center; gap: 12px;">
                <div style="display: flex; align-items: center; gap: 8px;">
                    <span style="width: 8px; height: 8px; border-radius: 50%; background: {{ $variableInjectionActive ? '#a6e3a1' : '#f38ba8' }}; display: inline-block; box-shadow: 0 0 6px {{ $variableInjectionActive ? 'rgba(166,227,161,0.5)' : 'rgba(243,139,168,0.4)' }};"></span>
                    <span style="font-size: 0.82em; font-weight: 500; letter-spacing: 0.02em;">
                        Variables
                        <strong style="color: {{ $variableInjectionActive ? '#a6e3a1' : '#f38ba8' }}; font-weight: 700;">
                            {{ $variableInjectionActive ? 'ON' : 'OFF' }}
                        </strong>
                    </span>
                </div>

                <a href="{{ request()->fullUrlWithQuery(['disable_sample_injection' => $variableInjectionActive ? 1 : 0]) }}"
                   style="font-size: 0.78em; color: #89b4fa; text-decoration: none; padding: 3px 10px; border: 1px solid #45475a; border-radius: 20px; transition: all 0.15s ease;"
                   onmouseover="this.style.background='#313244'; this.style.borderColor='#89b4fa'"
                   onmouseout="this.style.background='transparent'; this.style.borderColor='#45475a'">
                    {{ $variableInjectionActive ? 'Desactiver' : 'Activer' }}
                </a>
            </div>

            {{-- Right: recipient profile switcher --}}
            @if(isset($recipientProfiles) && count($recipientProfiles) > 1)
                <div class="dropdown">
                    <button type="button"
                            data-bs-toggle="dropdown"
                            aria-expanded="false"
                            style="display: flex; align-items: center; gap: 8px; font-size: 0.82em; color: #cdd6f4; background: #313244; border: 1px solid #45475a; border-radius: 20px; padding: 4px 14px 4px 10px; cursor: pointer; font-family: inherit; transition: all 0.15s ease;"
                            onmouseover="this.style.borderColor='#89b4fa'; this.style.background='#45475a'"
                            onmouseout="this.style.borderColor='#45475a'; this.style.background='#313244'">
                        <i class="fas fa-user" style="font-size: 0.85em; color: #89b4fa;"></i>
                        <span style="font-weight: 600;">{{ $activeRecipientProfile }}</span>
                        <i class="fas fa-chevron-down" style="font-size: 0.65em; opacity: 0.6; margin-left: 2px;"></i>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end shadow-lg"
                        style="background: #1e1e2e; border: 1px solid #313244; border-radius: 10px; padding: 6px; min-width: 200px; max-height: 320px; overflow-y: auto; margin-top: 6px;">
                        <li style="padding: 4px 12px 8px; border-bottom: 1px solid #313244; margin-bottom: 4px;">
                            <span style="font-size: 0.7em; text-transform: uppercase; letter-spacing: 0.08em; color: #6c7086; font-weight: 600;">
                                Profils destinataires
                            </span>
                        </li>
                        @foreach($recipientProfiles as $profileKey)
                            <li>
                                <a href="{{ request()->fullUrlWithQuery(['preview_recipient' => $profileKey]) }}"
                                   style="display: flex; align-items: center; justify-content: space-between; padding: 7px 12px; border-radius: 6px; font-size: 0.85em; text-decoration: none; transition: background 0.1s ease; {{ $profileKey === $activeRecipientProfile ? 'color: #89b4fa; background: rgba(137,180,250,0.1); font-weight: 600;' : 'color: #cdd6f4;' }}"
                                   onmouseover="this.style.background='{{ $profileKey === $activeRecipientProfile ? 'rgba(137,180,250,0.15)' : '#313244' }}'"
                                   onmouseout="this.style.background='{{ $profileKey === $activeRecipientProfile ? 'rgba(137,180,250,0.1)' : 'transparent' }}'">
                                    <span>{{ $profileKey }}</span>
                                    @if($profileKey === $activeRecipientProfile)
                                        <i class="fas fa-check" style="font-size: 0.8em;"></i>
                                    @endif
                                </a>
                            </li>
                        @endforeach
                    </ul>
                </div>
            @elseif(isset($activeRecipientProfile) && $activeRecipientProfile)
                <div style="display: flex; align-items: center; gap: 6px; font-size: 0.82em; color: #6c7086;">
                    <i class="fas fa-user" style="font-size: 0.85em;"></i>
                    <span>{{ $activeRecipientProfile }}</span>
                </div>
            @endif

        </div>
    </div>
@endif