@props([
    'interview',
])

<div class="bg-slate-900/80 border border-slate-700/60 rounded-xl mb-4 overflow-hidden backdrop-blur-md">
    <div class="flex items-center justify-between p-5 gap-4 flex-wrap">
        <div class="flex items-center gap-3.5">
            <div class="w-[42px] h-[42px] rounded-full bg-gradient-to-br from-indigo-500 to-sky-600 flex items-center justify-center text-white font-semibold text-[15px] shrink-0 shadow-md shadow-indigo-500/20">
                {{ $interview->candidate_initials }}
            </div>
            <div>
                <div class="flex items-center gap-2 mb-0.5">
                    <h2 id="modal-cand-name" class="text-[15px] font-semibold text-white m-0 leading-none">{{ $interview->candidate_name }}</h2>
                    <span id="candidate-joined-pill" class="pill gray inline-flex items-center gap-1.5 font-semibold text-[11px] px-2.5 py-0.5 rounded-full border border-slate-700 text-slate-400 bg-slate-800/60">
                        <i class="fa-solid fa-circle text-[8px] text-slate-500"></i> Not Joined
                    </span>
                </div>
                <div class="text-xs text-slate-400 font-mono">{{ $interview->candidate_email }} &middot; {{ $interview->candidate_phone }}</div>
            </div>
        </div>

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

            <div class="w-px h-[18px] bg-slate-700/60 mx-1"></div>

            <div class="flex items-center gap-2 text-xs text-slate-400 cursor-pointer select-none" onclick="toggleSosAutoTrigger()">
                <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-[2px] after:left-[2px] after:h-2.5 after:w-2.5 after:rounded-full after:bg-slate-500 after:transition-all duration-150 [&.on]:after:left-[17px] [&.on]:after:bg-indigo-400" id="sosToggle"></span>
                <span>SOS auto-trigger</span>
            </div>

            <div class="w-px h-[18px] bg-slate-700/60 mx-1"></div>

            <x-button onclick="regenerateCandidatePassword()" variant="secondary" icon="fa-solid fa-key">Password</x-button>
            <x-button onclick="openReportPage()" variant="secondary" icon="fa-solid fa-file-pdf">PDF report</x-button>
            <x-button onclick="blockCandidateAction()" variant="secondary" icon="fa-solid fa-ban">Block</x-button>
        </div>
    </div>

    <!-- Submission Details Disclosure Accordion -->
    <details class="group border-t border-slate-700/60">
        <summary class="flex items-center gap-2 px-5 py-2.5 text-xs text-slate-400 font-medium hover:text-slate-200 transition-colors cursor-pointer list-none select-none">
            <i class="fa-solid fa-chevron-down text-[10px] transition-transform duration-150 group-open:rotate-180"></i>
            <span>Show submission details</span>
        </summary>
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-2.5 px-5 pb-4">
            <div class="bg-slate-950/60 border border-slate-800 rounded-lg p-2.5">
                <div class="text-[10.5px] text-slate-500 uppercase tracking-wider mb-1 font-semibold">Submission ID</div>
                <div id="modal-cand-uid" class="text-xs 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.5">
                <div class="text-[10.5px] text-slate-500 uppercase tracking-wider mb-1 font-semibold">Temp Pass</div>
                <div class="text-xs font-mono text-emerald-400 font-semibold">{{ $interview->temp_password }}</div>
            </div>
            <div class="bg-slate-950/60 border border-slate-800 rounded-lg p-2.5">
                <div class="text-[10.5px] text-slate-500 uppercase tracking-wider mb-1 font-semibold">Language</div>
                <div class="text-xs font-mono text-slate-300 uppercase">{{ $interview->language }}</div>
            </div>
            <div class="bg-slate-950/60 border border-slate-800 rounded-lg p-2.5">
                <div class="text-[10.5px] text-slate-500 uppercase tracking-wider mb-1 font-semibold">Timeline</div>
                <div class="text-xs font-mono text-slate-300">{{ $interview->formatted_timeline }}</div>
            </div>
        </div>
    </details>
</div>