{% extends "base.html" %} {#
============================================================ 用户管理页 路由:
GET /users ============================================================ #} {%
block title %}用户管理{% endblock %} {% block breadcrumb_title %}用户管理{%
endblock %} {% block head_extra %}
<style>
    /* 创建用户弹窗保留滚动能力，但隐藏各浏览器的可见滚动条。 */
    #createUserModal .modal-content {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    #createUserModal .modal-content::-webkit-scrollbar { display: none; }

    /* 用户报表弹窗 */
    .report-modal-content { width: min(1180px, 96vw); max-width: none; }
    .report-modal-header { align-items: flex-start; padding: 20px 24px 16px; }
    .report-modal-heading { min-width: 0; }
    .report-modal-heading h3 { font-size: 20px; line-height: 1.3; }
    .report-modal-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; color: #6b7280; font-size: 12px; }
    .report-period { padding: 3px 8px; border-radius: 999px; background: #fef2f2; color: #b91c1c; font-weight: 600; }
    .report-filter { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin: 0 24px 20px; padding: 14px; border: 1px solid #e5e7eb; border-radius: 8px; background: #f8fafc; }
    .report-filter-group { display: flex; flex-direction: column; gap: 5px; }
    .report-filter-label { color: #4b5563; font-size: 12px; font-weight: 600; }
    .report-filter select, .report-filter input { height: 36px; padding: 0 10px; border: 1px solid #d1d5db; border-radius: 6px; background: #fff; color: #1f2937; }
    .report-filter select { min-width: 108px; }
    .report-filter input { min-width: 142px; }
    .report-filter-separator { align-self: center; padding-top: 19px; color: #9ca3af; }
    .report-filter-actions { display: flex; gap: 8px; margin-left: auto; }
    .report-filter .btn { height: 36px; padding: 0 12px; }
    .report-date-note { flex-basis: 100%; color: #6b7280; font-size: 12px; }
    .report-summary { margin: 0 24px 20px; }
    .report-summary-title { margin: 0 0 10px; color: #6b7280; font-size: 12px; font-weight: 700; letter-spacing: .04em; }
    .report-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
    .report-kpi { min-height: 70px; padding: 12px 14px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; }
    .report-kpi-label { color: #6b7280; font-size: 12px; }
    .report-kpi-value { margin-top: 6px; color: #111827; font-size: 22px; font-weight: 700; line-height: 1; }
    .report-kpi.success .report-kpi-value { color: #047857; }
    .report-kpi.warning .report-kpi-value { color: #b45309; }
    .report-kpi.danger .report-kpi-value { color: #b91c1c; }
    .report-kpi.resource { background: #f8fafc; }
    .report-table-wrap { margin: 0 24px 24px; overflow: auto; max-height: min(48vh, 460px); border: 1px solid #e5e7eb; border-radius: 8px; }
    #userReportTable { min-width: 980px; }
    #userReportTable th { background: #f8fafc; font-size: 11px; letter-spacing: .02em; text-transform: none; }
    #userReportTable td { font-size: 12px; }
    .report-empty { padding: 42px 16px !important; color: #6b7280; text-align: center; }
    .report-state { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
    .report-state.success { color: #047857; background: #d1fae5; }
    .report-state.warning { color: #b45309; background: #fef3c7; }
    .report-state.danger { color: #b91c1c; background: #fee2e2; }
    .report-state.info { color: #374151; background: #e5e7eb; }
    @media (max-width: 720px) {
        .report-modal-content { width: 100%; max-height: 95vh; border-radius: 8px 8px 0 0; }
        .report-modal-header, .report-filter, .report-summary, .report-table-wrap { margin-left: 14px; margin-right: 14px; }
        .report-modal-header { padding-left: 0; padding-right: 0; }
        .report-filter { align-items: stretch; }
        .report-filter-group, .report-filter select, .report-filter input { width: 100%; }
        .report-filter-separator { display: none; }
        .report-filter-actions { width: 100%; margin-left: 0; }
        .report-filter-actions .btn { flex: 1; }
        .report-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    .user-actions-cell { display: flex; align-items: center; gap: 6px; min-width: 174px; }
    .user-action-primary,
    .user-action-more {
        height: 30px; border: 1px solid #d1d5db; border-radius: 6px;
        background: #fff; color: #374151; cursor: pointer;
    }
    .user-action-primary {
        padding: 0 11px; font-size: 12px; font-weight: 600; white-space: nowrap;
    }
    .user-action-more { width: 30px; padding: 0; font-size: 20px; line-height: 1; }
    .user-action-primary:hover,
    .user-action-more:hover,
    .user-action-more[aria-expanded="true"] { border-color: #9ca3af; background: #f3f4f6; }
    .user-action-menu {
        position: fixed; z-index: 1200; width: 190px; padding: 5px;
        border: 1px solid #e5e7eb; border-radius: 7px; background: #fff;
        box-shadow: 0 12px 28px rgba(17, 24, 39, 0.18);
    }
    .user-action-menu[hidden] { display: none; }
    .user-action-menu-item {
        display: flex; width: 100%; min-height: 34px; align-items: center;
        padding: 7px 10px; border: 0; border-radius: 5px; background: transparent;
        color: #374151; font-size: 13px; text-align: left; cursor: pointer;
    }
    .user-action-menu-item:hover,
    .user-action-menu-item:focus-visible { outline: none; background: #f3f4f6; }
    .user-action-menu-item.danger { color: #b91c1c; }
    .user-action-menu-item.danger:hover,
    .user-action-menu-item.danger:focus-visible { background: #fef2f2; }
    .user-action-menu-separator { height: 1px; margin: 5px 4px; background: #e5e7eb; }
    #usersTable {
        min-width: 1960px;
        table-layout: fixed;
        border-collapse: separate;
        border-spacing: 0;
    }
    #usersTable th,
    #usersTable td {
        height: 42px;
        padding: 8px 10px;
        overflow: hidden;
        font-size: 13px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    #usersTable thead th {
        position: sticky;
        top: 0;
        z-index: 3;
        height: 44px;
        background: #f3f4f6;
        box-shadow: inset 0 -1px 0 #d1d5db;
        vertical-align: middle;
    }
    #usersTable tbody td { background: #fff; }
    #usersTable tbody tr:nth-child(even) td { background: #fafafa; }
    #usersTable tbody tr:hover td { background: #f3f4f6; }
    #usersTable th:first-child,
    #usersTable td:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        box-shadow: inset -1px 0 0 #e5e7eb;
    }
    #usersTable th:last-child,
    #usersTable td:last-child {
        position: sticky;
        right: 0;
        z-index: 2;
        box-shadow: inset 1px 0 0 #e5e7eb;
    }
    #usersTable thead th:first-child,
    #usersTable thead th:last-child { z-index: 5; }
    #usersTable th:nth-child(1) { width: 150px; }
    #usersTable th:nth-child(2) { width: 130px; }
    #usersTable th:nth-child(3),
    #usersTable td:nth-child(3),
    #usersTable th:nth-child(4),
    #usersTable td:nth-child(4) { width: 78px; }
    #usersTable th:nth-child(5) { width: 190px; }
    #usersTable th:nth-child(6) { width: 105px; }
    #usersTable th:nth-child(n+7):nth-child(-n+12) { width: 105px; }
    #usersTable th:nth-child(13) { width: 150px; }
    #usersTable th:nth-child(14) { width: 180px; }
    #usersTable th:nth-child(15) { width: 82px; }
    #usersTable th:nth-child(16) { width: 184px; }
    #usersTable th:nth-child(3),
    #usersTable td:nth-child(3),
    #usersTable th:nth-child(4),
    #usersTable td:nth-child(4),
    #usersTable th:nth-child(n+6):nth-child(-n+12),
    #usersTable td:nth-child(n+6):nth-child(-n+12) { text-align: right; }
</style>
{% endblock %} {# ══════════════════════════════════════════════════════════
主体内容 ══════════════════════════════════════════════════════════ #} {% block
content %}

<!-- 页面标题行 -->
<div class="flex justify-between items-center" style="margin-bottom: 24px">
    <h2 style="font-size: 28px; font-weight: 700">LDAP 用户管理</h2>
    <button class="btn btn-primary" onclick="showCreateUserModal()">
        + 创建用户
    </button>
</div>

<!-- 用户列表卡片 -->
<div class="card" style="margin-bottom: 20px">
    <div class="flex justify-between items-center" style="margin-bottom: 16px">
        <div>
            <input
                type="text"
                id="userSearch"
                placeholder="搜索用户名、姓名、UID、家目录、配额…"
                style="
                    padding: 8px 12px;
                    border: 1px solid #e5e7eb;
                    border-radius: 6px;
                    width: 300px;
                "
            />
        </div>
        <span style="color: #6b7280; font-size: 14px">
            总计: <strong id="userCount">—</strong> 个用户
        </span>
    </div>

    <div
        class="users-table-scroll"
        role="region"
        aria-label="用户列表"
        tabindex="0"
    >
        <table class="table data-table has-actions" id="usersTable">
            <thead>
                <tr>
                    <th>用户名</th>
                    <th>姓名</th>
                    <th class="col-number">UID</th>
                    <th class="col-number">GID</th>
                    <th>家目录</th>
                    <th>存储配额</th>
                    <th>核时限额 (h)</th>
                    <th>核时已用 (h)</th>
                    <th>核时剩余 (h)</th>
                    <th>卡时限额 (h)</th>
                    <th>卡时已用 (h)</th>
                    <th>卡时剩余 (h)</th>
                    <th>Shell</th>
                    <th>所属组</th>
                    <th class="col-status">状态</th>
                    <th class="col-actions">操作</th>
                </tr>
            </thead>
            <tbody id="usersTableBody">
                <tr>
                    <td colspan="16" class="text-center py-8 text-gray-500">
                        加载中…
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<!-- 操作说明卡片 -->
<div class="card" style="margin-bottom: 20px; background-color: #eff6ff; border-left: 4px solid #3b82f6">
    <h3 style="font-size: 16px; font-weight: 600; margin-bottom: 8px; color: #1e40af">
        <span aria-hidden="true" style="margin-right: 8px">ⓘ</span>用户管理说明
    </h3>
    <ul style="list-style: disc; margin-left: 24px; color: #1e40af; font-size: 14px; line-height: 1.8">
        <li>点击“创建用户”新增 LDAP 用户，用户名和 UID 创建后不建议随意修改</li>
        <li>可在操作菜单中编辑资料、调整存储/核时/卡时配额或重置密码</li>
        <li>勾选管理员权限后立即生效；撤销自己的管理员权限会被系统阻止</li>
        <li>删除用户前请确认其作业和数据已处理，删除操作无法撤销</li>
    </ul>
</div>

<!-- LDAP 连接状态卡片 -->
<div class="card">
    <h3 class="card-title">LDAP 连接状态</h3>
    <div class="flex items-center gap-2" id="ldapStatusRow">
        <span class="badge badge-success">检测中…</span>
        <span style="color: #6b7280; font-size: 14px"
            >正在连接 LDAP 服务器…</span
        >
    </div>
</div>

{% endblock %} {# ══════════════════════════════════════════════════════════
弹窗层 ══════════════════════════════════════════════════════════ #} {% block
modals %}

<div id="userActionsMenu" class="user-action-menu" role="menu" hidden></div>

<!-- 创建用户弹窗 -->
<div id="createUserModal" class="modal" style="display: none">
    <div class="modal-content">
        <div class="modal-header">
            <h3>创建新用户</h3>
            <button class="modal-close" onclick="closeCreateUserModal()">
                &times;
            </button>
        </div>
        <form id="createUserForm" onsubmit="handleCreateUser(event)">
            <div class="form-group">
                <label for="create_username">用户名</label>
                <input
                    type="text"
                    id="create_username"
                    name="username"
                    required
                    autocomplete="off"
                />
            </div>
            <div class="form-group">
                <label for="create_sn">姓名</label>
                <input
                    type="text"
                    id="create_sn"
                    name="sn"
                    maxlength="128"
                    placeholder="如：张三；留空则使用用户名"
                    autocomplete="name"
                />
            </div>
            <div class="form-group">
                <label for="create_uid">UID</label>
                <input
                    type="number"
                    id="create_uid"
                    name="uid"
                    required
                    min="1000"
                />
            </div>
            <div class="form-group">
                <label for="create_gid">主组</label>
                <select id="create_gid" name="gid" required>
                    <option value="">选择组…</option>
                </select>
            </div>
            <div class="form-group">
                <label for="create_home">家目录</label>
                <input
                    type="text"
                    id="create_home"
                    name="home"
                    required
                    placeholder="/home/username"
                />
            </div>
            <div class="form-group">
                <label for="create_quota">存储配额 (GB)</label>
                <div style="display: flex; gap: 10px; align-items: center">
                    <input
                        type="number"
                        id="create_quota"
                        name="storage_quota_gb"
                        min="1"
                        step="0.1"
                        placeholder="如 500"
                        style="flex: 1"
                    />
                    <label
                        for="create_quota_unlimited"
                        style="
                            display: flex;
                            align-items: center;
                            gap: 6px;
                            font-weight: normal;
                            cursor: pointer;
                            margin-bottom: 0;
                        "
                    >
                        <input
                            type="checkbox"
                            id="create_quota_unlimited"
                            name="quota_unlimited"
                            checked
                            style="width: 16px; height: 16px; margin-top: 0"
                        />
                        不限制
                    </label>
                </div>
                <div style="font-size: 12px; color: #9ca3af; margin-top: 6px">
                    取消「不限制」后可填写配额；重新勾选会清空已填数值
                </div>
            </div>
            <div class="form-group">
                <label for="create_shell">Shell</label>
                <select id="create_shell" name="shell">
                    <option value="/bin/bash">/bin/bash</option>
                    <option value="/bin/sh">/bin/sh</option>
                    <option value="/sbin/nologin">/sbin/nologin</option>
                </select>
            </div>
            <div class="form-group">
                <label for="create_password">密码</label>
                <input
                    type="password"
                    id="create_password"
                    name="password"
                    placeholder="留空则不设置密码"
                    autocomplete="new-password"
                />
            </div>
            <div class="form-group">
                <label
                    for="create_is_admin"
                    style="
                        display: flex;
                        align-items: flex-start;
                        gap: 10px;
                        cursor: pointer;
                        margin-bottom: 0;
                        font-weight: normal;
                    "
                >
                    <input
                        type="checkbox"
                        id="create_is_admin"
                        name="is_admin"
                        style="
                            width: 16px;
                            height: 16px;
                            margin-top: 2px;
                            accent-color: #dc3023;
                            cursor: pointer;
                            flex-shrink: 0;
                        "
                    />
                    <div>
                        <span
                            style="
                                font-size: 14px;
                                font-weight: 500;
                                color: #374151;
                            "
                            >授予管理员权限</span
                        >
                        <div
                            style="
                                font-size: 12px;
                                color: #9ca3af;
                                margin-top: 2px;
                                line-height: 1.4;
                            "
                        >
                            管理员可访问所有管理页面并操作任意用户的作业
                        </div>
                    </div>
                </label>
            </div>
            <div class="modal-footer">
                <button
                    type="button"
                    class="btn btn-secondary"
                    onclick="closeCreateUserModal()"
                >
                    取消
                </button>
                <button type="submit" class="btn btn-primary">创建</button>
            </div>
        </form>
    </div>
</div>

<!-- 编辑用户弹窗 -->
<div id="editUserModal" class="modal" style="display: none">
    <div class="modal-content">
        <div class="modal-header">
            <h3>编辑用户</h3>
            <button class="modal-close" onclick="closeEditUserModal()">
                &times;
            </button>
        </div>
        <form id="editUserForm" onsubmit="handleEditUser(event)">
            <input type="hidden" id="edit_username" name="username" />
            <div class="form-group">
                <label for="edit_sn">姓名</label>
                <input type="text" id="edit_sn" name="sn" maxlength="128" autocomplete="off" />
            </div>
            <div class="form-group">
                <label for="edit_gid">主组</label>
                <select id="edit_gid" name="gid">
                    <option value="">选择组…</option>
                </select>
            </div>
            <div class="form-group">
                <label for="edit_home">家目录</label>
                <input type="text" id="edit_home" name="home" />
            </div>
            <div class="form-group">
                <label for="edit_shell">Shell</label>
                <select id="edit_shell" name="shell">
                    <option value="/bin/bash">/bin/bash</option>
                    <option value="/bin/sh">/bin/sh</option>
                    <option value="/sbin/nologin">/sbin/nologin</option>
                </select>
            </div>
            <div class="form-group">
                <label for="edit_password">新密码</label>
                <input
                    type="password"
                    id="edit_password"
                    name="password"
                    placeholder="留空则不修改密码"
                    autocomplete="new-password"
                />
            </div>
            <div class="form-group">
                <label
                    for="edit_is_admin"
                    style="
                        display: flex;
                        align-items: flex-start;
                        gap: 10px;
                        cursor: pointer;
                        margin-bottom: 0;
                        font-weight: normal;
                    "
                >
                    <input
                        type="checkbox"
                        id="edit_is_admin"
                        name="is_admin"
                        style="
                            width: 16px;
                            height: 16px;
                            margin-top: 2px;
                            accent-color: #dc3023;
                            cursor: pointer;
                            flex-shrink: 0;
                        "
                    />
                    <div>
                        <span
                            style="
                                font-size: 14px;
                                font-weight: 500;
                                color: #374151;
                            "
                            >管理员权限</span
                        >
                        <div
                            style="
                                font-size: 12px;
                                color: #9ca3af;
                                margin-top: 2px;
                                line-height: 1.4;
                            "
                        >
                            勾选授予 / 取消勾选撤销管理员权限（立即生效）
                            <span
                                id="edit_is_admin_self_note"
                                style="
                                    display: none;
                                    color: #f59e0b;
                                    font-weight: 600;
                                "
                                >—&nbsp;不能修改自己的权限</span
                            >
                        </div>
                    </div>
                </label>
            </div>
            <div class="modal-footer">
                <button
                    type="button"
                    class="btn btn-secondary"
                    onclick="closeEditUserModal()"
                >
                    取消
                </button>
                <button type="submit" class="btn btn-primary">保存</button>
            </div>
        </form>
    </div>
</div>

<!-- 修改磁盘配额弹窗 -->
<div id="userQuotaModal" class="modal" style="display: none">
    <div class="modal-content" style="max-width: 440px">
        <div class="modal-header">
            <h3 id="userQuotaTitle">修改磁盘配额</h3>
            <button class="modal-close" onclick="closeUserQuotaModal()">&times;</button>
        </div>
        <form id="userQuotaForm" onsubmit="handleUserQuota(event)">
            <input type="hidden" id="quota_username" />
            <div class="form-group">
                <label for="quota_value">存储配额 (GB)</label>
                <div style="display: flex; gap: 10px; align-items: center">
                    <input type="number" id="quota_value" min="1" step="0.1" placeholder="如 500" style="flex: 1" />
                    <label for="quota_unlimited" style="display:flex;align-items:center;gap:6px;font-weight:normal;margin-bottom:0">
                        <input type="checkbox" id="quota_unlimited" checked style="width:16px;height:16px;margin-top:0" />
                        不限制
                    </label>
                </div>
                <div style="font-size:12px;color:#9ca3af;margin-top:6px">取消「不限制」后可填写配额；重新勾选会清空已填数值。保存后立即生效。</div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="closeUserQuotaModal()">取消</button>
                <button type="submit" class="btn btn-primary">保存配额</button>
            </div>
        </form>
    </div>
</div>

<!-- 用户报表弹窗 -->
<div id="userReportModal" class="modal" style="display: none">
    <div class="modal-content report-modal-content">
        <div class="modal-header report-modal-header">
            <div class="report-modal-heading">
                <h3 id="userReportTitle">用户报表</h3>
                <div class="report-modal-meta">
                    <span>Slurm 作业与资源使用概览</span>
                    <span id="userReportPeriod" class="report-period">今日</span>
                </div>
            </div>
            <button class="modal-close" onclick="closeUserReportModal()">
                <span aria-hidden="true">&times;</span><span class="sr-only">关闭</span>
            </button>
        </div>
        <div class="report-filter" aria-label="报表筛选">
            <div class="report-filter-group">
                <label class="report-filter-label" for="userReportRange">统计周期</label>
                <select id="userReportRange">
                <option value="day">今日</option>
                <option value="week">本周</option>
                <option value="month">本月</option>
                <option value="custom">自定义</option>
                </select>
            </div>
            <div class="report-filter-group">
                <label class="report-filter-label" for="userReportStart">开始日期</label>
                <input type="date" id="userReportStart" />
            </div>
            <span class="report-filter-separator">至</span>
            <div class="report-filter-group">
                <label class="report-filter-label" for="userReportEnd">结束日期</label>
                <input type="date" id="userReportEnd" />
            </div>
            <div class="report-filter-actions">
                <button class="btn btn-secondary" onclick="applyCustomReportRange()">应用筛选</button>
                <button class="btn btn-secondary" onclick="exportUserReportCsv()">导出 CSV</button>
            </div>
            <span id="userReportStartDate" class="report-date-note"></span>
        </div>

        <div class="report-summary">
            <div class="report-summary-title">作业状态</div>
            <div class="report-kpis">
                <div class="report-kpi"><div class="report-kpi-label">作业总数</div><div id="report_total_jobs" class="report-kpi-value">—</div></div>
                <div class="report-kpi success"><div class="report-kpi-label">已完成</div><div id="report_completed_jobs" class="report-kpi-value">—</div></div>
                <div class="report-kpi danger"><div class="report-kpi-label">失败 / 异常</div><div id="report_failed_jobs" class="report-kpi-value">—</div></div>
                <div class="report-kpi warning"><div class="report-kpi-label">已取消</div><div id="report_cancelled_jobs" class="report-kpi-value">—</div></div>
            </div>
            <div class="report-summary-title" style="margin-top: 18px">资源消耗</div>
            <div class="report-kpis">
                <div class="report-kpi resource"><div class="report-kpi-label">CPU 核时</div><div id="report_cpu_hours" class="report-kpi-value">—</div></div>
                <div class="report-kpi resource"><div class="report-kpi-label">GPU 卡时</div><div id="report_gpu_hours" class="report-kpi-value">—</div></div>
                <div class="report-kpi resource"><div class="report-kpi-label">运行时长 (h)</div><div id="report_elapsed_hours" class="report-kpi-value">—</div></div>
            </div>
        </div>
        <div class="report-table-wrap">
            <table class="table" id="userReportTable">
                <thead>
                    <tr>
                        <th>作业ID</th>
                        <th>名称</th>
                        <th>状态</th>
                        <th>分区</th>
                        <th>CPU</th>
                        <th>GPU</th>
                        <th>核时</th>
                        <th>卡时</th>
                        <th>运行(h)</th>
                        <th>开始时间</th>
                        <th>结束时间</th>
                    </tr>
                </thead>
                <tbody id="userReportTableBody">
                    <tr>
                        <td colspan="11" class="text-center py-8 text-gray-500">
                            正在加载作业明细…
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- 核时/卡时拨付弹窗 -->
<div id="creditModal" class="modal" style="display: none">
    <div class="modal-content" style="max-width: 520px">
        <div class="modal-header">
            <h3 id="creditModalTitle">核时/卡时拨付</h3>
            <button class="modal-close" onclick="closeCreditModal()">
                &times;
            </button>
        </div>
        <form id="creditForm" onsubmit="handleCreditSubmit(event)">
            <input type="hidden" id="credit_username" name="username" />
            <div class="form-group">
                <label for="credit_cpu_hours">调整 CPU 核时（负数表示扣除）</label>
                <input
                    type="number"
                    id="credit_cpu_hours"
                    name="cpu_hours"
                    min="-1000000"
                    max="1000000"
                    step="0.1"
                    placeholder="如 120"
                />
            </div>
            <div class="form-group">
                <label for="credit_gpu_hours">调整 GPU 卡时（负数表示扣除）</label>
                <input
                    type="number"
                    id="credit_gpu_hours"
                    name="gpu_hours"
                    min="-1000000"
                    max="1000000"
                    step="0.1"
                    placeholder="如 24"
                />
            </div>
            <div class="form-group">
                <div style="font-size: 12px; color: #6b7280;">正数拨付，负数表示扣除；扣除后不会低于历史已用量。</div>
            </div>
            <div id="creditCurrentSummary" style="margin-bottom: 16px; padding: 10px 12px; background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 6px; color: #475569; font-size: 13px;"></div>
            <div class="form-group">
                <label for="credit_reason">拨付原因</label>
                <select id="credit_reason" name="reason">
                    <option value="project">项目追加</option>
                    <option value="compensation">资源补偿</option>
                    <option value="grant">专项拨付</option>
                    <option value="correction">拨付纠错</option>
                    <option value="other">其他</option>
                </select>
            </div>
            <div class="form-group">
                <label for="credit_comment">Comment（拨付说明）</label>
                <textarea
                    id="credit_comment"
                    name="comment"
                    rows="3"
                    maxlength="478"
                    required
                    placeholder="填写拨付原因、项目或工单号，便于追溯"
                ></textarea>
            </div>
            <div class="modal-footer">
                <button
                    type="button"
                    class="btn btn-secondary"
                    onclick="closeCreditModal()"
                >
                    取消
                </button>
                <button type="submit" class="btn btn-primary">确认拨付</button>
            </div>
        </form>
    </div>
</div>

{% endblock %} {# ══════════════════════════════════════════════════════════
页面脚本（logout 已在 base.html 全局定义，此处无需重复）
══════════════════════════════════════════════════════════ #} {% block
page_scripts %}
<script>
    /* ── 数据加载 ─────────────────────────────────────────── */

    let loadedUsers = [];

    function escapeHtml(value) {
        const element = document.createElement("div");
        element.textContent = String(value ?? "");
        return element.innerHTML;
    }

    function isDisabledShell(shell) {
        return ["/bin/false", "/sbin/nologin", "/usr/sbin/nologin"].includes(
            (shell || "").trim(),
        );
    }

    let activeUserActionTrigger = null;
    let userActionScrollTimer = null;

    function closeUserActionsMenuOnScroll() {
        closeUserActionsMenu();
    }

    function closeUserActionsMenu() {
        const menu = document.getElementById("userActionsMenu");
        window.clearTimeout(userActionScrollTimer);
        userActionScrollTimer = null;
        window.removeEventListener("scroll", closeUserActionsMenuOnScroll, true);
        menu.hidden = true;
        menu.replaceChildren();
        if (activeUserActionTrigger) {
            activeUserActionTrigger.setAttribute("aria-expanded", "false");
            activeUserActionTrigger = null;
        }
    }

    function appendUserAction(menu, label, handler, danger = false) {
        const button = document.createElement("button");
        button.type = "button";
        button.role = "menuitem";
        button.className = danger
            ? "user-action-menu-item danger"
            : "user-action-menu-item";
        button.textContent = label;
        button.addEventListener("click", () => {
            closeUserActionsMenu();
            handler();
        });
        menu.appendChild(button);
    }

    function openUserActionsMenu(event, userIndex) {
        event.stopPropagation();
        const user = loadedUsers[userIndex];
        if (!user) return;

        const trigger = event.currentTarget;
        const menu = document.getElementById("userActionsMenu");
        closeUserActionsMenu();
        activeUserActionTrigger = trigger;
        trigger.setAttribute("aria-expanded", "true");

        appendUserAction(menu, "编辑用户", () => showEditUserModal(user.username));
        appendUserAction(menu, "修改磁盘配额", () => showUserQuotaModal(user.username));
        appendUserAction(menu, "生成 / 重置 SSH 密钥", () => resetUserSshKey(user.username));

        const separator = document.createElement("div");
        separator.className = "user-action-menu-separator";
        separator.role = "separator";
        menu.appendChild(separator);

        if (isDisabledShell(user.shell)) {
            appendUserAction(menu, "启用用户", () => enableUser(user.username));
        } else {
            appendUserAction(menu, "禁用用户", () => disableUser(user.username), true);
        }
        appendUserAction(menu, "删除用户", () => deleteUser(user.username), true);

        menu.hidden = false;
        const triggerRect = trigger.getBoundingClientRect();
        const menuRect = menu.getBoundingClientRect();
        const viewportPadding = 8;
        const belowTop = triggerRect.bottom + 6;
        const aboveTop = triggerRect.top - menuRect.height - 6;
        menu.style.top = `${
            belowTop + menuRect.height <= window.innerHeight - viewportPadding
                ? belowTop
                : Math.max(viewportPadding, aboveTop)
        }px`;
        menu.style.left = `${Math.min(
            window.innerWidth - menuRect.width - viewportPadding,
            Math.max(viewportPadding, triggerRect.right - menuRect.width),
        )}px`;
        menu.querySelector('[role="menuitem"]')?.focus();
        userActionScrollTimer = window.setTimeout(() => {
            window.addEventListener("scroll", closeUserActionsMenuOnScroll, {
                capture: true,
                once: true,
            });
        }, 150);
    }

    async function loadUsers() {
        const tbody = document.getElementById("usersTableBody");
        closeUserActionsMenu();
        const users = await fetchUsers();

        if (!users || users.length === 0) {
            tbody.innerHTML =
                '<tr><td colspan="16" class="text-center py-8 text-gray-500">暂无用户数据</td></tr>';
            document.getElementById("userCount").textContent = "0";
            loadedUsers = [];
            return;
        }

        loadedUsers = users;

        tbody.innerHTML = users
            .map(
                (user, userIndex) => `
            <tr>
                <td>
                    <div style="display:flex; align-items:center; gap:8px;">
                        <strong>${user.username}</strong>
                        ${
                            user.is_admin
                                ? `<span class="badge badge-error" style="font-size:10px; padding:1px 6px;">管理员</span>`
                                : ""
                        }
                    </div>
                </td>
                <td>${escapeHtml(user.sn || "—")}</td>
                <td>${user.uid}</td>
                <td>${user.gid}</td>
                <td style="font-family: monospace; font-size: 12px;">${user.home}</td>
                <td>
                    ${
                        user.storage_quota_gb && user.storage_quota_gb > 0
                            ? `${user.storage_quota_gb} GB`
                            : "不限制"
                    }
                </td>
                <td>${!user.has_tres_association ? "—" : user.cpu_minutes == null ? "无限" : `${(user.cpu_minutes / 60).toFixed(2)} h`}</td>
                <td>${user.cpu_used_minutes == null ? "—" : `${(user.cpu_used_minutes / 60).toFixed(2)} h`}</td>
                <td>${!user.has_tres_association ? "—" : user.cpu_remaining_minutes == null ? "无限" : `${(user.cpu_remaining_minutes / 60).toFixed(2)} h`}</td>
                <td>${!user.has_tres_association ? "—" : user.gpu_minutes == null ? "无限" : `${(user.gpu_minutes / 60).toFixed(2)} h`}</td>
                <td>${user.gpu_used_minutes == null ? "—" : `${(user.gpu_used_minutes / 60).toFixed(2)} h`}</td>
                <td>${!user.has_tres_association ? "—" : user.gpu_remaining_minutes == null ? "无限" : `${(user.gpu_remaining_minutes / 60).toFixed(2)} h`}</td>
                <td style="font-family: monospace; font-size: 12px;">${user.shell}</td>
                <td>${user.groups && user.groups.length > 0 ? user.groups.join(", ") : "—"}</td>
                <td class="col-status">
                    ${
                        isDisabledShell(user.shell)
                            ? '<span class="badge badge-error">已禁用</span>'
                            : '<span class="badge badge-success">活跃</span>'
                    }
                </td>
                <td class="col-actions">
                    <div class="user-actions-cell">
                        <button type="button" class="user-action-primary"
                                onclick="showUserReportModal(loadedUsers[${userIndex}].username)">报表</button>
                        <button type="button" class="user-action-primary"
                                onclick="showCreditModal(loadedUsers[${userIndex}].username)">拨付</button>
                        <button type="button" class="user-action-more"
                                aria-label="更多操作" aria-haspopup="menu" aria-expanded="false"
                                title="更多操作"
                                onclick="openUserActionsMenu(event, ${userIndex})">&#8942;</button>
                    </div>
                </td>
            </tr>
        `,
            )
            .join("");

        document.getElementById("userCount").textContent = users.length;
    }

    async function loadLDAPStatus() {
        const row = document.getElementById("ldapStatusRow");
        try {
            const status = await fetchLDAPStatus();
            if (status.status === "connected") {
                row.innerHTML = `
                    <span class="badge badge-success">已连接</span>
                    <span style="color: #6b7280; font-size: 14px;">
                        服务器: ${status.server} &nbsp;|&nbsp; Bind DN: ${status.bind_dn}
                    </span>`;
            } else {
                row.innerHTML = `
                    <span class="badge badge-error">未连接</span>
                    <span style="color: #6b7280; font-size: 14px;">
                        错误: ${status.error || "无法连接"}
                    </span>`;
            }
        } catch (e) {
            row.innerHTML = `
                <span class="badge badge-error">检测失败</span>
                <span style="color: #6b7280; font-size: 14px;">无法获取 LDAP 状态</span>`;
        }
    }

    /* ── 组选项（供创建/编辑表单共用） ──────────────────── */

    async function loadGroupOptions() {
        const groups = await fetchGroups();
        const options = groups
            .map(
                (g) =>
                    `<option value="${g.gid}">${g.name} (GID: ${g.gid})</option>`,
            )
            .join("");
        const placeholder = '<option value="">选择组…</option>';

        document.getElementById("create_gid").innerHTML = placeholder + options;
        document.getElementById("edit_gid").innerHTML = placeholder + options;
    }

    /* ── 创建用户 ─────────────────────────────────────────── */

    function showCreateUserModal() {
        loadGroupOptions();
        document.getElementById("createUserForm").reset();
        document.getElementById("create_quota_unlimited").checked = true;
        document.getElementById("createUserModal").style.display = "flex";
        setupQuotaToggle("create");
    }

    function closeCreateUserModal() {
        document.getElementById("createUserModal").style.display = "none";
    }

    async function handleCreateUser(event) {
        event.preventDefault();
        const fd = new FormData(event.target);
        const quotaSelection = readQuotaSelection("create");
        if (!quotaSelection.valid) return;
        const userData = {
            username: fd.get("username"),
            sn: fd.get("sn")?.trim() || null,
            uid: parseInt(fd.get("uid")),
            gid: parseInt(fd.get("gid")),
            home: fd.get("home"),
            shell: fd.get("shell"),
            password: fd.get("password") || null,
            is_admin: fd.get("is_admin") === "on",
            storage_quota_gb: quotaSelection.value,
        };

        const success = await createUser(userData);
        if (success) {
            closeCreateUserModal();
            loadUsers();
        }
    }

    /* ── 编辑用户 ─────────────────────────────────────────── */

    async function showEditUserModal(username) {
        const user = await fetchUser(username);
        if (!user) {
            showToast("获取用户信息失败", "error");
            return;
        }

        await loadGroupOptions();

        document.getElementById("edit_username").value = username;
        document.getElementById("edit_sn").value = user.sn || "";
        document.getElementById("edit_gid").value = user.gid || "";
        document.getElementById("edit_home").value = user.home || "";
        document.getElementById("edit_shell").value = isDisabledShell(user.shell)
            ? "/sbin/nologin"
            : user.shell || "/bin/bash";
        document.getElementById("edit_password").value = "";
        const isAdminCheckbox = document.getElementById("edit_is_admin");
        isAdminCheckbox.checked = !!user.is_admin;
        // 编辑自己时禁用管理员开关，防止意外触发自我撤权报错
        const isSelf = username === __USER__.username;
        isAdminCheckbox.disabled = isSelf;
        isAdminCheckbox.style.opacity = isSelf ? "0.4" : "1";
        isAdminCheckbox.style.cursor = isSelf ? "not-allowed" : "pointer";
        const selfNote = document.getElementById("edit_is_admin_self_note");
        if (selfNote) selfNote.style.display = isSelf ? "inline" : "none";
        document.getElementById("editUserModal").style.display = "flex";
    }

    function closeEditUserModal() {
        document.getElementById("editUserModal").style.display = "none";
    }

    async function showUserQuotaModal(username) {
        const user = await fetchUser(username);
        if (!user) {
            showToast("获取用户信息失败", "error");
            return;
        }
        document.getElementById("quota_username").value = username;
        document.getElementById("userQuotaTitle").textContent = `修改磁盘配额：${username}`;
        const limited = Number(user.storage_quota_gb) > 0;
        document.getElementById("quota_value").value = limited ? user.storage_quota_gb : "";
        document.getElementById("quota_unlimited").checked = !limited;
        setupQuotaToggle("quota");
        document.getElementById("userQuotaModal").style.display = "flex";
    }

    function closeUserQuotaModal() {
        document.getElementById("userQuotaModal").style.display = "none";
    }

    async function handleUserQuota(event) {
        event.preventDefault();
        const quotaSelection = readQuotaSelection("quota");
        if (!quotaSelection.valid) return;
        const username = document.getElementById("quota_username").value;
        const success = await updateUserQuota(username, quotaSelection.value);
        if (success) {
            closeUserQuotaModal();
            loadUsers();
        }
    }

    async function handleEditUser(event) {
        event.preventDefault();
        const fd = new FormData(event.target);
        const username = fd.get("username");
        const userData = {};

        const sn = fd.get("sn");
        if (sn) userData.sn = sn.trim();
        const gid = fd.get("gid");
        if (gid) userData.gid = parseInt(gid);
        const home = fd.get("home");
        if (home) userData.home = home;
        const shell = fd.get("shell");
        if (shell) userData.shell = shell;
        const password = fd.get("password");
        if (password) userData.password = password;
        // is_admin：仅在非编辑自己时传递，避免触发后端自我撤权保护
        const editingUsername = fd.get("username");
        if (editingUsername !== __USER__.username) {
            userData.is_admin = fd.get("is_admin") === "on";
        }

        const success = await updateUser(username, userData);
        if (success) {
            closeEditUserModal();
            loadUsers();
        }
    }

    /* ── 用户报表 ─────────────────────────────────────────── */

    let currentReportUser = "";

    function showUserReportModal(username) {
        currentReportUser = username;
        document.getElementById("userReportTitle").textContent = `用户报表：${username}`;
        const rangeSelect = document.getElementById("userReportRange");
        rangeSelect.value = "day";
        document.getElementById("userReportPeriod").textContent = "今日";
        document.getElementById("userReportStart").value = "";
        document.getElementById("userReportEnd").value = "";
        document.getElementById("userReportModal").style.display = "flex";
        loadUserReport(username, rangeSelect.value);
        rangeSelect.onchange = () => {
            if (rangeSelect.value === "custom") return;
            document.getElementById("userReportPeriod").textContent = rangeSelect.options[rangeSelect.selectedIndex].text;
            loadUserReport(username, rangeSelect.value);
        };
    }

    function closeUserReportModal() {
        document.getElementById("userReportModal").style.display = "none";
        currentReportUser = "";
    }

    async function loadUserReport(username, range, startDate = "", endDate = "") {
        const tbody = document.getElementById("userReportTableBody");
        document.querySelectorAll("#userReportModal .report-kpi-value").forEach((node) => {
            node.textContent = "—";
        });
        tbody.innerHTML =
            '<tr><td colspan="11" class="report-empty">正在加载作业明细…</td></tr>';
        try {
            const query = new URLSearchParams({ range });
            if (startDate) query.set("start", startDate);
            if (endDate) query.set("end", endDate);
            const res = await fetch(
                `/api/slurm/users/${username}/report?${query.toString()}`,
            );
            const data = await res.json();
            if (!res.ok) {
                throw new Error(data.detail || "加载报表失败");
            }

            const totals = data.totals || {};
            document.getElementById("report_total_jobs").textContent =
                totals.total_jobs ?? 0;
            document.getElementById("report_completed_jobs").textContent =
                totals.completed_jobs ?? 0;
            document.getElementById("report_failed_jobs").textContent =
                totals.failed_jobs ?? 0;
            document.getElementById("report_cancelled_jobs").textContent =
                totals.cancelled_jobs ?? 0;
            document.getElementById("report_cpu_hours").textContent =
                totals.cpu_hours ?? 0;
            document.getElementById("report_gpu_hours").textContent =
                totals.gpu_hours ?? 0;
            document.getElementById("report_elapsed_hours").textContent =
                totals.elapsed_hours ?? 0;
            document.getElementById("userReportStartDate").textContent = data.start_date
                ? `统计起始：${data.start_date}` +
                  (data.end_date ? `，结束：${data.end_date}` : "")
                : "";
            document.getElementById("userReportPeriod").textContent = range === "custom"
                ? (startDate ? `${startDate}${endDate ? ` 至 ${endDate}` : ""}` : "自定义")
                : document.getElementById("userReportRange").options[document.getElementById("userReportRange").selectedIndex].text;

            const jobs = data.jobs || [];
            if (jobs.length === 0) {
                tbody.innerHTML =
                    '<tr><td colspan="11" class="report-empty">当前周期暂无作业数据</td></tr>';
                return;
            }

            tbody.innerHTML = jobs
                .map(
                    (job) => `
                <tr>
                    <td>${job.job_id}</td>
                    <td>${job.name || "—"}</td>
                    <td><span class="report-state ${reportStateTone(job.state)}">${job.state || "—"}</span></td>
                    <td>${job.partition || "—"}</td>
                    <td>${job.alloc_cpus || "—"}</td>
                    <td>${job.alloc_gpus || "—"}</td>
                    <td>${job.cpu_hours ?? 0}</td>
                    <td>${job.gpu_hours ?? 0}</td>
                    <td>${job.elapsed_hours ?? 0}</td>
                    <td>${job.start_time || "—"}</td>
                    <td>${job.end_time || "—"}</td>
                </tr>
            `,
                )
                .join("");
        } catch (e) {
            showToast(e.message || "加载报表失败", "error");
            tbody.innerHTML =
                '<tr><td colspan="11" class="report-empty">报表加载失败，请稍后重试</td></tr>';
        }
    }

    function reportStateTone(state) {
        const value = String(state || "").toUpperCase();
        if (["COMPLETED", "SUCCESS"].includes(value)) return "success";
        if (["FAILED", "TIMEOUT", "NODE_FAIL", "OUT_OF_MEMORY"].includes(value)) return "danger";
        if (["CANCELLED", "PREEMPTED"].includes(value)) return "warning";
        return "info";
    }

    function applyCustomReportRange() {
        if (!currentReportUser) return;
        const rangeSelect = document.getElementById("userReportRange");
        const startDate = document.getElementById("userReportStart").value;
        const endDate = document.getElementById("userReportEnd").value;
        rangeSelect.value = "custom";
        if (!startDate) {
            showToast("请选择开始日期", "warning");
            return;
        }
        if (endDate && endDate < startDate) {
            showToast("结束日期不能早于开始日期", "warning");
            return;
        }
        loadUserReport(currentReportUser, "custom", startDate, endDate);
    }

    function exportUserReportCsv() {
        if (!currentReportUser) return;
        const rangeSelect = document.getElementById("userReportRange");
        const startDate = document.getElementById("userReportStart").value;
        const endDate = document.getElementById("userReportEnd").value;
        const query = new URLSearchParams({ range: rangeSelect.value });
        if (startDate) query.set("start", startDate);
        if (endDate) query.set("end", endDate);
        const url = `/api/slurm/users/${currentReportUser}/report.csv?${query.toString()}`;
        window.open(url, "_blank");
    }

    /* ── 核时/卡时拨付 ───────────────────────────────────── */

    function showCreditModal(username) {
        document.getElementById("creditForm").reset();
        document.getElementById("creditModalTitle").textContent = `核时/卡时拨付：${username}`;
        document.getElementById("credit_username").value = username;
        const current = loadedUsers.find((user) => user.username === username);
        const cpuLimit = current?.cpu_minutes == null ? "无限" : `${(current.cpu_minutes / 60).toFixed(2)} h`;
        const gpuLimit = current?.gpu_minutes == null ? "无限" : `${(current.gpu_minutes / 60).toFixed(2)} h`;
        document.getElementById("creditCurrentSummary").textContent =
            `当前限额：CPU ${cpuLimit}，GPU ${gpuLimit}`;
        document.getElementById("creditModal").style.display = "flex";
    }

    function closeCreditModal() {
        document.getElementById("creditModal").style.display = "none";
    }

    async function handleCreditSubmit(event) {
        event.preventDefault();
        const fd = new FormData(event.target);
        const username = fd.get("username");
        const cpuRaw = fd.get("cpu_hours");
        const gpuRaw = fd.get("gpu_hours");
        const payload = {
            reason: fd.get("reason") || null,
            comment: (fd.get("comment") || "").trim(),
        };
        if (cpuRaw) payload.cpu_hours = parseFloat(cpuRaw);
        if (gpuRaw) payload.gpu_hours = parseFloat(gpuRaw);
        if (payload.cpu_hours === undefined && payload.gpu_hours === undefined) {
            showToast("请至少填写核时或卡时", "warning");
            return;
        }
        if (!payload.comment) {
            showToast("请填写 Comment（拨付说明）", "warning");
            return;
        }

        const submitButton = event.submitter;
        if (submitButton) submitButton.disabled = true;
        try {
            const res = await fetch(`/api/slurm/users/${username}/credit`, {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify(payload),
            });
            const data = await res.json();
            if (!res.ok) {
                throw new Error(data.detail || "拨付失败");
            }
            showToast(data.message || "拨付成功", "success");
            closeCreditModal();
            await loadUsers();
        } catch (e) {
            showToast(e.message || "拨付失败", "error");
        } finally {
            if (submitButton) submitButton.disabled = false;
        }
    }

    /* ── 启用/禁用/删除用户 ─────────────────────────────── */

    async function enableUser(username) {
        if (!confirm(`确定要启用用户 "${username}" 吗？该用户将恢复登录权限。`))
            return;
        const success = await enableUserAPI(username);
        if (success) loadUsers();
    }

    async function disableUser(username) {
        if (!confirm(`确定要禁用用户 "${username}" 吗？该用户将无法登录系统。`))
            return;
        const success = await disableUserAPI(username);
        if (success) loadUsers();
    }

    async function deleteUser(username) {
        if (!confirm(`确定要删除用户 "${username}" 吗？此操作无法撤销！`))
            return;
        const success = await deleteUserAPI(username);
        if (success) loadUsers();
    }

    /* ── 页面初始化 ───────────────────────────────────────── */

    function setupQuotaToggle(prefix) {
        const input = document.getElementById(
            prefix === "quota" ? "quota_value" : `${prefix}_quota`,
        );
        const checkbox = document.getElementById(
            prefix === "quota"
                ? "quota_unlimited"
                : `${prefix}_quota_unlimited`,
        );
        if (!input || !checkbox) return;

        const applyUnlimitedState = () => {
            if (checkbox.checked) input.value = "";
            input.disabled = checkbox.checked;
            input.required = !checkbox.checked;
        };

        checkbox.onchange = applyUnlimitedState;
        applyUnlimitedState();
    }

    function readQuotaSelection(prefix) {
        const input = document.getElementById(
            prefix === "quota" ? "quota_value" : `${prefix}_quota`,
        );
        const checkbox = document.getElementById(
            prefix === "quota"
                ? "quota_unlimited"
                : `${prefix}_quota_unlimited`,
        );
        if (!input || !checkbox) {
            showToast("配额控件初始化失败，请刷新页面后重试", "error");
            return { valid: false, value: null };
        }
        const rawValue = input.value.trim();

        if (checkbox.checked && rawValue !== "") {
            showToast("配额数值与不限制不能同时设置", "error");
            return { valid: false, value: null };
        }
        if (checkbox.checked) return { valid: true, value: 0 };

        const quotaGb = Number(rawValue);
        if (!rawValue || !Number.isFinite(quotaGb) || quotaGb <= 0) {
            showToast("请输入有效的配额大小，或选择不限制", "error");
            input.focus();
            return { valid: false, value: null };
        }
        return { valid: true, value: quotaGb };
    }

    document.addEventListener("DOMContentLoaded", () => {
        loadUsers();
        loadLDAPStatus();
        setupTableSearch("userSearch", "usersTable");
        enableTableSorting("usersTable");
        document.addEventListener("click", closeUserActionsMenu);
        document.addEventListener("keydown", (event) => {
            if (event.key === "Escape") closeUserActionsMenu();
        });
        window.addEventListener("resize", closeUserActionsMenu);
    });
</script>
{% endblock %}