{% extends "base.html" %}

{% block title %}数据操作 - 紫金·稷下薪火·云枢智海师生成果共创系统{% endblock %}

{% block content %}
<style>
    /* 基础样式重置 */
    * { margin: 0; padding: 0; box-sizing: border-box; }

    /* 容器样式 - 调整为靠左靠上 */
    .container {
        max-width: 1200px;
        margin: 0; /* 移除自动居中 */
        padding: 20px 0 0 20px; /* 顶部和左侧留白 */
    }

    /* 标题样式 - 减少底部边距 */
    h2 {
        color: #2c3e50;
        border-bottom: 2px solid #3498db;
        padding-bottom: 8px;
        margin-bottom: 15px; /* 减少间距 */
    }

    /* 描述文字样式 */
    p {
        margin-bottom: 15px;
    }

    /* 表格容器 - 顶部边距调整 */
    .table-container {
        overflow-x: auto;
        margin-top: 15px; /* 减少顶部间距 */
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }

    /* 表格样式 */
    table {
        width: 100%;
        border-collapse: collapse;
        font-family: 'Segoe UI', Arial, sans-serif;
    }

    /* 表头样式 */
    thead {
        background: linear-gradient(135deg, #3498db, #1a5276);
        color: white;
    }

    th {
        padding: 16px 12px;
        text-align: left;
        font-weight: 600;
    }

    /* 表格行样式 */
    tbody tr {
        border-bottom: 1px solid #eef1f5;
        transition: background-color 0.3s;
    }

    tbody tr:nth-child(even) {
        background-color: #f8fafc;
    }

    tbody tr:hover {
        background-color: #e3f2fd;
    }

    td {
        padding: 14px 12px;
        color: #4a5568;
    }

    /* 操作按钮样式 */
    .action-button {
        padding: 6px 16px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-weight: 500;
        transition: all 0.3s;
    }

    .delete-btn {
        background: linear-gradient(to right, #ff416c, #ff4b2b);
        color: white;
    }

    .delete-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(255, 75, 43, 0.3);
    }

    /* 返回按钮样式 */
    .back-btn {
        display: inline-block;
        padding: 10px 20px;
        background: linear-gradient(to right, #0066cc, #003399);
        color: white;
        text-decoration: none;
        border-radius: 6px;
        margin-top: 15px; /* 减少顶部间距 */
        margin-left: 20px; /* 左侧对齐 */
        transition: transform 0.3s;
    }

    .back-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(0, 102, 204, 0.4);
    }

    /* 空数据提示 */
    .no-data {
        text-align: center;
        padding: 40px 0;
        color: #a0aec0;
        font-style: italic;
    }
</style>

<div class="container">
    <h2>所有已录入的奖项信息</h2>
    <p>在此页面可以查看所有已录入的成果信息，并进行删除操作</p>

    <div class="table-container">
        <table>
            <thead>
                <tr>
                    <th>比赛/论文名称</th>
                    <th>项目名称</th>
                    <th>学生</th>
                    <th>指导老师</th>
                    <th style="text-align: center;">操作</th>
                </tr>
            </thead>
            <tbody>
                {% if data %}
                    {% for item in data %}
                        <tr>
                            <td>{{ item.id or '无' }}</td>
                            <td>{{ item.name or '无' }}</td>
                            <td>{% if item.students is string %}{{ item.students or '无' }}{% else %}{{ item.students|join(', ') if item.students else '无' }}{% endif %}</td>
                            <td>{% if item.teacher is string %}{{ item.teacher or '无' }}{% else %}{{ item.teacher|join(', ') if item.teacher else '无' }}{% endif %}</td>
                            <td style="text-align: center;">
                                <form action="{{ url_for('delete_entry', doc_id=item._id) }}" method="POST" onsubmit="return confirm('确定要删除这条记录吗？')">
                                    <button type="submit" class="action-button delete-btn">删除</button>
                                </form>
                            </td>
                        </tr>
                    {% endfor %}
                {% else %}
                    <tr>
                        <td colspan="5" class="no-data">暂无数据</td>
                    </tr>
                {% endif %}
            </tbody>
        </table>
    </div>

    <a href="{{ url_for('index') }}" class="back-btn">返回首页</a>
</div>
{% endblock %}