@props([
    'notes' => '',
])

<div id="notepad-modal" class="fixed top-[70px] right-[360px] w-[420px] h-[350px] bg-slate-900 border-2 border-indigo-500 rounded-2xl shadow-2xl hidden flex-col z-50 overflow-hidden">
    <div class="bg-slate-800 px-4 py-2.5 flex justify-between items-center border-b border-white/10">
        <div class="font-bold text-xs text-white flex items-center gap-2">
            <i class="fa-solid fa-note-sticky text-indigo-400"></i>
            <span>Candidate Notepad (Synced)</span>
        </div>
        <button type="button" onclick="toggleNotepadModal()" class="w-6 h-6 rounded-md bg-slate-700/60 hover:bg-slate-700 text-slate-300 hover:text-white flex items-center justify-center cursor-pointer text-xs transition-colors border-none">
            <i class="fa-solid fa-xmark"></i>
        </button>
    </div>
    <textarea id="notepad-textarea" oninput="saveNotepadContent()" placeholder="Type rough notes, pseudo-code, or thoughts here..." class="flex-1 w-full p-3.5 bg-slate-950 text-slate-200 border-none outline-none font-mono text-xs resize-none placeholder-slate-600 leading-relaxed">{{ $notes }}</textarea>
    <div class="px-3 py-1.5 bg-slate-900 text-[10.5px] text-emerald-400 text-right border-t border-white/5 font-medium flex items-center justify-end gap-1.5">
        <i class="fa-solid fa-circle-check text-[10px]"></i>
        <span>Auto-saved to interviewer portal</span>
    </div>
</div>