<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">
    <!-- Google Chrome Frame也可以让IE用上Chrome的引擎: -->
    <meta name="renderer" content="webkit">
    <!--国产浏览器高速模式-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 作者 -->
    <meta name="author" content="silos"/>
    <meta name="revised" content="Silos-Admin-v-2.0.0"/>
    <!-- 定义页面的最新版本 -->
    <meta name="description" content="网站简介"/>
    <!-- 网站简介 -->
    <meta name="keywords" content="搜索关键字，以半角英文逗号隔开"/>
    <title>Index</title>
    <!-- 公共样式 开始 -->
    <link rel="shortcut icon" href="../../../static/assets/silos/img/favicon.png"
          th:href="@{/assets/silos/img/favicon.png}"/>
    <link rel="bookmark" href="../../../static/assets/silos/img/favicon.png"
          th:href="@{/assets/silos/img/favicon.png}"/>
    <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/fontawesome6/css/all.css"
          th:href="@{/assets/library/fonts/fontawesome6/css/all.css}"/>
    <link rel="stylesheet" href="../../../static/business/upms/role/css/edit.css" th:href="@{/business/upms/role/css/edit.css}"/>
</head>
<body>
<div class="container">
    <div class="form-container">
        <div class="form-header">
            <div class="form-title">
                <i class="fas fa-user-plus"></i> 添加角色
            </div>
        </div>
        <div class="form-body">
            <form id="role-form">
                <!-- 基本信息部分 -->
                <div class="form-section">
                    <div class="section-title">
                        <i class="fas fa-id-card"></i> 基本信息
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            <label for="roleName" class="required">角色名称</label>
                            <input type="text" id="roleName" class="form-control" placeholder="输入角色名称" required>
                            <div class="form-error" id="role-name-error">角色名称不能为空</div>
                        </div>
                        <div class="form-group">
                            <label for="parentId">父级角色</label>
                            <select id="parentId" class="form-control">
                                <option value="">无父级角色</option>
                                <option value="1">超级管理员</option>
                                <option value="2">系统管理员</option>
                                <option value="3">平台管理员</option>
                                <option value="4">区域管理员</option>
                            </select>
                            <div class="form-text">选择上级角色，建立角色层级关系</div>
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            <label for="roleType" class="required">角色类型</label>
                            <select id="roleType" class="form-control" required>
                                <option value="0">普通角色</option>
                                <option value="1">普通管理员</option>
                                <option value="2">区域管理员</option>
                                <option value="3">平台管理员</option>
                                <option value="5">系统管理员</option>
                                <option value="9">超级管理员</option>
                            </select>
                            <div class="form-text">角色类型决定权限范围和系统访问级别</div>
                        </div>
                        <div class="form-group">
                            <label for="roleLevel">角色级别</label>
                            <input type="number" id="roleLevel" class="form-control" placeholder="输入角色级别" min="1" max="10">
                            <div class="form-text">数字越小级别越高，1为最高级别</div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="roleDesc">角色描述</label>
                        <textarea id="roleDesc" class="form-control" rows="3" placeholder="输入角色描述"></textarea>
                        <div class="form-text">简要描述角色的职责和权限范围</div>
                    </div>
                </div>

                <!-- 状态设置部分 -->
                <div class="form-section">
                    <div class="section-title">
                        <i class="fas fa-cog"></i> 状态设置
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            <label for="isSys">是否系统数据</label>
                            <select id="isSys" class="form-control">
                                <option value="0">否</option>
                                <option value="1">是</option>
                            </select>
                            <div class="form-text">系统数据通常为系统内置角色，不可删除</div>
                        </div>
                        <div class="form-group">
                            <label for="enabled">启用状态</label>
                            <select id="enabled" class="form-control">
                                <option value="1">启用</option>
                                <option value="0">禁用</option>
                            </select>
                            <div class="form-text">禁用状态下角色将无法使用</div>
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            <label for="sort">排序</label>
                            <input type="number" id="sort" class="form-control" placeholder="输入排序值" value="0">
                            <div class="form-text">数字越小排序越靠前</div>
                        </div>
                        <div class="form-group">
                            <label for="status">状态字符类型</label>
                            <select id="status" class="form-control">
                                <option value="0">正常</option>
                                <option value="1">删除</option>
                                <option value="2">受限操作</option>
                            </select>
                            <div class="form-text">系统层级状态字符类型</div>
                        </div>
                    </div>
                </div>

                <!-- 其他信息部分 -->
                <div class="form-section">
                    <div class="section-title">
                        <i class="fas fa-info-circle"></i> 其他信息
                    </div>

                    <div class="form-group">
                        <label for="remark">备注</label>
                        <textarea id="remark" class="form-control" rows="2" placeholder="输入备注信息"></textarea>
                    </div>
                </div>

                <div class="layui-form-item layui-row layui-col-xs12">
                    <div class="layui-input-block">
                        <button class="layui-btn layui-btn-sm" lay-submit="" lay-filter="save">保存</button>
                        <button type="reset" class="layui-btn layui-btn-sm layui-btn-primary">清除</button>
                    </div>
                </div>
            </form>
        </div>
        <!--<div class="form-footer">
            <button type="button" class="btn btn-light" id="cancel-btn">
                <i class="fas fa-times"></i> 取消
            </button>
            <button type="button" class="btn btn-primary" id="save-btn">
                <i class="fas fa-save"></i> 保存角色
            </button>
        </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/role/js/edit.js" th:src="@{/business/upms/role/js/edit.js}"></script>
</body>
</html>