<?php $this->extend('layout/app'); ?>
<?php $this->section('content'); ?>

<?php
$score = isset($call['score_pct']) ? (float)$call['score_pct'] : null;
$threshold = isset($call['pass_threshold_pct']) ? (int)$call['pass_threshold_pct'] : (isset($binding['pass_threshold_pct']) ? (int)$binding['pass_threshold_pct'] : 70);
$passed = ($score !== null && $threshold > 0) ? $score >= $threshold : null;
$duration = (int)($call['duration_seconds'] ?? 0);
$durStr = $duration > 0 ? (int)($duration / 60) . 'm ' . ($duration % 60) . 's' : '—';
$dir = strtolower((string)($call['direction'] ?? ''));
$dirBadge = $dir === 'outbound' ? 'bg-sky-100 text-sky-700' : ($dir === 'inbound' ? 'bg-violet-100 text-violet-700' : 'bg-slate-100 text-slate-600');
$dirLabel = $dir !== '' ? ucfirst($dir) : '—';
$assistantName = $binding['name'] ?? ($binding['vapi_name'] ?? 'Unknown Assistant');

$scoreGradient = $passed === true
    ? 'from-emerald-500 via-emerald-500 to-teal-500'
    : ($passed === false ? 'from-rose-500 via-rose-500 to-pink-500' : 'from-slate-500 via-slate-500 to-slate-600');
$scoreRing = $passed === true
    ? 'ring-emerald-200'
    : ($passed === false ? 'ring-rose-200' : 'ring-slate-200');
$scoreBadgeClass = $passed === true ? 'bg-emerald-100 text-emerald-700' : ($passed === false ? 'bg-rose-100 text-rose-700' : 'bg-slate-100 text-slate-700');
$scoreBadgeText = $passed === true ? 'PASSED' : ($passed === false ? 'FAILED' : 'UNSCORED');
?>

