{% extends "base.html" %} {% block title %}QuizTrainer - 题库管理{% endblock %}
{% block content %}
<!-- 页面头部 -->
<div class="page-header animate-fade-in">
    <h1>题库管理</h1>
    <div class="meta">
        <span>
            <svg
                viewBox="0 0 24 24"
                width="16"
                height="16"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
            >
                <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
                <line x1="3" y1="9" x2="21" y2="9" />
                <line x1="9" y1="21" x2="9" y2="9" />
            </svg>
            {{ banks | length }} 个题库
        </span>
        <span>
            <svg
                viewBox="0 0 24 24"
                width="16"
                height="16"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
            >
                <path
                    d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2"
                />
                <rect x="9" y="3" width="6" height="4" rx="1" />
            </svg>
            {{ questions | length }} 道题目
        </span>
    </div>
</div>

<div style="display: grid; grid-template-columns: 1fr 400px; gap: 24px">
    <!-- 左侧: 题目列表 -->
    <div class="animate-fade-in" style="animation-delay: 0.1s">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">
                    <svg
                        viewBox="0 0 24 24"
                        width="18"
                        height="18"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                    >
                        <path
                            d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2"
                        />
                        <rect x="9" y="3" width="6" height="4" rx="1" />
                    </svg>
                    题目列表
                </h3>
            </div>
            <div class="card-body" style="padding: 0">
                {% if questions %}
                <div style="max-height: 600px; overflow-y: auto">
                    {% for q in questions %}
                    <div
                        style="
                            padding: 16px;
                            border-bottom: 1px solid var(--border-light);
                        "
                    >
                        <div class="flex items-center gap-2 mb-2">
                            <span class="tag tag-{{ q.type }}"
                                >{{ q.type_display }}</span
                            >
                            <span class="tag tag-{{ q.difficulty.value }}"
                                >{{ q.difficulty_display }}</span
                            >
                            <span
                                style="
                                    font-size: 12px;
                                    color: var(--text-muted);
                                    margin-left: auto;
                                "
                                >ID: {{ q.id }}</span
                            >
                        </div>
                        <div
                            style="
                                font-size: 14px;
                                color: var(--text-primary);
                                margin-bottom: 8px;
                            "
                        >
                            {{ q.question[:80] }}{% if q.question | length > 80
                            %}...{% endif %}
                        </div>
                        <div style="font-size: 12px; color: var(--text-muted)">
                            <span>{{ q.category }}</span>
                            <span style="margin-left: 12px"
                                >答案:
                                <strong style="color: var(--success)"
                                    >{{ q.answer }}</strong
                                ></span
                            >
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <div style="padding: 48px; text-align: center">
                    <svg
                        viewBox="0 0 24 24"
                        width="48"
                        height="48"
                        fill="none"
                        stroke="var(--text-muted)"
                        stroke-width="1.5"
                        style="margin-bottom: 16px; opacity: 0.5"
                    >
                        <path
                            d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2"
                        />
                        <rect x="9" y="3" width="6" height="4" rx="1" />
                    </svg>
                    <h3
                        style="
                            font-size: 16px;
                            color: var(--text-secondary);
                            margin-bottom: 8px;
                        "
                    >
                        暂无题目
                    </h3>
                    <p style="font-size: 14px; color: var(--text-muted)">
                        使用右侧表单添加新题目
                    </p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- 右侧: 添加题目表单 -->
    <div class="animate-fade-in" style="animation-delay: 0.15s">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">
                    <svg
                        viewBox="0 0 24 24"
                        width="18"
                        height="18"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                    >
                        <line x1="12" y1="5" x2="12" y2="19" />
                        <line x1="5" y1="12" x2="19" y2="12" />
                    </svg>
                    添加题目
                </h3>
            </div>
            <div class="card-body">
                <form action="{{ url_for('add_question') }}" method="post">
                    <div class="form-group">
                        <label class="form-label">题目类型 *</label>
                        <select name="type" class="form-input" required>
                            <option value="choice">选择题</option>
                            <option value="truefalse">判断题</option>
                            <option value="fill">填空题</option>
                            <option value="essay">问答题</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label class="form-label">题目内容 *</label>
                        <textarea
                            name="question"
                            class="form-input"
                            placeholder="请输入题目内容..."
                            required
                            style="min-height: 80px"
                        ></textarea>
                    </div>

                    <div class="form-group">
                        <label class="form-label">正确答案 *</label>
                        <input
                            type="text"
                            name="answer"
                            class="form-input"
                            placeholder="选择题填 A/B/C/D，判断题填 true/false"
                            required
                        />
                    </div>

                    <div class="form-group">
                        <label class="form-label">题目分类</label>
                        <select name="category" class="form-input">
                            <option value="Python基础">Python基础</option>
                            <option value="数据结构">数据结构</option>
                            <option value="函数">函数</option>
                            <option value="默认分类">默认分类</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label class="form-label">难度等级</label>
                        <select name="difficulty" class="form-input">
                            <option value="easy">简单</option>
                            <option value="medium" selected>中等</option>
                            <option value="hard">困难</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label class="form-label"
                            >选项 (选择题用，每行一个)</label
                        >
                        <textarea
                            name="options"
                            class="form-input"
                            placeholder="A. 第一个选项&#10;B. 第二个选项&#10;C. 第三个选项&#10;D. 第四个选项"
                            style="min-height: 100px"
                        ></textarea>
                    </div>

                    <div class="form-group">
                        <label class="form-label">题目解析</label>
                        <textarea
                            name="explanation"
                            class="form-input"
                            placeholder="选填，题目解析..."
                            style="min-height: 60px"
                        ></textarea>
                    </div>

                    <button
                        type="submit"
                        class="btn btn-primary btn-block btn-lg"
                    >
                        <svg
                            viewBox="0 0 24 24"
                            width="18"
                            height="18"
                            fill="none"
                            stroke="currentColor"
                            stroke-width="2"
                        >
                            <line x1="12" y1="5" x2="12" y2="19" />
                            <line x1="5" y1="12" x2="19" y2="12" />
                        </svg>
                        添加题目
                    </button>
                </form>
            </div>
        </div>

        <!-- 题库列表 -->
        <div class="card mt-4">
            <div class="card-header">
                <h3 class="card-title">
                    <svg
                        viewBox="0 0 24 24"
                        width="18"
                        height="18"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                    >
                        <rect
                            x="3"
                            y="3"
                            width="18"
                            height="18"
                            rx="2"
                            ry="2"
                        />
                        <line x1="3" y1="9" x2="21" y2="9" />
                        <line x1="9" y1="21" x2="9" y2="9" />
                    </svg>
                    题库列表
                </h3>
            </div>
            <div class="card-body" style="padding: 0">
                {% if banks %} {% for bank in banks %}
                <div
                    style="
                        padding: 12px 16px;
                        border-bottom: 1px solid var(--border-light);
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                    "
                >
                    <div>
                        <div
                            style="
                                font-size: 14px;
                                font-weight: 500;
                                color: var(--text-primary);
                            "
                        >
                            {{ bank }}
                        </div>
                    </div>
                    <a
                        href="{{ url_for('quiz', bank=bank) }}"
                        class="btn btn-sm btn-outline"
                    >
                        开始答题
                    </a>
                </div>
                {% endfor %} {% else %}
                <div
                    style="
                        padding: 24px;
                        text-align: center;
                        color: var(--text-muted);
                    "
                >
                    暂无题库
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}