{% extends "exam/base.html" %}
{% block title %}考试详情 - 安全培训考试{% endblock %}
{% block content %}
<div class="header">
    <h1>📄 考试详情</h1>
    <div class="sub">{{ record.user_name }} - {{ record.exam.title }}</div>
</div>
<div class="container">
    <div class="card">
        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:16px;">
            <div class="card-title">考生信息</div>
            <div>
                <a href="/pdf/{{ record.id }}/" class="btn btn-primary" style="margin-right:8px;">📄 导出PDF</a>
                <a href="/dashboard/all-records/" class="btn" style="background:#f0f0f0; color:#666;">← 返回列表</a>
            </div>
        </div>

        <table style="width:100%; border-collapse:collapse; font-size:14px; margin-bottom:20px;">
            <tr>
                <td style="padding:8px; background:#f5f5f5; width:120px;"><strong>考生姓名</strong></td>
                <td style="padding:8px;">{{ record.user_name }}</td>
                <td style="padding:8px; background:#f5f5f5; width:120px;"><strong>手机号</strong></td>
                <td style="padding:8px;">{{ record.user_phone }}</td>
            </tr>
            <tr>
                <td style="padding:8px; background:#f5f5f5;"><strong>考试名称</strong></td>
                <td style="padding:8px;">{{ record.exam.title }}</td>
                <td style="padding:8px; background:#f5f5f5;"><strong>考试时间</strong></td>
                <td style="padding:8px;">{{ record.created_at|date:"Y-m-d H:i" }}</td>
            </tr>
            <tr>
                <td style="padding:8px; background:#f5f5f5;"><strong>考试得分</strong></td>
                <td style="padding:8px;"><strong style="color:#4a90d9; font-size:18px;">{{ record.score }}</strong> / {{ record.exam.total_score }} 分</td>
                <td style="padding:8px; background:#f5f5f5;"><strong>是否及格</strong></td>
                <td style="padding:8px;">
                    {% if record.is_pass %}
                        <span style="color:#5cb85c; font-weight:bold;">✓ 及格</span>
                    {% else %}
                        <span style="color:#d9534f; font-weight:bold;">✗ 不及格</span>
                    {% endif %}
                </td>
            </tr>
            <tr>
                <td style="padding:8px; background:#f5f5f5;"><strong>考试次数</strong></td>
                <td style="padding:8px;">第 {{ record.attempt_number }} 次</td>
                <td style="padding:8px; background:#f5f5f5;"><strong>电子签名</strong></td>
                <td style="padding:8px;">
                    {% if record.signature %}
                        <img src="{{ record.signature.url }}" style="max-width:200px; max-height:80px;">
                    {% else %}
                        无签名
                    {% endif %}
                </td>
            </tr>
        </table>
    </div>

    <div class="card">
        <div class="card-title">答题详情</div>

        {% if answers %}
        <table style="width:100%; border-collapse:collapse; font-size:13px;">
            <tr style="background:#f5f5f5;">
                <th style="padding:8px; border:1px solid #ddd; text-align:center; width:50px;">题号</th>
                <th style="padding:8px; border:1px solid #ddd; text-align:left;">题目</th>
                <th style="padding:8px; border:1px solid #ddd; text-align:center; width:80px;">题型</th>
                <th style="padding:8px; border:1px solid #ddd; text-align:center; width:80px;">分值</th>
                <th style="padding:8px; border:1px solid #ddd; text-align:center; width:100px;">考生答案</th>
                <th style="padding:8px; border:1px solid #ddd; text-align:center; width:100px;">正确答案</th>
                <th style="padding:8px; border:1px solid #ddd; text-align:center; width:80px;">结果</th>
            </tr>
            {% for ans in answers %}
            <tr>
                <td style="padding:8px; border:1px solid #ddd; text-align:center;">{{ forloop.counter }}</td>
                <td style="padding:8px; border:1px solid #ddd;">
                    <div>{{ ans.question.content }}</div>
                    {% if ans.question.options %}
                    <div style="color:#666; font-size:12px; margin-top:4px;">
                        选项: {% for k, v in ans.question.options.items %}{{ k }}.{{ v }} {% endfor %}
                    </div>
                    {% endif %}
                </td>
                <td style="padding:8px; border:1px solid #ddd; text-align:center;">{{ ans.question.get_q_type_display }}</td>
                <td style="padding:8px; border:1px solid #ddd; text-align:center;">{{ ans.question.score }}分</td>
                <td style="padding:8px; border:1px solid #ddd; text-align:center;">{{ ans.user_answer|default:"未作答" }}</td>
                <td style="padding:8px; border:1px solid #ddd; text-align:center;">{{ ans.question.correct_answer }}</td>
                <td style="padding:8px; border:1px solid #ddd; text-align:center;">
                    {% if ans.is_correct %}
                        <span style="color:#5cb85c; font-weight:bold;">✓ 正确</span>
                    {% else %}
                        <span style="color:#d9534f; font-weight:bold;">✗ 错误</span>
                    {% endif %}
                </td>
            </tr>
            {% endfor %}
        </table>
        {% else %}
        <p style="color:#999; text-align:center; padding:20px;">暂无答题记录</p>
        {% endif %}
    </div>
</div>
{% endblock %}