{% extends "admin_base.html" %}

{% block title %}教师申请审核 - 智联青云管理后台{% endblock %}

{% block admin_content %}
<div class="space-y-6">
    <div class="flex items-center justify-between">
        <h1 class="text-2xl font-bold text-slate-900">教师申请审核</h1>
        <div class="text-sm text-slate-500">
            {% if session.user.role == 'admin' %}
                <span class="px-3 py-1 bg-indigo-100 text-indigo-700 rounded-full font-medium">管理员视图</span>
            {% else %}
                <span class="px-3 py-1 bg-purple-100 text-purple-700 rounded-full font-medium">杯赛负责人视图</span>
            {% endif %}
        </div>
    </div>

    {% if apps|length == 0 %}
    <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 text-sm text-blue-800">
        <div class="flex items-start gap-3">
            <svg class="w-5 h-5 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            <div>
                <p class="font-medium mb-1">暂无待审核的教师申请</p>
                {% if session.user.role != 'admin' %}
                <p class="text-blue-700">您只能看到自己负责的杯赛的教师申请。如果有新的申请提交，会在此处显示。</p>
                {% endif %}
            </div>
        </div>
    </div>
    {% endif %}

    <!-- 桌面端表格视图 -->
    <div class="hidden md:block bg-white shadow-sm rounded-lg border border-slate-200 overflow-hidden">
        <div class="table-responsive">
            <table class="min-w-full divide-y divide-slate-200" style="min-width: 1100px;">
                <thead class="bg-slate-50">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider" style="min-width: 60px;">ID</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider" style="min-width: 100px;">申请人</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider" style="min-width: 150px;">杯赛</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider" style="min-width: 100px;">姓名</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider" style="min-width: 150px;">邮箱</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider" style="min-width: 200px;">申请理由</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider" style="min-width: 150px;">申请时间</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider" style="min-width: 150px;">操作</th>
                    </tr>
                </thead>
                <tbody id="applications-table-body" class="bg-white divide-y divide-slate-200">
                    {% for app in apps %}
                    <tr data-id="{{ app.id }}">
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-900">{{ app.id }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-900">{{ app.user.name }}</td>
                        <td class="px-6 py-4 text-sm text-slate-500" style="max-width: 150px; white-space: normal; word-wrap: break-word;">{{ app.contest.name }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-500">{{ app.name }}</td>
                        <td class="px-6 py-4 text-sm text-slate-500" style="max-width: 150px; word-wrap: break-word;">{{ app.email }}</td>
                        <td class="px-6 py-4 text-sm text-slate-500" style="max-width: 200px; white-space: normal; word-wrap: break-word;">{{ app.reason }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-500">{{ app.applied_at.strftime('%Y-%m-%d %H:%M') }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                            <form action="{{ url_for('approve_teacher_application', app_id=app.id) }}" method="post" style="display:inline;">
                                <button type="submit" class="text-green-600 hover:text-green-900 mr-2">批准</button>
                            </form>
                            <form action="{{ url_for('reject_teacher_application', app_id=app.id) }}" method="post" style="display:inline;">
                                <button type="submit" class="text-red-600 hover:text-red-900">拒绝</button>
                            </form>
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="8" class="px-6 py-12 text-center text-slate-500">暂无待审核的教师申请</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <!-- 移动端卡片视图 -->
    <div class="md:hidden space-y-4">
        {% for app in apps %}
        <div class="bg-white shadow-sm rounded-lg border border-slate-200 p-4" data-id="{{ app.id }}">
            <div class="space-y-3">
                <div class="flex items-start justify-between">
                    <div>
                        <div class="text-xs text-slate-400 mb-1">ID: {{ app.id }}</div>
                        <div class="font-semibold text-slate-900">{{ app.user.name }}</div>
                        <div class="text-sm text-slate-600 mt-1">{{ app.contest.name }}</div>
                    </div>
                </div>

                <div class="border-t border-slate-100 pt-3 space-y-2 text-sm">
                    <div><span class="text-slate-500">姓名：</span><span class="text-slate-900">{{ app.name }}</span></div>
                    <div><span class="text-slate-500">邮箱：</span><span class="text-slate-900 break-all">{{ app.email }}</span></div>
                    <div><span class="text-slate-500">申请理由：</span><span class="text-slate-900">{{ app.reason }}</span></div>
                    <div><span class="text-slate-500">申请时间：</span><span class="text-slate-900">{{ app.applied_at.strftime('%Y-%m-%d %H:%M') }}</span></div>
                </div>

                <div class="border-t border-slate-100 pt-3 flex gap-3">
                    <form action="{{ url_for('approve_teacher_application', app_id=app.id) }}" method="post" class="flex-1">
                        <button type="submit" class="w-full px-4 py-2.5 bg-green-500 hover:bg-green-600 active:bg-green-700 text-white font-medium rounded-lg transition-colors touch-manipulation">
                            批准
                        </button>
                    </form>
                    <form action="{{ url_for('reject_teacher_application', app_id=app.id) }}" method="post" class="flex-1">
                        <button type="submit" class="w-full px-4 py-2.5 bg-red-500 hover:bg-red-600 active:bg-red-700 text-white font-medium rounded-lg transition-colors touch-manipulation">
                            拒绝
                        </button>
                    </form>
                </div>
            </div>
        </div>
        {% else %}
        <div class="bg-white shadow-sm rounded-lg border border-slate-200 p-8 text-center text-slate-500">
            暂无待审核的教师申请
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}