{% extends "base.html" %}
{% block title %}管理面板 - FlashExam{% endblock %}

{% block content %}
<div class="admin-container">
    <div class="admin-header">
        <h1><i class="fas fa-cog"></i> 管理面板</h1>
        <p class="text-muted">系统管理与配置</p>
    </div>
    
    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-icon"><i class="fas fa-users"></i></div>
            <div class="stat-info">
                <h3>{{ stats.total_students }}</h3>
                <p>学生总数</p>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon"><i class="fas fa-file-alt"></i></div>
            <div class="stat-info">
                <h3>{{ stats.total_exams }}</h3>
                <p>考试总数</p>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon active"><i class="fas fa-play-circle"></i></div>
            <div class="stat-info">
                <h3>{{ stats.active_exams }}</h3>
                <p>进行中</p>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon"><i class="fas fa-question-circle"></i></div>
            <div class="stat-info">
                <h3>{{ stats.total_questions }}</h3>
                <p>题库题目</p>
            </div>
        </div>
    </div>
    
    <div class="admin-menu">
        <div class="menu-section">
            <h4><i class="fas fa-user-shield"></i> 账户管理</h4>
            <div class="menu-items">
                <a href="{{ url_for('admin.teachers') }}" class="menu-item">
                    <i class="fas fa-chalkboard-teacher"></i>
                    <span>教师管理</span>
                </a>
                <a href="{{ url_for('admin.manage_students') }}" class="menu-item">
                    <i class="fas fa-user-graduate"></i>
                    <span>学生管理</span>
                </a>
            </div>
        </div>
        
        <div class="menu-section">
            <h4><i class="fas fa-tools"></i> 系统设置</h4>
            <div class="menu-items">
                <a href="{{ url_for('admin.settings') }}" class="menu-item">
                    <i class="fas fa-sliders-h"></i>
                    <span>系统配置</span>
                </a>
            </div>
        </div>
    </div>
</div>

<style>
.admin-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.admin-header {
    margin-bottom: 30px;
}

.admin-header h1 {
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    border: 1px solid var(--border-color);
}

.stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
}

.stat-icon.active {
    background: linear-gradient(135deg, var(--accent-success), #059669);
}

.stat-info h3 {
    margin: 0;
    font-size: 24px;
    color: var(--text-primary);
}

.stat-info p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
}

.admin-menu {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid var(--border-color);
}

.menu-section {
    margin-bottom: 20px;
}

.menu-section:last-child {
    margin-bottom: 0;
}

.menu-section h4 {
    color: var(--text-primary);
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 8px;
}

.menu-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    color: var(--text-primary);
    text-decoration: none;
    transition: all 0.2s;
}

.menu-item:hover {
    background: var(--accent-primary);
    transform: translateY(-2px);
}
</style>
{% endblock %}