{% extends "base.html" %}
{% block title %}系统设置 - FlashExam{% endblock %}

{% block content %}
<div class="admin-container">
    <div class="page-header">
        <h1><i class="fas fa-sliders-h"></i> 系统设置</h1>
    </div>
    
    <div class="settings-grid">
        <div class="settings-card">
            <div class="card-header">
                <i class="fas fa-database"></i>
                <h3>数据库管理</h3>
            </div>
            <div class="card-body">
                <p>管理考试系统数据库</p>
                <div class="actions">
                    <button class="btn btn-secondary" onclick="location.href='{{ url_for('teacher.dashboard') }}'">
                        <i class="fas fa-cog"></i> 前往教师后台
                    </button>
                </div>
            </div>
        </div>
        
        <div class="settings-card">
            <div class="card-header">
                <i class="fas fa-question-circle"></i>
                <h3>题库管理</h3>
            </div>
            <div class="card-body">
                <p>管理系统题目库</p>
                <div class="actions">
                    <button class="btn btn-secondary" onclick="location.href='{{ url_for('teacher.questions') }}'">
                        <i class="fas fa-list"></i> 题目列表
                    </button>
                </div>
            </div>
        </div>
        
        <div class="settings-card">
            <div class="card-header">
                <i class="fas fa-file-alt"></i>
                <h3>考试管理</h3>
            </div>
            <div class="card-body">
                <p>创建和管理考试</p>
                <div class="actions">
                    <button class="btn btn-secondary" onclick="location.href='{{ url_for('teacher.exams') }}'">
                        <i class="fas fa-calendar"></i> 考试列表
                    </button>
                </div>
            </div>
        </div>
        
        <div class="settings-card">
            <div class="card-header">
                <i class="fas fa-user-graduate"></i>
                <h3>学生管理</h3>
            </div>
            <div class="card-body">
                <p>管理学生信息和账户</p>
                <div class="actions">
                    <button class="btn btn-secondary" onclick="location.href='{{ url_for('teacher.students') }}'">
                        <i class="fas fa-users"></i> 学生列表
                    </button>
                </div>
            </div>
        </div>
    </div>
    
    <div class="info-section">
        <h3><i class="fas fa-info-circle"></i> 系统信息</h3>
        <div class="info-grid">
            <div class="info-item">
                <span class="label">系统版本</span>
                <span class="value">FlashExam v2.0.0</span>
            </div>
            <div class="info-item">
                <span class="label">技术栈</span>
                <span class="value">Flask + SQLite + JavaScript</span>
            </div>
            <div class="info-item">
                <span class="label">AI评分</span>
                <span class="value">支持本地大语言模型智能评分</span>
            </div>
            <div class="info-item">
                <span class="label">代码执行</span>
                <span class="value">Python, C, Java, Bash, JavaScript</span>
            </div>
        </div>
    </div>
</div>

<style>
.page-header {
    margin-bottom: 30px;
}

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

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

.settings-card {
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.card-header {
    background: var(--bg-tertiary);
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--border-color);
}

.card-header i {
    color: var(--accent-primary);
    font-size: 18px;
}

.card-header h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: 16px;
}

.card-body {
    padding: 20px;
}

.card-body p {
    color: var(--text-secondary);
    margin-bottom: 15px;
}

.actions {
    display: flex;
    gap: 10px;
}

.btn {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s;
}

.btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.btn-secondary:hover {
    background: var(--accent-primary);
    color: white;
}

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

.info-section h3 {
    color: var(--text-primary);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.info-item .label {
    color: var(--text-muted);
    font-size: 12px;
}

.info-item .value {
    color: var(--text-primary);
    font-weight: 500;
}
</style>
{% endblock %}