{% extends "base.html" %}

{% block title %}Create Evaluation{% endblock %}

{% block content %}
<main class="flex-1 p-8 overflow-y-auto">
    <div class="max-w-4xl mx-auto">
        <div class="flex justify-between items-center mb-6">
            <h2 id="form-title" class="text-3xl font-bold">New Evaluation</h2>
            <div>
                <button id="delete-benchmark-btn"
                    class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-lg transition duration-200 hidden">Delete</button>
                <button id="save-benchmark-btn"
                    class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-lg transition duration-200 ml-2">Save</button>
            </div>
        </div>

        <input type="hidden" id="current-filename">

        <div class="bg-gray-800 p-6 rounded-lg mb-6">
            <h3 class="text-xl font-semibold mb-4 border-b border-gray-700 pb-2">Metadata</h3>
            <div class="space-y-4">
                <div>
                    <label for="benchmark-name" class="block text-sm font-medium text-gray-300">Benchmark Name</label>
                    <input type="text" id="benchmark-name"
                        class="mt-1 block w-full bg-gray-700 border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm p-2">
                </div>

                <div>
                    <label for="evaluation-type" class="block text-sm font-medium text-gray-300">Type</label>
                    <select id="evaluation-type" name="evaluation-type"
                        class="mt-1 block w-full bg-gray-700 border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm p-2">
                        <option value="multiple_choice" selected>Multiple Choice</option>
                        <!--
                            <option value="short_answer">Short Answer</option>
                            <option value="code">Code</option>
                            <option value="freeform">Freeform</option>
                            -->
                    </select>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label for="author" class="block text-sm font-medium text-gray-300">Author</label>
                        <input type="text" id="author"
                            class="mt-1 block w-full bg-gray-700 border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm p-2">
                    </div>
                    <div>
                        <label for="revision" class="block text-sm font-medium text-gray-300">Revision</label>
                        <input type="text" id="revision"
                            class="mt-1 block w-full bg-gray-700 border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm p-2">
                    </div>
                </div>
                <div>
                    <label for="benchmark-desc" class="block text-sm font-medium text-gray-300">Description</label>
                    <textarea id="benchmark-desc" rows="3"
                        class="mt-1 block w-full bg-gray-700 border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm p-2"></textarea>
                </div>
            </div>
        </div>

        <div class="bg-gray-800 p-6 rounded-lg mb-6">
            <h3 class="text-xl font-semibold mb-4 border-b border-gray-700 pb-2">Shared System Prompt</h3>
            <div>
                <label for="system-prompt" class="block text-sm font-medium text-gray-300 mb-2">This prompt will be
                    applied to all questions in this evaluation.</label>
                <textarea id="system-prompt" rows="4"
                    class="mt-1 block w-full bg-gray-700 border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm p-2"
                    placeholder="e.g., You are a helpful assistant."></textarea>
            </div>
        </div>

        <div class="bg-gray-800 p-6 rounded-lg">
            <div class="flex justify-between items-center mb-4 border-b border-gray-700 pb-2">
                <h3 class="text-xl font-semibold">Evaluation Questions</h3>
                <button id="add-prompt-btn"
                    class="bg-indigo-500 hover:bg-indigo-600 text-white font-bold py-1 px-3 rounded-lg text-sm transition duration-200">+
                    Add Question</button>
            </div>
            <div id="prompts-list" class="space-y-4">
            </div>
        </div>
    </div>
</main>
{% endblock %}

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