@props([
    'interview',
])

<!-- Top Bar with Download PDF Button -->
<div class="flex justify-between items-center mb-5 pb-3 border-b border-slate-200 print:hidden">
    <div class="text-sm font-bold text-slate-900 flex items-center gap-2">
        <i class="fa-solid fa-file-lines text-indigo-600"></i>
        <span>Executive Assessment Performance Report</span>
    </div>
    <button type="button" onclick="window.print()" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold text-xs py-2.5 px-4 rounded-xl cursor-pointer flex items-center gap-2 shadow-md shadow-indigo-600/30 transition-all">
        <i class="fa-solid fa-download"></i>
        <span>Download PDF Report</span>
    </button>
</div>

<!-- Header -->
<div class="flex justify-between items-start border-b-2 border-indigo-600 pb-5 mb-6">
    <div>
        <div class="font-outfit text-2xl font-extrabold text-slate-900 flex items-center gap-2">
            <i class="fa-solid fa-bolt text-indigo-600"></i> SingleLogin Enterprise Assessment
        </div>
        <div class="text-xs text-slate-500 mt-1">
            Candidate Technical Competency & Behavioral Audit Report
        </div>
    </div>

    <div class="text-right">
        <span class="inline-block bg-indigo-500/10 text-indigo-600 text-[11px] font-bold px-3 py-1 rounded-full uppercase">
            Executive Summary
        </span>
        <div class="text-xs text-slate-500 mt-1.5 font-mono">
            Report ID: RPT-{{ $interview->submission_unique_id }}
        </div>
        <div class="text-xs text-slate-500">
            Date: {{ now()->format('M d, Y - H:i:s T') }}
        </div>
    </div>
</div>