<div class="card-header bg-dark font-white">

	<div class="input-group col-md-7 col-xl-6">

		<input type="text" class="form-control" id="searchName"
			placeholder="输入用户名称进行搜索"> <span class="input-group-btn">
			<button class="btn btn-secondary" type="button" id="searchNameBtn">
				<i class="fa fa-search" aria-hidden="true"></i>
			</button>
		</span> <a class="btn btn-primary" data-toggle="modal"
			data-target="#flipFlop" role="button" id="addUser"><i
			class="fa fa-plus" aria-hidden="true"></i></a>

	</div>
</div>

<div id="mainContainer" class="container">
	<div id="mainContainerRepleace" class="row">
		<table class="table table-striped">
			<thead>
				<tr>
					<th data-field="id">ID</th>
					<th data-field="username">账号</th>
					<th data-field="name">姓名</th>
					<th data-field="email">邮箱</th>
					<th data-field="authorities">角色</th>
					<th data-field="operation">操作</th>

				</tr>
			</thead>
			<tbody>

				<tr th:each="user : ${userModel.userList}">
					<td th:text="${user.id}">1</td>
					<td th:text="${user.username}">1</td>
					<td th:text="${user.name}">waylau</td>
					<td th:text="${user.email}">waylau</td>
					<td th:text="${user.authorities}">waylau</td>
					<td>
						<div>
							<a class="blog-edit-user" data-toggle="modal"
								data-target="#flipFlop" role="button"
								data-th-attr="userId=${user.id}"> <i
								class="fa fa-pencil-square-o" aria-hidden="true"></i>
							</a> <a class="blog-delete-user" role="button"
								data-th-attr="userId=${user.id}"> <i class="fa fa-times"
								aria-hidden="true"></i>
							</a>
						</div>
					</td>
				</tr>

			</tbody>

		</table>
		<div th:replace="~{fragments/page :: page}">...</div>

	</div>
</div>

<!-- The modal -->
<div class="modal fade" id="flipFlop" tabindex="-1" role="dialog"
	aria-labelledby="modalLabel" aria-hidden="true">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title" id="modalLabel">新增/编辑</h4>
				<button type="button" class="close" data-dismiss="modal"
					aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>

			</div>
			<div class="modal-body" id="userFormContainer"></div>
			<div class="modal-footer">
				<button class="btn btn-primary" data-dismiss="modal" id="submitEdit">提交</button>
				<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
			</div>
		</div>
	</div>
</div>

<!-- JavaScript -->
<script src="../../js/users/main.js" th:src="@{/js/users/main.js}"></script>