{% extends "base.html" %}

{% block title %}Review Benchmark{% endblock %}

{% block head %}
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
{% endblock %}

{% block content %}
<main class="flex-1 p-8 overflow-y-auto">
    <div class="max-w-7xl mx-auto">
        <h2 class="text-3xl font-bold">Review Benchmark Results</h2>
        <div class="bg-gray-800 p-6 rounded-lg mt-4">
            <div class="flex items-end space-x-4">
                <div class="flex-1">
                    <label for="benchmark-select" class="block text-sm font-medium text-gray-300">Select Benchmark</label>
                    <select id="benchmark-select" class="mt-1 block w-full bg-gray-700 border-gray-600 rounded-md shadow-sm p-2"></select>
                </div>
                <div class="flex-1">
                    <label for="model-selector" class="block text-sm font-medium text-gray-300">Select Models</label>
                    <select id="model-selector" class="mt-1 block w-full bg-gray-700 border-gray-600 rounded-md shadow-sm p-2" multiple></select>
                </div>
            </div>
            <div class="mt-6" style="height: 600px;">
                <canvas id="topic-spider-chart"></canvas>
            </div>
        </div>
    </div>
</main>
{% endblock %}

{% block scripts %}
    <script src="{{ url_for('static', filename='review.js') }}"></script>
{% endblock %}