<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户管理</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-header">
                <span>用户管理</span>
                <button class="layui-btn layui-btn-sm layui-btn-normal" id="add-user">
                    <i class="layui-icon">&#xe654;</i> 添加用户
                </button>
            </div>
            <div class="layui-card-body">
                <!-- 搜索表单 -->
                <form class="layui-form layui-form-pane" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">用户名</label>
                            <div class="layui-input-inline">
                                <input type="text" name="username" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">角色</label>
                            <div class="layui-input-inline">
                                <select name="role">
                                    <option value="">全部</option>
                                    <option value="admin">管理员</option>
                                    <option value="user">普通用户</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button class="layui-btn" lay-submit lay-filter="search">
                                <i class="layui-icon">&#xe615;</i> 搜索
                            </button>
                        </div>
                    </div>
                </form>

                <!-- 数据表格 -->
                <table id="user-table" lay-filter="user-table"></table>
            </div>
        </div>
    </div>

    <!-- 表格工具栏模板 -->
    <script type="text/html" id="tableToolbar">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="refresh">
                <i class="layui-icon">&#xe669;</i> 刷新
            </button>
        </div>
    </script>

    <!-- 角色模板 -->
    <script type="text/html" id="roleTpl">
        {{# if(d.role === 'admin'){ }}
            <span class="layui-badge layui-bg-blue">管理员</span>
        {{# } else { }}
            <span class="layui-badge layui-bg-gray">普通用户</span>
        {{# } }}
    </script>

    <!-- 行工具栏模板 -->
    <script type="text/html" id="tableRowBar">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        {{# if(d.role !== 'admin'){ }}
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
        {{# } }}
    </script>

    <!-- 用户表单模板 -->
    <script type="text/html" id="userFormTpl">
        <form class="layui-form" style="padding: 20px;" lay-filter="userForm">
            <input type="hidden" name="id">
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input type="text" name="username" required lay-verify="required" 
                        placeholder="请输入用户名" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-block">
                    <input type="password" name="password" required lay-verify="required" 
                        placeholder="请输入密码" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-block">
                    <input type="text" name="email" required lay-verify="required|email" 
                        placeholder="请输入邮箱" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">角色</label>
                <div class="layui-input-block">
                    <select name="role" required lay-verify="required">
                        <option value="user">普通用户</option>
                        <option value="admin">管理员</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="userSubmit">提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </script>

    <script src="/static/layui/layui.js"></script>
    <script src="/static/js/users.js"></script>
</body>
</html>