{% 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>
                            <span class="expandable-text">{{ detail.question[:30] if detail.question is not none else '(null)' }}<span class="ellipsis">...</span></span>
                            <div class="full-text" style="display: none;">{{ detail.question }}</div>
                            <a href="javascript:void(0);" style="text-decoration:none;" class="toggle-text">➕</a>
                        </td>
                        <td>
                            <span class="expandable-text">{{ detail.answer[:30] if detail.answer is not none else '(null)' }}<span class="ellipsis">...</span></span>
                            <div class="full-text" style="display: none;">{{ detail.answer }}</div>
                            <a href="javascript:void(0);" style="text-decoration:none;" class="toggle-text">➕</a>
                        </td>
                        <td>
                            <span class="expandable-text">{{ detail.contexts[:30] if detail.contexts is not none else '(null)' }}<span class="ellipsis">...</span></span>
                            <div class="full-text" style="display: none;">{{ detail.contexts }}</div>
                            <a href="javascript:void(0);" style="text-decoration:none;" class="toggle-text">➕</a>
                        </td>
                        <td>
                            <span class="expandable-text">{{ detail.ground_truth[:30] if detail.ground_truth is not none else '(null)' }}<span class="ellipsis">...</span></span>
                            <div class="full-text" style="display: none;">{{ detail.ground_truth }}</div>
                            <a href="javascript:void(0);" style="text-decoration:none;" class="toggle-text">➕</a>
                        </td>
                        <!-- <td>
                            {% if detail.ground_truth is not none %}
                                <span class="expandable-text">{{ detail.ground_truth[:30] }}<span class="ellipsis">...</span></span>
                                <pre class="full-text" style="display: none;">{{ detail.ground_truth }}</pre>
                            {% else %}
                                <span class="expandable-text">(null)<span class="ellipsis">...</span></span>
                                <pre class="full-text" style="display: none;">(null)</pre>
                            {% endif %}
                            <a href="javascript:void(0);" style="text-decoration:none;" class="toggle-text">➕</a>
                        </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://code.jquery.com/jquery-3.6.0.min.js"></script>
<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>
<script>
    $(document).ready(function() {
        $('.toggle-text').click(function() {
            console.log('Toggle clicked');
            var expandableText = $(this).siblings('.expandable-text');
            var fullText = $(this).siblings('.full-text');
            // console.log('Expandable Text:', expandableText.length);
            // console.log('Full Text:', fullText.length);

            if (expandableText.is(':visible')) {
                expandableText.hide();
                fullText.show();
                $(this).text('➖');
            } else {
                expandableText.show();
                fullText.hide();
                $(this).text('➕');
            }
        });
    });
</script>
{% endblock content %}