{% extends "base.html" %}

{% block title %}参加考试 - FlashExam{% endblock %}

{% block head %}
<style>
.exams-header {
    background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
    color: white;
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.exams-header h4 { color: white; margin: 0; }
.exams-header .info-item { margin-top: 0.5rem; }
.exams-header .info-label { opacity: 0.8; font-size: 0.85rem; }
.exams-header .info-value { font-weight: 700; }

.stat-card {
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    text-align: center;
    color: white;
    height: 100%;
}
.stat-card.stat-total { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); }
.stat-card.stat-time { background: linear-gradient(135deg, #ec4899 0%, #be185d 100%); }
.stat-card.stat-questions { background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%); }
.stat-card i { font-size: 2rem; margin-bottom: 0.5rem; opacity: 0.9; }
.stat-card h3 { color: white; margin: 0.25rem 0; font-size: 1.75rem; }
.stat-card p { margin: 0; opacity: 0.9; font-size: 0.9rem; }

.exam-card {
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    height: 100%;
    transition: transform 0.2s, box-shadow 0.2s;
}
.exam-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}
.exam-card .card-header {
    background: linear-gradient(135deg, var(--accent-primary) 0%, #7c3aed 100%);
    color: white;
    border: none;
    padding: 1rem;
}
.exam-card .card-header h5 { margin: 0; color: white; }
.exam-card .exam-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    text-align: center;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-light);
}
.exam-card .exam-meta .meta-item i { font-size: 1.25rem; }
.exam-card .exam-meta .meta-item .value { font-weight: 700; font-size: 1.1rem; }
.exam-card .exam-meta .meta-item .label { font-size: 0.75rem; color: var(--text-muted); }
.exam-card .card-body { padding: 1rem; }
.exam-card .card-footer {
    background: transparent;
    border: none;
    padding: 0 1rem 1rem;
}

.notice-card {
    border: 2px solid var(--warning);
    border-radius: var(--radius-lg);
}
.notice-card .card-header {
    background: var(--warning-light);
    color: var(--warning);
    border-bottom: 1px solid var(--warning);
}
</style>
{% endblock %}

{% block content %}
<div class="exams-header">
    <div class="row align-items-center">
        <div class="col-auto">
            <i class="bi bi-person-check" style="font-size: 3rem;"></i>
        </div>
        <div class="col">
            <h4><i class="bi bi-pencil-square me-2"></i>参加考试</h4>
            <div class="row mt-2">
                <div class="col-auto info-item">
                    <div class="info-label">考生姓名</div>
                    <div class="info-value">{{ current_user.get_display_name() }}</div>
                </div>
                <div class="col-auto info-item">
                    <div class="info-label">考生学号</div>
                    <div class="info-value">{{ current_user.username }}</div>
                </div>
                <div class="col-auto info-item">
                    <div class="info-label">状态</div>
                    <div class="info-value"><i class="bi bi-shield-check me-1"></i>已验证</div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row mb-4">
    <div class="col-4 mb-3">
        <div class="stat-card stat-total">
            <i class="bi bi-journal-text"></i>
            <h3>{{ available_exams|length }}</h3>
            <p>可用考试</p>
        </div>
    </div>
    <div class="col-4 mb-3">
        <div class="stat-card stat-time">
            <i class="bi bi-clock"></i>
            <h3>{% if available_exams %}{{ available_exams|map(attribute='duration_minutes')|sum }}{% else %}0{% endif %}</h3>
            <p>总时长(分钟)</p>
        </div>
    </div>
    <div class="col-4 mb-3">
        <div class="stat-card stat-questions">
            <i class="bi bi-question-circle"></i>
            <h3>{% if available_exams %}{{ available_exams|map(attribute='total_questions')|sum }}{% else %}0{% endif %}</h3>
            <p>总题目数</p>
        </div>
    </div>
</div>

<div class="row">
    {% if available_exams %}
        {% for exam in available_exams %}
        <div class="col-md-6 col-lg-4 mb-4">
            <div class="exam-card">
                <div class="card-header">
                    <h5><i class="bi bi-journal-text me-2"></i>{{ exam.title }}</h5>
                </div>
                <div class="exam-meta">
                    <div class="meta-item">
                        <i class="bi bi-clock text-primary"></i>
                        <div class="value">{{ exam.duration_minutes }}</div>
                        <div class="label">分钟</div>
                    </div>
                    <div class="meta-item">
                        <i class="bi bi-question-circle text-success"></i>
                        <div class="value">{{ exam.total_questions }}</div>
                        <div class="label">题目</div>
                    </div>
                    <div class="meta-item">
                        <i class="bi bi-star text-warning"></i>
                        <div class="value">{{ exam.total_score or 100 }}</div>
                        <div class="label">总分</div>
                    </div>
                </div>
                <div class="card-body">
                    <p class="text-muted mb-2">{{ exam.description or '暂无描述' }}</p>
                    {% if exam.status_info %}
                        {% if exam.status_info.status == 'in_progress' %}
                            <span class="badge bg-warning text-dark">进行中</span>
                        {% elif exam.status_info.status == 'can_continue' %}
                            <span class="badge bg-info">可继续</span>
                        {% else %}
                            <span class="badge bg-success">可参加</span>
                        {% endif %}
                    {% else %}
                        <span class="badge bg-success">可参加</span>
                    {% endif %}
                </div>
                <div class="card-footer">
                    {% if exam.status_info and exam.status_info.status == 'in_progress' %}
                        <a href="{{ url_for('student.continue_exam', exam_id=exam.id) }}" class="btn btn-warning w-100">
                            <i class="bi bi-arrow-right-circle me-1"></i>继续考试
                        </a>
                    {% elif exam.status_info and exam.status_info.status == 'can_continue' %}
                        <a href="{{ url_for('student.continue_exam', exam_id=exam.id) }}" class="btn btn-info w-100">
                            <i class="bi bi-arrow-right-circle me-1"></i>继续考试
                        </a>
                    {% else %}
                        <a href="{{ url_for('student.take_exam', exam_id=exam.id) }}" class="btn btn-primary w-100">
                            <i class="bi bi-play-fill me-1"></i>开始考试
                        </a>
                    {% endif %}
                </div>
            </div>
        </div>
        {% endfor %}
    {% else %}
        <div class="col-12">
            <div class="card">
                <div class="card-body text-center py-5">
                    <i class="bi bi-inbox display-1 text-muted"></i>
                    <h4 class="mt-3 text-muted">暂无可用考试</h4>
                    <p class="text-muted">目前没有开放的考试，请等待老师发布考试</p>
                    <a href="{{ url_for('student.dashboard') }}" class="btn btn-outline-primary">
                        <i class="bi bi-arrow-left me-1"></i>返回主页
                    </a>
                </div>
            </div>
        </div>
    {% endif %}
</div>

{% if available_exams %}
<div class="row mt-4">
    <div class="col-12">
        <div class="card notice-card">
            <div class="card-header">
                <h6 class="mb-0"><i class="bi bi-exclamation-triangle-fill me-2"></i>考试须知</h6>
            </div>
            <div class="card-body">
                <ul class="mb-0">
                    <li>请确保网络连接稳定，避免考试过程中断网</li>
                    <li>考试过程中请勿刷新页面或关闭浏览器</li>
                    <li>每次考试只能提交一次，请仔细检查后再提交</li>
                    <li>考试时间到后系统将自动提交答案</li>
                    <li>如遇技术问题，请及时联系老师</li>
                </ul>
            </div>
        </div>
    </div>
</div>
{% endif %}
{% endblock %}