<div class="space-y-6">
    <div class="flex flex-wrap items-start justify-between gap-4">
        <a href="<?= site_url('/admin/vapi/score-history' . (!empty($call['binding_id']) ? '/binding/' . (int)$call['binding_id'] : '')) ?>" class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl text-sm font-semibold bg-slate-100 hover:bg-slate-200 text-slate-700 border border-slate-200 transition">← Back to call history</a>
    </div>

    <div class="glass rounded-2xl border border-slate-200/60 overflow-hidden">
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-0">
            <div class="bg-gradient-to-br <?= $scoreGradient ?> p-6 lg:p-8 text-white flex flex-col items-center justify-center">
                <div class="w-28 h-28 lg:w-36 lg:h-36 rounded-full bg-white/15 backdrop-blur-sm ring-4 ring-white/30 flex items-center justify-center mb-3 shadow-2xl">
                    <div class="text-center">
                        <?php if ($score === null): ?>
                            <span class="block text-3xl lg:text-4xl font-black">—</span>
                            <span class="block text-[10px] lg:text-xs font-semibold text-white/70 uppercase tracking-wider">pending</span>
                        <?php else: ?>
                            <span class="block text-4xl lg:text-5xl font-black"><?= number_format($score, 0) ?></span>
                            <span class="block text-[10px] lg:text-xs font-semibold text-white/80 uppercase tracking-wider">/ 100 pts</span>
                        <?php endif; ?>
                    </div>
                </div>
                <span class="inline-flex items-center gap-1.5 px-3.5 py-1.5 rounded-full text-[11px] font-bold bg-white/20 backdrop-blur-sm ring-1 ring-white/30 mb-2"><?= $scoreBadgeText ?></span>
                <span class="text-xs lg:text-[13px] text-white/85 font-medium">Threshold: <?= (int)$threshold ?>% · Pass <?= $threshold ?>+</span>
            </div>

            <div class="lg:col-span-2 p-6 lg:p-8 space-y-4">
                <div class="flex flex-wrap items-start justify-between gap-3">
                    <div>
                        <p class="text-xs text-slate-500">Vapi Call Review</p>
                        <h3 class="text-xl font-bold text-slate-900 mt-0.5">
                            <?= esc($assistantName) ?>
                            <span class="inline-flex items-center ml-2 px-2.5 py-1 rounded-full text-[10px] font-semibold <?= $dirBadge ?>"><?= $dirLabel ?></span>
                        </h3>
                        <p class="text-sm text-slate-600 mt-1">
                            <span class="font-semibold text-slate-700"><?= !empty($call['started_at']) ? date('M j, Y g:i A', strtotime($call['started_at'])) : '—' ?></span>
                            · Duration: <span class="font-semibold"><?= $durStr ?></span>
                            · Phone: <span class="font-mono text-slate-800"><?= esc($call['phone_number'] ?? '—') ?></span>
                        </p>
                    </div>
                    <?php if (!empty($call['recording_url'])): ?>
                        <a href="<?= esc($call['recording_url']) ?>" target="_blank" class="inline-flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-semibold bg-slate-900 text-white hover:bg-slate-800 transition">
                            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" /><path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                            Recording
                        </a>
                    <?php endif; ?>
                </div>

                <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
                    <div class="px-3.5 py-2.5 rounded-xl bg-slate-50 border border-slate-200/60">
                        <p class="text-[10px] font-semibold text-slate-500 uppercase tracking-wider">Vapi Call ID</p>
                        <p class="text-[12px] font-mono text-slate-800 mt-0.5 truncate" title="<?= esc($call['vapi_call_id'] ?? '') ?>"><?= esc($call['vapi_call_id'] ?? '—') ?></p>
                    </div>
                    <div class="px-3.5 py-2.5 rounded-xl bg-slate-50 border border-slate-200/60">
                        <p class="text-[10px] font-semibold text-slate-500 uppercase tracking-wider">Binding ID</p>
                        <p class="text-[12px] font-semibold text-slate-800 mt-0.5">#<?= (int)($call['binding_id'] ?? 0) ?></p>
                    </div>
                    <div class="px-3.5 py-2.5 rounded-xl bg-slate-50 border border-slate-200/60">
                        <p class="text-[10px] font-semibold text-slate-500 uppercase tracking-wider">Agent</p>
                        <p class="text-[12px] font-semibold text-slate-800 mt-0.5">
                            <?php
                            $db = \Config\Database::connect();
                            if (!empty($call['agent_id'])) {
                                $agent = $db->table('users')->select('name, username')->where('id', (int)$call['agent_id'])->get()->getRowArray();
                                if ($agent) { echo esc($agent['name'] ?? $agent['username'] ?? 'Agent'); } else { echo '—'; }
                            } else { echo '—'; }
                            ?>
                        </p>
                    </div>
                    <div class="px-3.5 py-2.5 rounded-xl bg-slate-50 border border-slate-200/60">
                        <p class="text-[10px] font-semibold text-slate-500 uppercase tracking-wider">Ended</p>
                        <p class="text-[12px] font-semibold text-slate-800 mt-0.5"><?= !empty($call['ended_at']) ? date('g:i A', strtotime($call['ended_at'])) : '—' ?></p>
                    </div>
                </div>

                <?php if (!empty($binding['url'])): ?>
                    <div class="px-3.5 py-2.5 rounded-xl bg-indigo-50/60 border border-indigo-200/60">
                        <p class="text-[10px] font-semibold text-indigo-700 uppercase tracking-wider">Assistant URL</p>
                        <a href="<?= esc($binding['url']) ?>" target="_blank" class="text-[12px] font-medium text-indigo-700 mt-0.5 break-all underline hover:text-indigo-800"><?= esc($binding['url']) ?></a>
                    </div>
                <?php endif; ?>
            </div>
        </div>
    </div>

    <?php if (!empty($call['ai_feedback'])): ?>
        <div class="glass rounded-2xl border border-violet-200/60 bg-gradient-to-br from-violet-50/70 to-fuchsia-50/50 p-5 lg:p-6">
            <div class="flex items-start gap-3">
                <div class="w-9 h-9 rounded-xl bg-gradient-to-br from-violet-500 to-fuchsia-500 text-white flex items-center justify-center shadow-md shadow-violet-500/20 flex-shrink-0">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-[18px] h-[18px]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" /></svg>
                </div>
                <div class="flex-1 min-w-0">
                    <p class="text-xs font-semibold text-violet-700 uppercase tracking-wide mb-2">AI Coach Feedback</p>
                    <div class="text-sm text-slate-700 whitespace-pre-line leading-relaxed"><?= nl2br(esc($call['ai_feedback'])) ?></div>
                </div>
            </div>
        </div>
    <?php endif; ?>

    <div class="glass rounded-2xl border border-slate-200/60 p-5 lg:p-6">
        <div class="flex items-start gap-3 mb-4">
            <div class="w-9 h-9 rounded-xl bg-gradient-to-br from-amber-500 to-orange-500 text-white flex items-center justify-center shadow-md shadow-amber-500/20 flex-shrink-0">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-[18px] h-[18px]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z" /><path stroke-linecap="round" stroke-linejoin="round" d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z" /></svg>
            </div>
            <div class="flex-1">
                <h4 class="text-base font-semibold text-slate-800">100-Point Scorecard Breakdown</h4>
                <p class="text-[11px] text-slate-500 mt-0.5">How the call scored across each category, with AI rationales.</p>
            </div>
        </div>

        <div class="overflow-x-auto rounded-xl border border-slate-200/80">
            <table class="w-full">
                <thead>
                    <tr class="bg-slate-50/80 border-b border-slate-200/80">
                        <th class="px-4 py-2.5 text-left text-[11px] font-semibold text-slate-500 uppercase tracking-wider w-8">#</th>
                        <th class="px-4 py-2.5 text-left text-[11px] font-semibold text-slate-500 uppercase tracking-wider">Category</th>
                        <th class="px-4 py-2.5 text-center text-[11px] font-semibold text-slate-500 uppercase tracking-wider w-28">Points</th>
                        <th class="px-4 py-2.5 text-left text-[11px] font-semibold text-slate-500 uppercase tracking-wider">Rationale</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    <?php
                    $expectedCats = [
                        ['Research relevance', 15],
                        ['Identity and opener', 10],
                        ['Observation accuracy', 15],
                        ['Homeowner-to-business bridge', 10],
                        ['Diagnostic question', 10],
                        ['Listening and control', 10],
                        ['Positioning', 10],
                        ['Objection handling', 10],
                        ['Booking', 10],
                        ['Compliance and CRM', 5],
                    ];
                    $byCat = [];
                    $awardedTotal = 0;
                    $maxTotal = 0;
                    if (!empty($breakdown)) {
                        foreach ($breakdown as $bd) {
                            if (!is_array($bd)) continue;
                            $name = trim((string)($bd['category'] ?? ''));
                            $aw = (float)($bd['points_awarded'] ?? 0);
                            $mx = (float)($bd['points_max'] ?? 0);
                            $rat = (string)($bd['rationale'] ?? '');
                            if ($name === '') continue;
                            $byCat[$name] = ['awarded' => $aw, 'max' => $mx, 'rationale' => $rat];
                            $awardedTotal += $aw;
                            $maxTotal += $mx;
                        }
                    }
                    foreach ($expectedCats as $idx => [$catName, $catMax]):
                        $found = $byCat[$catName] ?? null;
                        $has = $found !== null;
                        $awPts = $has ? (float)$found['awarded'] : null;
                        $mxPts = $has ? (float)$found['max'] : (float)$catMax;
                        if (!$has) { $maxTotal += $mxPts; }
                        $rat = $has ? (string)$found['rationale'] : 'No score recorded for this category.';
                        $pct = $mxPts > 0 ? ($awPts !== null ? ($awPts / $mxPts) : 0) : 0;
                        $barColor = $pct >= 0.8 ? 'bg-emerald-500' : ($pct >= 0.6 ? 'bg-amber-500' : ($awPts !== null ? 'bg-rose-500' : 'bg-slate-300'));
                        $barWidth = $awPts !== null ? max(0, min(100, (int)round(($awPts / $mxPts) * 100))) : 0;
                    ?>
                        <tr class="hover:bg-slate-50/60 transition align-top">
                            <td class="px-4 py-3 text-[11px] text-slate-500 font-semibold align-top"><?= $idx + 1 ?></td>
                            <td class="px-4 py-3 align-top">
                                <div class="flex flex-col gap-2">
                                    <div class="flex flex-col gap-1.5">
                                        <span class="text-sm font-semibold text-slate-800"><?= esc($catName) ?></span>
                                        <div class="w-full h-1.5 rounded-full bg-slate-100 overflow-hidden max-w-[220px]">
                                            <div class="h-full <?= $barColor ?> rounded-full transition-all" style="width: <?= $barWidth ?>%"></div>
                                        </div>
                                    </div>
                                    <?php
                                    $quote      = $has ? trim((string)($found['transcript_quote'] ?? '')) : '';
                                    $bestAnswer = $has ? trim((string)($found['best_answer_from_docs'] ?? '')) : '';
                                    ?>
                                    <?php if ($quote !== '' || $bestAnswer !== ''): ?>
                                    <div class="flex flex-col gap-2 mt-2">
                                        <?php if ($quote !== ''): ?>
                                            <details class="group rounded-xl border border-slate-200/80 bg-slate-50/60 overflow-hidden">
                                                <summary class="cursor-pointer list-none px-3 py-2 flex items-center gap-2 hover:bg-slate-100/60 transition">
                                                    <div class="w-6 h-6 rounded-md bg-sky-100 text-sky-700 flex items-center justify-center flex-shrink-0">
                                                        <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" /></svg>
                                                    </div>
                                                    <span class="text-[11px] font-bold uppercase tracking-wider text-slate-600 flex-1">Exact Transcript Evidence</span>
                                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5 text-slate-500 group-open:rotate-180 transition" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" /></svg>
                                                </summary>
                                                <div class="px-3 pb-3 pt-1 border-t border-slate-200/80 bg-white/60">
                                                    <blockquote class="text-[12px] font-mono leading-relaxed text-slate-700 whitespace-pre-wrap border-l-2 border-sky-400 pl-3 italic"><?= esc($quote) ?></blockquote>
                                                </div>
                                            </details>
                                        <?php endif; ?>
                                        <?php if ($bestAnswer !== ''): ?>
                                            <details class="group rounded-xl border border-emerald-200/70 bg-gradient-to-br from-emerald-50/80 to-teal-50/40 overflow-hidden" open>
                                                <summary class="cursor-pointer list-none px-3 py-2 flex items-center gap-2 hover:bg-emerald-50 transition">
                                                    <div class="w-6 h-6 rounded-md bg-emerald-100 text-emerald-700 flex items-center justify-center flex-shrink-0">
                                                        <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                                                    </div>
                                                    <span class="text-[11px] font-bold uppercase tracking-wider text-emerald-700 flex-1">Best Answer · Trained Docs</span>
                                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5 text-emerald-600 group-open:rotate-180 transition" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" /></svg>
                                                </summary>
                                                <div class="px-3 pb-3 pt-1 border-t border-emerald-200/60 bg-white/80">
                                                    <div class="text-[12.5px] text-slate-700 leading-relaxed whitespace-pre-line"><?= nl2br(esc($bestAnswer)) ?></div>
                                                </div>
                                            </details>
                                        <?php endif; ?>
                                    </div>
                                    <?php endif; ?>
                                </div>
                            </td>
                            <td class="px-4 py-3 align-top">
                                <div class="text-center">
                                    <?php if ($awPts === null): ?>
                                        <span class="text-sm font-bold text-slate-400">—</span>
                                    <?php else:
                                        $numColor = $pct >= 0.8 ? 'text-emerald-700' : ($pct >= 0.6 ? 'text-amber-700' : 'text-rose-700');
                                    ?>
                                        <span class="text-lg font-black <?= $numColor ?>"><?= number_format($awPts, $mxPts == (int)$mxPts && $awPts == (int)$awPts ? 0 : 1) ?></span>
                                        <span class="text-sm text-slate-500 font-medium"> / <?= (int)$mxPts ?></span>
                                    <?php endif; ?>
                                </div>
                            </td>
                            <td class="px-4 py-3 align-top">
                                <p class="text-[12px] text-slate-600 leading-relaxed"><?= esc($rat) ?></p>
                            </td>
                        </tr>
                    <?php endforeach; ?>
                    <tr class="bg-slate-50/80 border-t border-slate-200/80">
                        <td class="px-4 py-3"></td>
                        <td class="px-4 py-3 text-sm font-bold text-slate-800 uppercase tracking-wide">Total</td>
                        <td class="px-4 py-3 text-center">
                            <?php if ($score !== null): ?>
                                <span class="text-lg font-black <?= $passed === true ? 'text-emerald-700' : ($passed === false ? 'text-rose-700' : 'text-slate-800') ?>"><?= number_format($score, 0) ?>%</span>
                                <div class="text-[10px] text-slate-500 font-medium">awarded / 100</div>
                            <?php else: ?>
                                <span class="text-sm font-semibold text-slate-500">Not scored yet</span>
                            <?php endif; ?>
                        </td>
                        <td class="px-4 py-3 text-[11px] text-slate-500">
                            <?= $byCat !== [] ? 'Based on ' . count($byCat) . ' scored categories.' : 'Category scores unavailable.' ?>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <div class="glass rounded-2xl border border-slate-200/60 overflow-hidden">
        <div class="flex items-center justify-between px-5 py-4 border-b border-slate-200/80 bg-slate-50/60">
            <div class="flex items-center gap-3">
                <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-sky-500 to-blue-500 text-white flex items-center justify-center shadow-sm flex-shrink-0">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" /></svg>
                </div>
                <div>
                    <h4 class="text-sm font-semibold text-slate-800">Call Transcript</h4>
                    <p class="text-[11px] text-slate-500">Full conversation between AI and customer.</p>
                </div>
            </div>
            <?php if (!empty($call['transcript'])): ?>
                <button type="button" onclick="const t=document.getElementById('transcriptBody'); navigator.clipboard?.writeText(t.textContent || t.innerText); const b=this; const prev=b.textContent; b.textContent='Copied!'; setTimeout(()=>b.textContent=prev,1200);" class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-[11px] font-semibold bg-white border border-slate-200 text-slate-700 hover:bg-slate-100 transition">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg>
                    Copy
                </button>
            <?php endif; ?>
        </div>
        <div id="transcriptBody" class="max-h-[480px] overflow-y-auto scrollbar-thin p-5 lg:p-6 bg-white/60 text-[13px] text-slate-700 leading-relaxed whitespace-pre-wrap font-mono">
