{% if reports %}
<div class="bg-white/[0.02] rounded-lg border border-white/[0.06] overflow-hidden">
    <table class="w-full border-collapse text-xs">
        <thead>
            <tr class="border-b border-white/[0.06] text-white/40 text-[11px] uppercase tracking-wider">
                <th class="px-4 py-2.5 text-left">Key</th>
                <th class="px-3 py-2.5 text-center">Grade</th>
                <th class="px-3 py-2.5 text-right">Drift</th>
                <th class="px-3 py-2.5 text-right">Contradiction</th>
                <th class="px-3 py-2.5 text-right">Staleness</th>
                <th class="px-3 py-2.5 text-right">Volatility</th>
            </tr>
        </thead>
        <tbody>
            {% for r in reports %}
            <tr class="border-b border-white/[0.04] hover:bg-white/[0.03] cursor-pointer"
                onclick="window.location='/drift/{{ r.key }}'">
                <td class="px-4 py-2.5 font-mono text-slate-300 max-w-xs truncate">{{ r.key }}</td>
                <td class="px-3 py-2.5 text-center">
                    <span class="px-2 py-0.5 rounded font-semibold text-[11px]
                        {% if r.grade == 'A' %}bg-green-500/15 text-green-400
                        {% elif r.grade == 'B' %}bg-blue-500/15 text-blue-400
                        {% elif r.grade == 'C' %}bg-amber-500/15 text-amber-400
                        {% elif r.grade == 'D' %}bg-orange-500/15 text-orange-400
                        {% else %}bg-red-500/15 text-red-400{% endif %}">
                        {{ r.grade }}
                    </span>
                </td>
                <td class="px-3 py-2.5 text-right font-mono">{{ "%.2f"|format(r.drift_score) }}</td>
                <td class="px-3 py-2.5 text-right font-mono">{{ "%.2f"|format(r.contradiction_score) }}</td>
                <td class="px-3 py-2.5 text-right font-mono">{{ "%.2f"|format(r.staleness_score) }}</td>
                <td class="px-3 py-2.5 text-right font-mono">{{ "%.2f"|format(r.volatility_score) }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% else %}
<div class="py-12 text-center text-white/30 text-sm">
    No drift reports found.
    <a href="#" class="text-indigo-400 hover:text-indigo-300 block mt-2 text-xs">
        Run: memorylens drift analyze
    </a>
</div>
{% endif %}