@props([
    'interview',
])

<header class="h-[60px] bg-slate-900 border-b border-white/10 flex items-center justify-between px-5 z-20 shrink-0">
    <div class="flex items-center gap-3">
        <div class="font-outfit font-bold text-base text-white flex items-center gap-2">
            <i class="fa-solid fa-laptop-code text-indigo-400"></i>
            <span>Candidate Assessment Room</span>
        </div>
        <code class="bg-white/10 px-2.5 py-1 rounded-md text-sky-400 text-xs font-mono">
            ID: {{ $interview->submission_unique_id }}
        </code>
    </div>

    <div class="flex items-center gap-2.5">
        <x-button type="button" onclick="toggleNotepadModal()" variant="secondary" size="sm" icon="fa-solid fa-note-sticky" class="bg-indigo-500/20 text-indigo-300 border-none hover:bg-indigo-500/30">
            Notepad
        </x-button>

        <x-button type="button" onclick="toggleDrawingModal()" variant="secondary" size="sm" icon="fa-solid fa-pen-ruler" class="bg-cyan-500/20 text-cyan-300 border-none hover:bg-cyan-500/30">
            Drawing Board
        </x-button>

        <div class="flex items-center gap-1.5">
            <label class="text-xs text-slate-400 font-medium">Language:</label>
            <select id="language-select" class="px-2.5 py-1.5 rounded-lg text-xs font-semibold bg-slate-800 border border-white/10 text-white outline-none focus:border-indigo-500 transition-all cursor-pointer">
                <option value="python" {{ strtolower($interview->language) === 'python' ? 'selected' : '' }}>Python 3</option>
                <option value="cpp" {{ strtolower($interview->language) === 'cpp' ? 'selected' : '' }}>C++ (GCC)</option>
                <option value="c" {{ strtolower($interview->language) === 'c' ? 'selected' : '' }}>C (GCC)</option>
                <option value="java" {{ strtolower($interview->language) === 'java' ? 'selected' : '' }}>Java 15</option>
                <option value="php" {{ strtolower($interview->language) === 'php' ? 'selected' : '' }}>PHP 8.2 / Laravel</option>
                <option value="javascript" {{ strtolower($interview->language) === 'javascript' ? 'selected' : '' }}>JavaScript (Node.js)</option>
            </select>
        </div>

        <x-button type="button" onclick="runCode()" variant="primary" size="sm" icon="fa-solid fa-play" class="border-none shadow-md shadow-indigo-600/30">
            Run Code
        </x-button>

        <x-button type="button" onclick="submitSolution()" variant="success" size="sm" icon="fa-solid fa-check" class="border-none shadow-md shadow-emerald-600/30">
            Submit Solution
        </x-button>

        <x-button type="button" onclick="candidateLogoutAction()" variant="danger" size="sm" icon="fa-solid fa-right-from-bracket" class="bg-red-500/20 border-none text-red-300 hover:bg-red-500/30">
            Logout
        </x-button>
    </div>
</header>