<?php if (!empty($call['transcript'])): ?><?= esc($call['transcript']) ?><?php else: ?>
<span class="text-slate-400 italic">No transcript available for this call.</span>
<?php endif; ?>
        </div>
    </div>

    <?php if (!empty($selectedDocNames)): ?>
        <div class="glass rounded-2xl border border-slate-200/60 p-5 lg:p-6">
            <div class="flex items-start gap-3 mb-3">
                <div class="w-9 h-9 rounded-xl bg-gradient-to-br from-teal-500 to-emerald-500 text-white flex items-center justify-center shadow-md shadow-teal-500/20 flex-shrink-0">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-[18px] h-[18px]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>
                </div>
                <div class="flex-1">
                    <h4 class="text-base font-semibold text-slate-800">Basis Documents (Scoring Source of Truth)</h4>
                    <p class="text-[11px] text-slate-500 mt-0.5">AI used these <?= count($selectedDocNames) ?> trained document(s) to score this call.</p>
                </div>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2.5">
                <?php foreach ($selectedDocNames as $dn): ?>
                    <a href="<?= site_url('/admin/documents') ?>" class="group flex items-center gap-3 px-3.5 py-2.5 rounded-xl bg-white border border-slate-200 hover:border-teal-300 hover:bg-teal-50/60 transition">
                        <div class="w-8 h-8 rounded-lg bg-teal-50 text-teal-600 flex items-center justify-center flex-shrink-0 group-hover:bg-teal-100 transition">
                            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" /></svg>
                        </div>
                        <div class="flex-1 min-w-0">
                            <p class="text-sm font-semibold text-slate-800 truncate group-hover:text-teal-700 transition"><?= esc($dn['title']) ?></p>
                            <p class="text-[11px] text-slate-500">Doc #<?= (int)$dn['id'] ?></p>
                        </div>
                    </a>
                <?php endforeach; ?>
            </div>
        </div>
    <?php endif; ?>
</div>

<?php $this->endSection(); ?>
