{% extends "base.html" %}
{% block title %}Trace #{{ trace.id }} — evalkit{% endblock %}
{% block content %}
<div class="mb-6">
    <p class="text-sm text-gray-400 mb-1">
        <a href="/" class="hover:underline">Projects</a> /
        <a href="/projects/{{ project.id }}" class="hover:underline">{{ project.name }}</a> /
        <a href="/projects/{{ project.id }}/monitor" class="hover:underline">Monitor</a> /
        Trace #{{ trace.id }}
    </p>
    <h1 class="text-2xl font-semibold">Trace #{{ trace.id }}</h1>
</div>

<!-- Overview cards -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
    <div class="bg-white rounded-xl border border-gray-200 p-4">
        <div class="text-xs text-gray-500 mb-1">Timestamp</div>
        <div class="text-sm font-medium">{{ trace.timestamp.strftime('%Y-%m-%d %H:%M:%S') }}</div>
    </div>
    <div class="bg-white rounded-xl border border-gray-200 p-4">
        <div class="text-xs text-gray-500 mb-1">Project</div>
        <div class="text-sm font-medium">{{ project.name }}</div>
    </div>
    <div class="bg-white rounded-xl border border-gray-200 p-4">
        <div class="text-xs text-gray-500 mb-1">Metrics</div>
        <div class="text-sm font-medium">{{ trace.scores | length }}</div>
    </div>
    <div class="bg-white rounded-xl border border-gray-200 p-4">
        <div class="text-xs text-gray-500 mb-1">Avg Score</div>
        {% if trace.scores | length > 0 %}
        {% set avg = (trace.scores | map(attribute='score') | sum / trace.scores | length * 100) | round(0) | int %}
        <div class="text-sm font-bold {% if avg >= 80 %}text-green-600{% elif avg >= 50 %}text-yellow-600{% else %}text-red-600{% endif %}">{{ avg }}%</div>
        {% else %}
        <div class="text-sm text-gray-400">&mdash;</div>
        {% endif %}
    </div>
</div>

<!-- Metadata -->
{% if metadata %}
<div class="mb-6">
    <h2 class="text-sm font-semibold text-gray-600 mb-2">Metadata</h2>
    <div class="flex flex-wrap gap-2">
        {% for k, v in metadata.items() %}
        <span class="inline-block bg-indigo-50 text-indigo-700 text-xs px-3 py-1 rounded-full">{{ k }} = {{ v }}</span>
        {% endfor %}
    </div>
</div>
{% endif %}

<!-- Question & Answer -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
    <div class="bg-white rounded-xl border border-gray-200 p-5">
        <h2 class="text-sm font-semibold text-gray-600 mb-2">Question</h2>
        <p class="text-sm text-gray-800 whitespace-pre-wrap">{{ test_case.get('question', '') }}</p>
    </div>
    <div class="bg-white rounded-xl border border-gray-200 p-5">
        <h2 class="text-sm font-semibold text-gray-600 mb-2">Answer</h2>
        <p class="text-sm text-gray-800 whitespace-pre-wrap">{{ test_case.get('answer', '') }}</p>
    </div>
</div>

<!-- Expected answer -->
{% if test_case.get('expected_answer') %}
<div class="bg-white rounded-xl border border-gray-200 p-5 mb-6">
    <h2 class="text-sm font-semibold text-gray-600 mb-2">Expected Answer</h2>
    <p class="text-sm text-gray-800 whitespace-pre-wrap">{{ test_case.get('expected_answer', '') }}</p>
</div>
{% endif %}

<!-- Context -->
{% if context %}
<div class="bg-white rounded-xl border border-gray-200 p-5 mb-6">
    <h2 class="text-sm font-semibold text-gray-600 mb-2">Context ({{ context | length }} chunks)</h2>
    {% for chunk in context %}
    <div class="{% if not loop.last %}border-b border-gray-100 pb-3 mb-3{% endif %}">
        <span class="text-xs text-gray-400">[{{ loop.index }}]</span>
        <p class="text-sm text-gray-700 mt-1">{{ chunk }}</p>
    </div>
    {% endfor %}
</div>
{% endif %}

<!-- Metric scores -->
{% if trace.scores %}
<div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
    <h2 class="text-sm font-semibold text-gray-600 px-5 pt-4 pb-2">Metric Scores</h2>
    <table class="w-full text-sm">
        <thead class="bg-gray-50 text-gray-500 text-xs uppercase tracking-wide">
            <tr>
                <th class="px-5 py-3 text-left">Metric</th>
                <th class="px-5 py-3 text-left">Score</th>
                <th class="px-5 py-3 text-left">Status</th>
                <th class="px-5 py-3 text-left">Reason</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-100">
            {% for s in trace.scores %}
            <tr>
                <td class="px-5 py-3 font-medium">{{ s.metric_name }}</td>
                <td class="px-5 py-3">
                    {% set pct = (s.score * 100) | int %}
                    <span class="font-semibold {% if pct >= 80 %}text-green-600{% elif pct >= 50 %}text-yellow-600{% else %}text-red-600{% endif %}">{{ pct }}%</span>
                </td>
                <td class="px-5 py-3">
                    {% if s.passed %}
                    <span class="px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">passed</span>
                    {% else %}
                    <span class="px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">failed</span>
                    {% endif %}
                </td>
                <td class="px-5 py-3 text-gray-500 text-xs">{{ s.reason }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endif %}
{% endblock %}