{% extends "layouts.html" %}
{% block content %}
<div class="container">
    <div class="row mb-4">
        <div class="col">
            <h1>Evaluation Details</h1>
            <a href="/" class="btn btn-link mb-3">Back to Summary</a>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <table class="table table-hover table-bordered">
                <thead>
                <tr>
                    <th>Question ID</th>
                    <th>Question</th>
                    <th>Answer</th>
                    <th>Contexts</th>
                    <th>Ground Truth</th>
                    <th>Answer Correctness</th>
                    <th>Faithfulness</th>
                    <th>Answer Relevancy</th>
                    <th>Context Precision</th>
                    <th>Context Recall</th>
                    <th>Tokens</th>
                    <th>Cost</th>
                    <th>Latency</th>
                    <th>Timestamp</th>
                </tr>
                </thead>
                <tbody>
                {% for detail in details %}
                    <tr>
                        <td>{{ detail.question_id }}</td>
                        <td>{{ detail.question }}</td>
                        <td>{{ detail.answer }}</td>
                        <td>{{ detail.contexts }}</td>
                        <td>{{ detail.ground_truth }}</td>
                        <td>{{ detail.answer_correctness }}</td>
                        <td>{{ detail.faithfulness }}</td>
                        <td>{{ detail.answer_relevancy }}</td>
                        <td>{{ detail.context_precision }}</td>
                        <td>{{ detail.context_recall }}</td>
                        <td>{{ detail.tokens }}</td>
                        <td>${{ detail.cost }}</td>
                        <td>🕓 {{ detail.latency }}</td>
                        <td>{{ detail.eval_timestamp }}</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
{% endblock content %}