{% extends "base.html" %}
{% block title %}Score — Mneme HQ{% endblock %}
{% block content %}
<div class="progress-bar">
    <div class="progress-fill" style="width: {{ (completed / total * 100) if total > 0 else 0 }}%"></div>
    <span class="progress-text">{{ completed }} / {{ total }}</span>
</div>

<div class="prompt-box">
    <h2>Prompt</h2>
    <p>{{ prompt_text }}</p>
</div>

<form method="POST" action="{{ url_for('scoring.submit_score') }}">
    <input type="hidden" name="assignment_id" value="{{ assignment_id }}">

    <div class="outputs">
        <div class="output-panel">
            <h3>{% if a_on_left %}Response A{% else %}Response B{% endif %}</h3>
            <div class="output-text">{{ (output_a if a_on_left else output_b) }}</div>
        </div>
        <div class="output-panel">
            <h3>{% if a_on_left %}Response B{% else %}Response A{% endif %}</h3>
            <div class="output-text">{{ (output_b if a_on_left else output_a) }}</div>
        </div>
    </div>

    <div class="scoring-section">
        <h2>Rate Each Response (1-5)</h2>

        {% for dim in ["closeness", "usefulness", "distinctiveness"] %}
        <fieldset class="dimension">
            <legend>{{ dim | title }}</legend>
            <div class="score-row">
                <label>Response A:
                    <select name="{{ dim }}_a" required>
                        {% for v in range(1, 6) %}<option value="{{ v }}">{{ v }}</option>{% endfor %}
                    </select>
                </label>
                <label>Response B:
                    <select name="{{ dim }}_b" required>
                        {% for v in range(1, 6) %}<option value="{{ v }}">{{ v }}</option>{% endfor %}
                    </select>
                </label>
                <label>Winner:
                    <select name="winner_{{ dim }}" required>
                        <option value="">--</option>
                        <option value="a">A</option>
                        <option value="b">B</option>
                        <option value="tie">Tie</option>
                    </select>
                </label>
            </div>
        </fieldset>
        {% endfor %}

        <fieldset class="dimension">
            <legend>Overall Preference</legend>
            <div class="score-row">
                <label>
                    <select name="preference" required>
                        <option value="">--</option>
                        <option value="a">Prefer A</option>
                        <option value="b">Prefer B</option>
                        <option value="tie">No Preference</option>
                    </select>
                </label>
            </div>
        </fieldset>

        <fieldset class="dimension">
            <legend>Notes (optional)</legend>
            <textarea name="notes" rows="3" placeholder="Any observations..."></textarea>
        </fieldset>
    </div>

    <div class="actions">
        <button type="submit" class="btn btn-primary">Submit Score</button>
        <button type="submit" name="skip" value="1" class="btn btn-secondary">Skip</button>
    </div>
</form>
{% endblock %}