@props([
    'interview',
])

<div class="flex items-center gap-3 min-w-0 flex-wrap sm:flex-nowrap">
    <x-hamburger-menu align="left">
        <div class="pb-3">
            <div class="text-[11px] font-bold text-slate-400 uppercase tracking-wider mb-2 flex items-center gap-1.5">
                <i class="fa-solid fa-circle-info text-indigo-400"></i> Session Details
            </div>
            <div class="grid grid-cols-2 gap-2">
                <div class="bg-slate-950/60 border border-slate-800 rounded-lg p-2">
                    <div class="text-[10px] text-slate-500 uppercase tracking-wider font-semibold">Submission ID</div>
                    <div id="modal-cand-uid" class="text-[11px] font-mono text-slate-300 break-all">{{ $interview->submission_unique_id }}</div>
                </div>
                <div class="bg-slate-950/60 border border-slate-800 rounded-lg p-2">
                    <div class="text-[10px] text-slate-500 uppercase tracking-wider font-semibold">Temp Pass</div>
                    <div class="text-[11px] font-mono text-emerald-400 font-bold">{{ $interview->temp_password }}</div>
                </div>
                <div class="bg-slate-950/60 border border-slate-800 rounded-lg p-2">
                    <div class="text-[10px] text-slate-500 uppercase tracking-wider font-semibold">Language</div>
                    <div class="text-[11px] font-mono text-slate-300 uppercase font-bold">{{ $interview->language }}</div>
                </div>
                <div class="bg-slate-950/60 border border-slate-800 rounded-lg p-2">
                    <div class="text-[10px] text-slate-500 uppercase tracking-wider font-semibold">Timeline</div>
                    <div class="text-[11px] font-mono text-slate-300">{{ $interview->formatted_timeline }}</div>
                </div>
            </div>
        </div>

        <div class="pt-3 flex flex-col gap-2.5">
            <div class="flex items-center justify-between px-1 text-xs text-slate-300 cursor-pointer select-none" onclick="toggleSosAutoTrigger()">
                <span class="flex items-center gap-2 font-medium">
                    <i class="fa-solid fa-shield-halved text-indigo-400"></i>
                    <span>SOS auto-trigger alert</span>
                </span>
                <span class="toggle relative inline-flex h-4 w-8 shrink-0 cursor-pointer rounded-full border border-slate-700 bg-slate-900 transition-colors duration-200 ease-in-out [&.on]:bg-indigo-500/20 [&.on]:border-indigo-500/50 after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:h-2.5 after:w-2.5 after:rounded-full after:bg-slate-500 after:transition-all [&.on]:after:left-4.25 [&.on]:after:bg-indigo-400" id="sosToggle"></span>
            </div>

            <div class="grid grid-cols-3 gap-1.5 pt-1">
                <x-button onclick="regenerateCandidatePassword()" variant="secondary" size="sm" icon="fa-solid fa-key" class="w-full justify-center text-[11px]">Password</x-button>
                <x-button onclick="openReportPage()" variant="secondary" size="sm" icon="fa-solid fa-file-pdf" class="w-full justify-center text-[11px]">PDF Report</x-button>
                <x-button onclick="blockCandidateAction()" variant="danger" size="sm" icon="fa-solid fa-ban" class="w-full justify-center bg-red-500/20 text-red-300 border-red-500/40 text-[11px]">Block</x-button>
            </div>
        </div>
    </x-hamburger-menu>

    <!-- Candidate Avatar Circle -->
    <div class="w-8 h-8 rounded-full bg-linear-to-br from-indigo-500 to-sky-600 flex items-center justify-center text-white font-bold text-xs shrink-0 shadow-md shadow-indigo-500/20">
        {{ $interview->candidate_initials }}
    </div>

    <!-- Candidate Name & Email -->
    <div class="min-w-0">
        <h2 id="modal-cand-name" class="text-sm font-semibold text-white m-0 leading-tight truncate">
            {{ $interview->candidate_name }}
        </h2>
        <div class="text-[11px] text-slate-400 font-mono truncate">
            {{ $interview->candidate_email }} &middot; {{ $interview->candidate_phone }}
        </div>
    </div>

    <!-- Status Pills (Connected Status & Timeline Status) -->
    <div class="flex items-center gap-1.5 shrink-0 ml-1">
        <span id="candidate-joined-pill" class="pill gray inline-flex items-center gap-1.5 font-semibold text-[10.5px] px-2 py-0.5 rounded-full border border-slate-700 text-slate-400 bg-slate-800/60">
            <i class="fa-solid fa-circle text-[7px] text-slate-500"></i> Not Joined
        </span>

        @if($interview->isExpired())
            <x-pill id="timeline-status-pill" variant="danger" size="sm" icon="fa-solid fa-circle">Expired</x-pill>
        @elseif($interview->status === 'completed')
            <x-pill id="timeline-status-pill" variant="success" size="sm" icon="fa-solid fa-circle">Completed</x-pill>
        @elseif($interview->call_status === 'active')
            <x-pill id="timeline-status-pill" variant="info" size="sm" class="animate-pulse" icon="fa-solid fa-circle">Call in progress</x-pill>
        @elseif($interview->isActiveTimeline())
            <x-pill id="timeline-status-pill" variant="info" size="sm" icon="fa-solid fa-bolt">Timeline live</x-pill>
        @else
            <x-pill id="timeline-status-pill" variant="warning" size="sm" icon="fa-solid fa-clock">Scheduled</x-pill>
        @endif
    </div>
</div>