<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户角色分配 - 权限管理系统</title>
    <link rel="stylesheet" href="../../../static/assets/library/layui/css/layui.css"
          th:href="@{/assets/library/layui/css/layui.css}"/>
    <link rel="stylesheet" href="../../../static/assets/library/fonts/fontawesome/css/all.css"
          th:href="@{/assets/library/fonts/fontawesome/css/all.css}"/>
    <link rel="stylesheet" href="../../../static/business/upms/user/css/allot.css"
          th:href="@{/business/upms/user/css/allot.css}">

</head>
<body>
<div class="container">
    <div class="main-content">
        <input type="hidden" id="ids" name="ids" th:value="${ids}">
        <!-- 用户列表 -->
        <div class="section-card">
            <div class="section-header">
                <div class="section-title">
                    <i class="fas fa-users"></i> 用户列表
                </div>
            </div>
            <div class="section-body">
                <div class="search-box">
                    <input type="text" class="search-input" placeholder="搜索用户...">
                </div>
                <div class="user-list">
                    <div class="user-item selected">
                        <div class="user-avatar-small">张</div>
                        <div class="user-details">
                            <div class="user-name">张三</div>
                            <div class="user-login">zhangsan</div>
                        </div>
                        <div class="status-badge status-active">正常</div>
                    </div>
                    <div class="user-item">
                        <div class="user-avatar-small">李</div>
                        <div class="user-details">
                            <div class="user-name">李四</div>
                            <div class="user-login">lisi</div>
                        </div>
                        <div class="status-badge status-active">正常</div>
                    </div>
                    <div class="user-item">
                        <div class="user-avatar-small">王</div>
                        <div class="user-details">
                            <div class="user-name">王五</div>
                            <div class="user-login">wangwu</div>
                        </div>
                        <div class="status-badge status-active">正常</div>
                    </div>
                    <div class="user-item">
                        <div class="user-avatar-small">赵</div>
                        <div class="user-details">
                            <div class="user-name">赵六</div>
                            <div class="user-login">zhaoliu</div>
                        </div>
                        <div class="status-badge status-inactive">禁用</div>
                    </div>
                    <div class="user-item">
                        <div class="user-avatar-small">钱</div>
                        <div class="user-details">
                            <div class="user-name">钱七</div>
                            <div class="user-login">qianqi</div>
                        </div>
                        <div class="status-badge status-active">正常</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 角色列表 -->
        <div class="section-card">
            <div class="section-header">
                <div class="section-title">
                    <i class="fas fa-user-tag"></i> 角色列表
                </div>
            </div>
            <div class="section-body">
                <div class="search-box">
                    <input type="text" class="search-input" placeholder="搜索角色...">
                </div>
                <div class="role-list">
                    <div class="role-item">
                        <div class="checkbox-container">
                            <input type="checkbox" id="role-1" checked>
                        </div>
                        <div class="role-details">
                            <div class="role-name">系统管理员</div>
                            <div class="role-desc">负责系统配置和维护</div>
                        </div>
                        <div class="role-type">系统管理员</div>
                    </div>
                    <div class="role-item">
                        <div class="checkbox-container">
                            <input type="checkbox" id="role-2" checked>
                        </div>
                        <div class="role-details">
                            <div class="role-name">内容管理员</div>
                            <div class="role-desc">负责内容审核和管理</div>
                        </div>
                        <div class="role-type">普通管理员</div>
                    </div>
                    <div class="role-item">
                        <div class="checkbox-container">
                            <input type="checkbox" id="role-3">
                        </div>
                        <div class="role-details">
                            <div class="role-name">财务管理员</div>
                            <div class="role-desc">负责财务数据管理</div>
                        </div>
                        <div class="role-type">普通管理员</div>
                    </div>
                    <div class="role-item">
                        <div class="checkbox-container">
                            <input type="checkbox" id="role-4">
                        </div>
                        <div class="role-details">
                            <div class="role-name">普通用户</div>
                            <div class="role-desc">系统普通用户角色</div>
                        </div>
                        <div class="role-type">普通角色</div>
                    </div>
                    <div class="role-item">
                        <div class="checkbox-container">
                            <input type="checkbox" id="role-5">
                        </div>
                        <div class="role-details">
                            <div class="role-name">报表查看员</div>
                            <div class="role-desc">可以查看系统报表</div>
                        </div>
                        <div class="role-type">普通角色</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 角色分配操作 -->
    <div class="assignment-section">
        <div class="assignment-header">
            <div class="assignment-title">
                <i class="fas fa-user-check"></i> 角色分配
                <span style="font-size: 14px; font-weight: normal; margin-left: 10px;">当前用户: 张三 (zhangsan)</span>
            </div>
            <div class="assignment-actions">
                <button class="btn btn-light">
                    <i class="fas fa-redo"></i> 重置
                </button>
                <button class="btn btn-primary" id="save-assignments">
                    <i class="fas fa-save"></i> 保存分配
                </button>
            </div>
        </div>
        <div class="assignment-body">
            <div class="current-assignments">
                <div class="current-assignments-title">
                    <i class="fas fa-list-check"></i> 已分配角色
                </div>
                <div class="assigned-roles">
                    <div class="role-tag">
                        系统管理员
                        <button class="remove-role" title="移除角色">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                    <div class="role-tag">
                        内容管理员
                        <button class="remove-role" title="移除角色">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                </div>
            </div>

            <div class="permission-preview">
                <div class="permission-preview-title">
                    <i class="fas fa-key"></i> 权限预览
                </div>
                <div class="permission-list">
                    <div class="permission-item">
                        <i class="fas fa-check-circle"></i>
                        用户管理
                    </div>
                    <div class="permission-item">
                        <i class="fas fa-check-circle"></i>
                        角色管理
                    </div>
                    <div class="permission-item">
                        <i class="fas fa-check-circle"></i>
                        系统配置
                    </div>
                    <div class="permission-item">
                        <i class="fas fa-check-circle"></i>
                        内容审核
                    </div>
                    <div class="permission-item">
                        <i class="fas fa-check-circle"></i>
                        数据导出
                    </div>
                    <div class="permission-item">
                        <i class="fas fa-check-circle"></i>
                        日志查看
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../../../static/assets/library/jquery/jquery.js" th:src="@{/assets/library/jquery/jquery.js}"></script>
<script src="../../../static/assets/library/layui/layui.js" th:src="@{/assets/library/layui/layui.js}"></script>
<script src="../../../static/business/upms/user/js/allot.js" th:src="@{/business/upms/user/js/allot.js}"></script>
</body>
</html>