{% extends "base.html" %}
{% set show_nav = true %}

{% block title %}用户管理{% endblock %}

{% block content %}
<div class="container-fluid">
    <h2 class="mb-4">用户管理</h2>
    
    <ul class="nav nav-tabs mb-3">
        <li class="nav-item">
            <a class="nav-link active" data-status="" href="#">全部</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-status="pending" href="#">待审核</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-status="active" href="#">已激活</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-status="disabled" href="#">已禁用</a>
        </li>
    </ul>
    
    <div class="card">
        <div class="card-body">
            <table class="table">
                <thead>
                    <tr>
                        <th>用户名</th>
                        <th>邮箱</th>
                        <th>UID</th>
                        <th>角色</th>
                        <th>状态</th>
                        <th>标签</th>
                        <th>注册时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="users-table"></tbody>
            </table>
        </div>
    </div>
</div>

<!-- 编辑用户模态框 -->
<div class="modal fade" id="editModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">编辑用户</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="edit-user-id">
                <div class="mb-3">
                    <label class="form-label">邮箱</label>
                    <input type="email" class="form-control" id="edit-email">
                </div>
                <div class="mb-3">
                    <label class="form-label">UID</label>
                    <input type="text" class="form-control" id="edit-uid">
                </div>
                <div class="mb-3">
                    <label class="form-label">角色</label>
                    <select class="form-select" id="edit-role">
                        <option value="user">普通用户</option>
                        <option value="admin">管理员</option>
                    </select>
                </div>
                <div class="mb-3">
                    <label class="form-label">状态</label>
                    <select class="form-select" id="edit-status">
                        <option value="active">已激活</option>
                        <option value="disabled">已禁用</option>
                    </select>
                </div>
                <div class="mb-3">
                    <label class="form-label">标签</label>
                    <input type="text" class="form-control" id="edit-tags" placeholder="多个标签用逗号分隔">
                </div>
                <div class="mb-3">
                    <label class="form-label">备注</label>
                    <textarea class="form-control" id="edit-note" rows="3"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="saveUser()">保存</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="{{ url_for('static', filename='js/users.js') }}"></script>
{% endblock %}