kushal.saha
1c84a162ac
- overhaul the interviewer panel setup for more compact design - assesment scheduling is now in a drawer - replaced emojies with icon in candidate panel
96 lines
5.0 KiB
PHP
96 lines
5.0 KiB
PHP
@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>
|