<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="shortcut icon" th:href="@{/favicon.ico}"/>
    <link th:href="@{/static/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/static/css/font-awesome.min.css}" rel="stylesheet"/>
    <link th:href="@{/static/css/animate.css}" rel="stylesheet"/>
    <link th:href="@{/static/css/plugins/chosen/chosen.css}" rel="stylesheet"/>
    <link th:href="@{/static/css/plugins/iCheck/custom.css}" rel="stylesheet"/>
    <link th:href="@{/static/css/bootstrap-table.css}" rel="stylesheet"/>
    <link th:href="@{/static/css/style.css}" rel="stylesheet"/>
    <style type="text/css">
    	.Validform_checktip { margin-top: 6px; }
    	#table-range { border: 1px solid #dddddd; }
    	#table-range thead > tr > th { padding: 8px; }
        .layui-layer .layui-layer-btn { padding-left: 178px; text-align: left;}
        .layui-layer .layui-layer-btn .layui-layer-btn0 { background-color: #1ab394; border-color: #1ab394; color: #FFFFFF; padding: 6px 12px; border-radius: 4px; line-height: 1.42857143; height: auto; }
        .layui-layer .layui-layer-btn .layui-layer-btn0:focus { color: #fff; background-color: #204d74; border-color: #122b40; }
        .layui-layer .layui-layer-btn .layui-layer-btn1 { background-color: #ec4758; border-color: #ec4758; color: #FFFFFF; padding: 6px 12px; line-height: 1.42857143; border-radius: 4px; height: auto; }
        .layui-layer .layui-layer-btn .layui-layer-btn1:focus { color: #fff; background-color: #ac2925; border-color: #761c19; }

			#table { table-layout: fixed; }
    </style>
</head>
<body class="gray-bg">
	<div class="wrapper wrapper-content animated fadeInRight">
        <div class="ibox-content">
        	<div class="toolbar">
	        	<form class="form-inline">
	        		<div class="form-group m-r">
	        			<input id="usernameS" type="text" autocomplete="off" class="form-control m-b" placeholder="请输入用户名或姓名">
	        		</div>
	        		<div class="form-group m-r">
	        			<input id="phoneS" type="text" autocomplete="off" class="form-control m-b" placeholder="请输入联系电话">
	        		</div>
	        		<div class="form-group m-r">
	        			<select id="stateS" class="form-control m-b">
	                        <option value="0">状态</option>
	                        <option value="1">正常</option>
	                        <option value="2">禁用</option>
	                    </select>
	        		</div>
	        		<div class="form-group m-r">
		              	<label class="control-label" style="vertical-align: super;">创建时间：</label>
	                	<input type="text" style="font-size: 14px;" class="laydate-icon form-control layer-date m-b" id="date" placeholder="请选择">
	        		</div>
	        		<button id="searchBtn" type="button" class="btn btn-success m-b m-r">搜索</button>
	        		<a class="btn btn-success m-b" id="add">添加用户</a>
	        	</form>
	        </div>
	        <table id="table" data-classes="table table-hover table-condensed" data-striped="true" data-mobile-responsive="true">
                <thead>
                    <tr>
                        <th>用户名</th>
                        <th>姓名</th>
                        <th>联系电话</th>
                        <th>归属项目</th>
                        <th>备注</th>
                        <th>状态</th>
                        <th>创建时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
    <script type="text/template" id="tpl-add">
        <form id="addUserForm" class="form-horizontal m-t" style="overflow: hidden;" method="post" action="/user/add">
            <div class="form-group">
                <label class="col-sm-3 control-label">用户名：</label>
                <div class="col-sm-5">
                    <input id="username" type="text" class="form-control" name="username" datatype="*2-20"
                           aria-required="true" nullmsg="请输入用户名" errormsg="请输入2-20位字符">
                </div>
                <div class="col-sm-4"><span class="Validform_checktip"></span></div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">姓名：</label>
                <div class="col-sm-5">
                    <input id="name" type="text" class="form-control" name="name" datatype="*2-20"
                           aria-required="true" nullmsg="请输入姓名" errormsg="请输入2-20位字符">
                </div>
                <div class="col-sm-4"><span class="Validform_checktip"></span></div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">请选择归属项目：</label>
                <div class="col-sm-5">
                    <div class="input-group">
                        <select id="psAdd" name="pids" data-placeholder="请选择归属项目" class="chosen-select" multiple style="width: 273.83px;" tabindex="4">
                            <option th:each="p : ${projects}" th:value="${p.id}" hassubinfo="true" th:text="${p.name}">螺蛳湾收费项目</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">联系电话：</label>
                <div class="col-sm-5">
                    <input id="phone" type="text" class="form-control" name="phone">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">备注：</label>
                <div class="col-sm-5">
                    <textarea id="remark" style="overflow: hidden; resize: none; width: 100%; height: 60px;" name="tips" class="form-control" aria-required="true"></textarea>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">状态：</label>
                <div class="col-sm-5">
                    <div class="radio-inline i-checks">
                        <label>
                            <input type="radio" name="state" value="1" checked="">
                            <i></i> 可用
                        </label>
                    </div>
                    <div class="radio-inline i-checks">
                        <label>
                            <input type="radio" name="state" value="2">
                            <i></i>禁用
                        </label>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label"></label>
                <div class="col-sm-5">
                    <span style="color: red;">* 新用户的默认密码为：12345678</span>
                </div>
            </div>
        </form>
    </script>
    <script th:src="@{/static/js/jquery.min.js}"></script>
    <script th:src="@{/static/js/bootstrap.min.js}"></script>
    <script th:src="@{/static/js/content.js}"></script>
    <script th:src="@{/static/js/plugins/layer/layer.min.js}"></script>
    <script th:src="@{/static/js/plugins/layer/laydate/laydate.js}"></script>
    <script th:src="@{/static/js/plugins/bootstrap-table/bootstrap-table.js}"></script>
    <script th:src="@{/static/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}"></script>
    <script th:src="@{/static/js/Validform_v5.3.2.js}"></script>
    <script th:src="@{/static/js/plugins/chosen/chosen.jquery.js}"></script>
    <script th:src="@{/static/js/plugins/iCheck/icheck.min.js}"></script>
    <script th:src="@{/static/js/modules/user/user.js}"></script>
</body>
</html>
