@props([
    'interview',
])

<div class="flex items-center gap-2">
    <!-- 1. Mic Toggle (Icon Only) -->
    <x-button id="btn-toggle-interviewer-mic" onclick="toggleInterviewerMic()" variant="ghost" icon="fa-solid fa-microphone" class="hidden" title="Mic On / Mute"></x-button>

    <!-- 2. Cam Toggle (Icon Only) -->
    <x-button id="btn-toggle-interviewer-cam" onclick="toggleInterviewerCam()" variant="ghost" icon="fa-solid fa-video" class="hidden" title="Cam On / Off"></x-button>

    <!-- 3. Start / Join / Restart Call -->
    @if($interview->call_status === 'ended')
        <x-button id="btn-start-call" disabled variant="primary" icon="fa-solid fa-phone-slash" class="opacity-50 cursor-not-allowed pointer-events-none">
            Call Ended
        </x-button>
    @elseif($interview->call_status === 'active')
        <x-button id="btn-start-call" onclick="startInterviewerCall()" variant="primary" icon="fa-solid fa-phone">
            Join Call
        </x-button>
    @else
        <x-button id="btn-start-call" onclick="startInterviewerCall()" variant="primary" icon="fa-solid fa-phone">
            Start Call
        </x-button>
    @endif

    <!-- 4. Record Call (Silent) -->
    <x-button id="btn-start-recording" onclick="startCallRecording()" variant="secondary" icon="fa-solid fa-circle-dot" class="hidden">
        Record Call (Silent)
    </x-button>
    <x-button id="btn-stop-recording" onclick="stopCallRecording()" variant="danger" class="hidden animate-pulse" title="Stop &amp; Save Recording">
        <i class="fa-solid fa-square text-xs mr-1.5"></i>
        <span>Recording <span id="rec-live-timer" class="font-mono text-xs font-bold">(00:00)</span> - Stop</span>
    </x-button>

    <!-- 5. Leave Call -->
    <x-button id="btn-leave-call" onclick="leaveInterviewerCall()" variant="secondary" icon="fa-solid fa-arrow-right-from-bracket" class="hidden">
        Leave Call
    </x-button>

    <!-- 6. End Call for All (Icon Only, Far Right) -->
    <x-button id="btn-end-all-call" onclick="endCallForAll()" variant="danger" icon="fa-solid fa-phone-slash" class="hidden" title="End Call for All"></x-button>
</div>