{% extends "base.html" %}
{% block title %}考试结果 - 智联青云{% endblock %}
{% block content %}
<div class="max-w-4xl mx-auto space-y-6">
    <div class="flex justify-between items-center">
        <h1 class="text-2xl font-bold text-slate-900">考试结果</h1>
        <a href="/exams" class="text-sm text-slate-500 hover:text-slate-700">← 返回列表</a>
    </div>
    <div class="bg-white shadow-sm rounded-lg p-6 border border-slate-200">
        <h2 class="text-xl font-bold text-slate-900">{{ exam.title }}</h2>
        <div class="mt-2 flex items-center text-sm text-slate-500 space-x-4">
            <span>{{ exam.subject }}</span>
            <span>满分{{ exam.total_score }}分</span>
            <span>提交时间：{{ submission.submitted_at }}</span>
        </div>
        <div class="mt-4 p-4 rounded-lg {% if score_hidden %}bg-blue-50 border border-blue-200{% elif submission.graded %}bg-green-50 border border-green-200{% else %}bg-yellow-50 border border-yellow-200{% endif %}">
            {% if score_hidden %}
            <div class="text-lg font-medium text-blue-700">成绩尚未公布</div>
            <div class="text-sm text-blue-600 mt-1">成绩将于 {{ exam.score_release_time.strftime('%Y年%m月%d日 %H:%M') }} 公布</div>
            {% elif submission.graded %}
            <div class="text-3xl font-bold text-green-700">{{ submission.score }} <span class="text-lg font-normal text-green-600">/ {{ exam.total_score }}</span></div>
            <div class="text-sm text-green-600 mt-1">批改人：{{ submission.graded_by }}</div>
            {% else %}
            <div class="text-lg font-medium text-yellow-700">待批改</div>
            <div class="text-sm text-yellow-600">选择题已自动批改得分：{{ submission.score }}分，主观题等待老师批改</div>
            {% endif %}
        </div>
    </div>
    {% for q in questions %}
    <div class="bg-white shadow-sm rounded-lg p-6 border border-slate-200">
        <div class="flex items-start space-x-4">
            <span class="flex-shrink-0 w-8 h-8 bg-slate-100 rounded-full flex items-center justify-center text-slate-600 font-medium">{{ loop.index }}</span>
            <div class="flex-1 space-y-3">
                <div class="flex justify-between">
                    <p class="text-lg text-slate-900">{{ q.content }}</p>
                    <span class="text-sm text-slate-400 whitespace-nowrap ml-4">（{{ q.score }}分）</span>
                </div>
                {% if q.get('images') %}
                <div class="flex flex-wrap gap-2">
                    {% for img in q.images %}
                    <img src="{{ img }}" class="max-h-48 rounded border border-slate-200 cursor-pointer" onclick="window.open(this.src)" alt="题目图片">
                    {% endfor %}
                </div>
                {% endif %}
                {% if q.type == 'choice' %}
                <div class="space-y-2">
                    {% for opt in q.options %}
                    {% set letter = ['A','B','C','D'][loop.index0] %}
                    {% set is_answer = letter == q.get('answer','') %}
                    {% set is_selected = letter == answers.get(q.id|string,'') %}
                    <div class="flex items-center space-x-3 p-3 rounded-lg border
                        {% if is_answer %}border-green-300 bg-green-50
                        {% elif is_selected and not is_answer %}border-red-300 bg-red-50
                        {% else %}border-slate-200{% endif %}">
                        {% if is_selected %}
                        <svg class="w-5 h-5 {% if is_answer %}text-green-600{% else %}text-red-500{% endif %}" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>
                        {% else %}
                        <div class="w-5 h-5"></div>
                        {% endif %}
                        <span class="text-slate-700">{{ letter }}. {{ opt }}</span>
                        {% if is_answer %}<span class="text-xs text-green-600 font-medium ml-2">✓ 正确答案</span>{% endif %}
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <div class="p-3 bg-slate-50 rounded-lg border border-slate-200">
                    <div class="text-sm text-slate-500 mb-1">您的答案：</div>
                    <div class="text-slate-800">{{ answers.get(q.id|string, '（未作答）') | render_images }}</div>
                </div>
                {% if q.get('answer') %}
                <div class="p-3 bg-green-50 rounded-lg border border-green-200">
                    <div class="text-sm text-green-600 mb-1">参考答案：</div>
                    <div class="text-green-800">{{ q.answer }}</div>
                </div>
                {% endif %}
                {% endif %}
                {% if q.get('explanation') %}
                <div class="p-3 bg-indigo-50 rounded-lg border border-indigo-200">
                    <div class="text-sm text-indigo-600 mb-1 font-medium">解析：</div>
                    <div class="text-indigo-900 text-sm">{{ q.explanation }}</div>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
    {% endfor %}
</div>
{% endblock %}