{% extends "exam/base.html" %}
{% block title %}考试成绩 - {{ record.exam.title }}{% endblock %}
{% block extra_css %}
<style>
    .score-circle {
        width: 120px; height: 120px;
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0 auto 16px;
        border: 6px solid;
    }
    .score-circle.pass { border-color: #52c41a; background: #f6ffed; }
    .score-circle.fail { border-color: #ff4d4f; background: #fff2f0; }
    .score-num { font-size: 36px; font-weight: 700; }
    .score-pass { color: #52c41a; }
    .score-fail { color: #ff4d4f; }
    .answer-item {
        padding: 12px;
        border-radius: 8px;
        margin-bottom: 8px;
        font-size: 14px;
    }
    .answer-item.correct { background: #f6ffed; border: 1px solid #b7eb8f; }
    .answer-item.wrong { background: #fff2f0; border: 1px solid #ffccc7; }
    .ans-label { font-weight: 600; margin-bottom: 4px; }
    .ans-detail { color: #666; font-size: 13px; }
    .action-btns {
        display: flex;
        gap: 10px;
        margin-top: 16px;
    }
    .action-btns .btn { flex: 1; }
</style>
{% endblock %}
{% block content %}
<div class="user-bar">
    <span class="name">👤 {{ user_name }}</span>
    <a href="/" style="color:#999;font-size:13px;text-decoration:none;">返回首页</a>
</div>
<div class="header">
    <h1>考试结果</h1>
    <div class="sub">{{ record.exam.title }}</div>
</div>
<div class="container">
    <div class="card text-center">
        <div class="score-circle {% if record.is_pass %}pass{% else %}fail{% endif %}">
            <span class="score-num {% if record.is_pass %}score-pass{% else %}score-fail{% endif %}">{{ record.score }}</span>
            <span style="font-size:13px;color:#666;">总分</span>
        </div>
        <div style="font-size:18px;font-weight:600;margin-bottom:4px;">
            {% if record.is_pass %}
                <span class="text-success">🎉 恭喜，考试通过！</span>
            {% else %}
                <span class="text-danger">😔 未通过，请重新学习</span>
            {% endif %}
        </div>
        <div class="text-muted">及格分数线：{{ record.exam.pass_score }} 分 &nbsp;|&nbsp; 您的得分：{{ record.score }} 分</div>
        <div class="text-muted" style="margin-top:4px;">交卷时间：{{ record.submitted_at|date:"Y-m-d H:i" }}</div>

        <div class="action-btns">
            <a href="/pdf/{{ record.id }}/" class="btn btn-primary">📄 下载 PDF 试卷</a>
            <a href="/" class="btn" style="background:#f5f5f5;color:#666;">返回列表</a>
        </div>
    </div>

    <div class="card">
        <div class="card-title">答题详情</div>
        {% for ans in answers %}
        <div class="answer-item {% if ans.is_correct %}correct{% else %}wrong{% endif %}">
            <div class="ans-label">
                {{ forloop.counter }}. [{{ ans.question.get_q_type_display }}] 
                {% if ans.is_correct %}✅ 正确{% else %}❌ 错误{% endif %}
                （{{ ans.question.score }}分）
            </div>
            <div style="margin:4px 0;">{{ ans.question.content }}</div>
            <div class="ans-detail">
                <span style="color:#333;">您的答案：{{ ans.user_answer|default:"未作答" }}</span>
                {% if not ans.is_correct %}
                <span style="color:#52c41a;margin-left:12px;">正确答案：{{ ans.question.correct_answer }}</span>
                {% endif %}
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}