tabler-ui/src/users-list.html

Premium and Open Source dashboard template with responsive and high quality UI. For Free!

---
layout: default
---

<div class="container">
	<div class="page-header">
		<h1 class="page-title">
			Users
		</h1>
		<div class="page-subtitle">1 - 20 of 1713 users</div>
		<div class="page-options d-flex">
			<select class="form-control custom-select w-auto">
				<option value="asc">Newest</option>
				<option value="desc">Oldest</option>
			</select>
		</div>
	</div>

	<div class="row row-cards">
		<div class="col-lg-4">
			<form class="card">
				<div class="card-body">
					<div class="form-group">
						<div class="form-label">Filter</div>
						<input type="text" class="form-control"/>
					</div>
					<div class="form-group">
						<div class="form-label">Calendar</div>
						<input type="text" class="form-control"/>
					</div>
					<div class="form-group">
						<div class="form-label">Group</div>
						<div class="selectgroup w-100">
							<label class="selectgroup-item">
								<input type="radio" name="value" value="s" class="selectgroup-input" checked>
								<span class="selectgroup-button">S</span>
							</label>
							<label class="selectgroup-item">
								<input type="radio" name="value" value="m" class="selectgroup-input">
								<span class="selectgroup-button">M</span>
							</label>

							<label class="selectgroup-item">
								<input type="radio" name="value" value="l" class="selectgroup-input">
								<span class="selectgroup-button">L</span>
							</label>
							<label class="selectgroup-item">
								<input type="radio" name="value" value="xl" class="selectgroup-input">
								<span class="selectgroup-button">XL</span>
							</label>
						</div>
					</div>
					<div class="form-group">
						<div class="form-label">Country</div>
						<select class="custom-select form-control">
							<option value="">United States</option>
						</select>
					</div>
				</div>

				<div class="card-footer text-right">
					<button type="submit" class="btn btn-primary">Search</button>
				</div>
			</form>
		</div>
		<div class="col-lg-8">
			<div class="card">
				<table class="table card-table table-vcenter">
					<tr>
						<th class="w-1"></th>
						<th class="w-1"></th>
						<th>Name</th>
						<th class="d-none d-sm-table-cell">Date</th>
						<th class="d-none d-md-table-cell">Amount</th>
					</tr>
					{% for user in site.data.users limit: 20 offset: 40 %}
					<tr>
						<th>
							<label class="custom-control custom-checkbox">
								<input type="checkbox" class="custom-control-input" name="" value="">
								<div class="custom-control-label"></div>
							</label>
						</th>
						<td><span class="avatar d-block rounded" style="background-image: url({{ user.photo }})"></span></td>
						<td>{{ user.name }} {{user.surname }}</td>
						<td class="d-none d-sm-table-cell">{{ user.birthday.dmy | date: '%B %d, %Y' }}</td>
						<td class="d-none d-md-table-cell">${{ forloop.index | random_number: 500, 2000, 2 }}</td>
					</tr>
					{% endfor %}
				</table>
			</div>

			{% include pagination.html %}
		</div>
	</div>
</div>