@props([
    'interview',
])

<details id="inspector-details" class="relative group select-none">
    <!-- Summary Header Bar -->
    <summary class="list-none [&::-webkit-details-marker]:hidden bg-[#0e1422] border border-[#1b2233] rounded-xl p-3 flex items-center justify-between gap-2 cursor-pointer transition-all hover:border-indigo-500/40">
        <div id="inspector-active-tab-title" class="text-xs font-bold text-slate-300 uppercase tracking-wider flex items-center gap-2">
            <i id="inspector-active-tab-icon" class="fa-solid fa-layer-group text-indigo-400"></i>
            <span id="inspector-active-tab-text">Inspector Panel</span>
        </div>

        <div class="flex items-center gap-2">
            <!-- Button Toolbar -->
            <div class="inline-flex items-center gap-1 p-0.5 bg-[#090d16] border border-[#1b2233] rounded-lg">
                <button
                    type="button"
                    id="tab-btn-logs"
                    title="Proctoring Logs"
                    onclick="switchIdeTab('logs', event)"
                    class="w-7 h-7 flex items-center justify-center rounded-md text-xs font-semibold transition-all cursor-pointer text-slate-400 hover:text-white hover:bg-white/5"
                >
                    <i class="fa-solid fa-shield-halved"></i>
                </button>
                <button
                    type="button"
                    id="tab-btn-notes"
                    title="Candidate Notepad"
                    onclick="switchIdeTab('notes', event)"
                    class="w-7 h-7 flex items-center justify-center rounded-md text-xs font-semibold transition-all cursor-pointer text-slate-400 hover:text-white hover:bg-white/5"
                >
                    <i class="fa-solid fa-note-sticky"></i>
                </button>
                <button
                    type="button"
                    id="tab-btn-drawing"
                    title="Candidate Drawing Board"
                    onclick="switchIdeTab('drawing', event)"
                    class="w-7 h-7 flex items-center justify-center rounded-md text-xs font-semibold transition-all cursor-pointer text-slate-400 hover:text-white hover:bg-white/5"
                >
                    <i class="fa-solid fa-pen"></i>
                </button>
                <button
                    type="button"
                    id="tab-btn-recordings"
                    title="Saved Video Recordings"
                    onclick="switchIdeTab('recordings', event)"
                    class="w-7 h-7 flex items-center justify-center rounded-md text-xs font-semibold transition-all cursor-pointer text-slate-400 hover:text-white hover:bg-white/5"
                >
                    <i class="fa-solid fa-film"></i>
                </button>
                <button
                    type="button"
                    id="tab-btn-screenshots"
                    title="Tab Switch Screenshots"
                    onclick="switchIdeTab('screenshots', event)"
                    class="w-7 h-7 flex items-center justify-center rounded-md text-xs font-semibold transition-all cursor-pointer text-slate-400 hover:text-white hover:bg-white/5"
                >
                    <i class="fa-solid fa-image"></i>
                </button>
            </div>
        </div>
    </summary>

    <!-- Floating Inspector Content Overlay -->
    <div id="inspector-content-container" class="absolute top-[calc(100%+8px)] right-0 left-0 lg:left-auto lg:w-112.5 bg-[#0e1422] border border-[#1b2233] rounded-xl p-3 shadow-2xl shadow-black/80 backdrop-blur-md z-50 flex flex-col max-h-125 overflow-hidden">
        <!-- Floating Header -->
        <div class="flex items-center justify-between mb-2">
            <div id="inspector-floating-title" class="text-xs font-bold text-slate-200 uppercase tracking-wider flex items-center gap-2">
                <i id="inspector-floating-icon" class="fa-solid fa-shield-halved text-indigo-400"></i>
                <span id="inspector-floating-text">Proctoring Logs</span>
            </div>
            <button
                type="button"
                id="inspector-close-btn"
                title="Close Inspector"
                onclick="closeInspectorPanel()"
                class="w-6 h-6 rounded-md bg-white/5 hover:bg-white/15 text-slate-400 hover:text-white flex items-center justify-center cursor-pointer text-xs transition-colors"
            >
                <i class="fa-solid fa-xmark"></i>
            </button>
        </div>

        <!-- Floating Tab Content Panes -->
        <div class="flex-1 overflow-y-auto">
            <div id="tab-content-logs" class="hidden">
                <x-audit-log id="modal-logs-display" :logs="$interview->proctor_logs ?? []" class="h-75 overflow-y-auto" />
            </div>
            <x-interview.tabs.notes-tab />
            <x-interview.tabs.drawing-tab />
            <x-interview.tabs.recordings-tab />
            <x-interview.tabs.screenshots-tab />
        </div>
    </div>
</details>