{% extends "base.html" %}

{% block title %}用户管理 - Destiny Platform{% endblock %}

{% block content %}
<div class="divination-container glass">
    <div class="header-section">
        <h1><i class="fas fa-users-cog"></i> 用户管理系统</h1>
        <p class="subtitle">管理平台注册用户及其系统权限</p>
    </div>

    <!-- 闪现消息展示 -->
    {% with messages = get_flashed_messages() %}
      {% if messages %}
        <div class="flash-container">
          {% for message in messages %}
            <div class="flash-message glass">{{ message }}</div>
          {% endfor %}
        </div>
      {% endif %}
    {% endwith %}

    <div class="management-table-container glass">
        <table class="management-table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>用户名</th>
                    <th>权限角色</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                {% for user in users %}
                <tr>
                    <td>{{ user.id }}</td>
                    <td>{{ user.username }}</td>
                    <td>
                        {% if user.is_admin %}
                        <span class="badge admin">管理员</span>
                        {% else %}
                        <span class="badge user">普通用户</span>
                        {% endif %}
                    </td>
                    <td>
                        {% if user.id == current_user.id %}
                        <span class="action-disabled">当前账户</span>
                        {% else %}
                        <a href="{{ url_for('delete_user', user_id=user.id) }}" class="action-btn delete" onclick="return confirm('确定要删除此用户吗？')">
                            <i class="fas fa-trash"></i> 删除
                        </a>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<style>
.management-table-container {
    margin-top: 2rem;
    padding: 1.5rem;
    overflow-x: auto;
}

.management-table {
    width: 100%;
    border-collapse: collapse;
    color: var(--text-color);
}

.management-table th, .management-table td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.management-table th {
    font-weight: 600;
    color: var(--gold-color);
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
}

.badge {
    padding: 0.25rem 0.6rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
}

.badge.admin {
    background: rgba(201, 162, 39, 0.2);
    color: var(--gold-color);
    border: 1px solid var(--gold-color);
}

.badge.user {
    background: rgba(255, 255, 255, 0.1);
    color: #ccc;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.action-btn {
    text-decoration: none;
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    font-size: 0.85rem;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.action-btn.delete {
    color: #ff4d4d;
    background: rgba(255, 77, 77, 0.1);
    border: 1px solid rgba(255, 77, 77, 0.3);
}

.action-btn.delete:hover {
    background: #ff4d4d;
    color: white;
}

.action-disabled {
    color: #777;
    font-size: 0.85rem;
    font-style: italic;
}

.flash-message {
    padding: 1rem;
    margin-bottom: 1rem;
    border-left: 4px solid var(--gold-color);
    animation: fadeIn 0.5s ease-out;
}
</style>
{% endblock %}