{% include templates.backend_header %}
<div class="row pt-3 mt-5">
	<div class="col-12">
		<h1 class="h4 mb-3">{{ title }}</h1>
		{# Plugin Widget Slot: page top #}
		{{ render_slot('backend.users.list.top') }}
		<div class="toolbar d-flex flex-wrap toolbar mb-3">
			<a href="{{ backend_url }}users/new/" class="btn btn-success">
				<em class="fas fa-plus-circle mr-2"></em>Add New
			</a>
			<button type="button" class="btn btn-info" onclick="users.list()">
				<em class="fas fa-sync-alt mr-2"></em>Reload
			</button>
		</div>
		<table id="tbUsers" class="table table-striped table-bordered table-hover m-0 w-100" aria-label="User List">
			<thead>
				<tr>
					<th scope="col" data-priority="0">Name</th>
					<th scope="col" data-priority="2">Username</th>
					<th scope="col" data-priority="3">Email</th>
					<th scope="col" data-priority="5">Status</th>
					<th scope="col" data-priority="6">Created</th>
					<th scope="col" data-priority="7">Updated</th>
					<th scope="col" data-priority="4">Role</th>
					<th scope="col" data-priority="8">Links</th>
					<th scope="col" data-priority="1">Actions</th>
				</tr>
			</thead>
			<tfoot>
				<tr>
					<th scope="col" data-priority="0">Name</th>
					<th scope="col" data-priority="2">Username</th>
					<th scope="col" data-priority="3">Email</th>
					<th scope="col" data-priority="5">Status</th>
					<th scope="col" data-priority="6">Created</th>
					<th scope="col" data-priority="7">Updated</th>
					<th scope="col" data-priority="4">Role</th>
					<th scope="col" data-priority="8">Links</th>
					<th scope="col" data-priority="1">Actions</th>
				</tr>
			</tfoot>
		</table>
	</div>
</div>
<div class="modal fade" id="modalUserStats" tabindex="-1" aria-labelledby="modalUserStatsLabel" data-backdrop="static" data-keyboard="false">
	<div class="modal-dialog modal-xl">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="modalUserStatsLabel">User Statistics</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span>&times;</span>
				</button>
			</div>
			<div class="modal-body px-2 pt-2 pb-0">
				<input type="hidden" id="statUserID" value="">
				<div class="form-row">
					<div class="col-12 col-md-6">
						<div class="card mb-2">
							<div class="card-body py-2">
								<div class="media">
									<em class="fas fa-film fa-2x align-self-center mr-3 text-success"></em>
									<div class="media-body">
										<h4 id="numUserVideos" class="m-0">0</h4>
										<small class="text-muted">Total Links</small>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="col-12 col-md-6">
						<div class="card mb-2">
							<div class="card-body py-2">
								<div class="media">
									<em class="fas fa-film fa-2x align-self-center mr-3 text-danger"></em>
									<div class="media-body">
										<h4 id="numUserBrokenVideos" class="m-0">0</h4>
										<small class="text-muted">Broken Links</small>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="form-row">
					<div class="col-12 col-xl-6">
						<div class="card mb-2">
							<div class="card-header">
								<div class="d-flex justify-content-between align-items-center">
									<h6 class="mb-0">
										<i class="fas fa-fire mr-2 text-danger"></i>
										Popular Videos
									</h6>
									<button class="btn btn-outline-secondary" onclick="$('#popularVideosOptions').trigger('change')" data-toggle="tooltip" title="Reload">
										<em class="fas fa-sync-alt"></em>
									</button>
								</div>
							</div>
							<div class="card-body p-2">
								<div class="form-row">
									<div class="col-12 col-md-6">
										<div class="input-group mb-2">
											<div class="input-group-prepend">
												<span class="input-group-text">
													<i class="fas fa-search fa-lg"></i>
												</span>
											</div>
											<select class="form-control" id="popularVideosOptions" name="popularVideosOptions" aria-label="Popular Videos Filter">
												<option value="today" selected>Today</option>
												<option value="yesterday">Yesterday</option>
												<option value="last_month">Last Month</option>
												<option value="last_weekend">Last Weekend</option>
												<option value="7_days">Last 7 Days</option>
												<option value="30_days">Last 30 Days</option>
												<option value="60_days">Last 60 Days</option>
												<option value="custom">Custom</option>
											</select>
										</div>
									</div>
									<div class="col-12 col-md-6">
										<div class="input-group mb-2 d-none">
											<div class="input-group-prepend">
												<span class="input-group-text">
													<i class="fas fa-calendar fa-lg"></i>
												</span>
											</div>
											<input type="text" id="popularVideosDatePicker" maxlength="23" data-toggle="daterangepicker" class="form-control" aria-label="Popular Videos Date Range Filter">
										</div>
									</div>
								</div>
								<table id="tbPopularVideos" class="table table-striped table-bordered table-hover m-0 w-100" aria-label="Popular Videos">
									<thead>
										<tr>
											<th scope="col" data-priority="0">Title</th>
											<th scope="col" data-priority="2">Sources</th>
											<th scope="col" data-priority="4">Views</th>
											<th scope="col" data-priority="3">User</th>
											<th scope="col" data-priority="5">Created</th>
											<th scope="col" data-priority="1">Actions</th>
										</tr>
									</thead>
									<tfoot>
										<tr>
											<th scope="col" data-priority="0">Title</th>
											<th scope="col" data-priority="2">Sources</th>
											<th scope="col" data-priority="4">Views</th>
											<th scope="col" data-priority="3">User</th>
											<th scope="col" data-priority="5">Created</th>
											<th scope="col" data-priority="1">Actions</th>
										</tr>
									</tfoot>
								</table>
							</div>
						</div>
					</div>
					<div class="col-12 col-xl-6">
						<div class="card mb-2">
							<div class="card-header">
								<div class="d-flex justify-content-between align-items-center">
									<h6 class="mb-0">
										<i class="fas fa-play mr-2 text-success"></i>
										Recently Added Videos
									</h6>
									<button class="btn btn-outline-secondary" onclick="$('#tbRecentVideos').DataTable().ajax.reload(null, false)" data-toggle="tooltip" title="Reload">
										<em class="fas fa-sync-alt"></em>
									</button>
								</div>
							</div>
							<div class="card-body p-2">
								<table id="tbRecentVideos" class="table table-striped table-bordered table-hover m-0 w-100" aria-label="Recently Added Videos">
									<thead>
										<tr>
											<th scope="col" data-priority="0">Title</th>
											<th scope="col" data-priority="2">Sources</th>
											<th scope="col" data-priority="3">Views</th>
											<th scope="col" data-priority="5">User</th>
											<th scope="col" data-priority="4">Created</th>
											<th scope="col" data-priority="1">Actions</th>
										</tr>
									</thead>
									<tfoot>
										<tr>
											<th scope="col" data-priority="0">Title</th>
											<th scope="col" data-priority="2">Sources</th>
											<th scope="col" data-priority="3">Views</th>
											<th scope="col" data-priority="5">User</th>
											<th scope="col" data-priority="4">Created</th>
											<th scope="col" data-priority="1">Actions</th>
										</tr>
									</tfoot>
								</table>
							</div>
						</div>
					</div>
				</div>
				<div class="card mb-2">
					<div class="card-header">
						<div class="d-flex justify-content-between align-items-center">
							<h6 class="mb-0">
								<i class="fas fa-chart-line mr-2 text-primary"></i>
								Statistics
							</h6>
							<button class="btn btn-outline-secondary" data-toggle="tooltip" title="Reload" onclick="$('#userViews select[name=options]').trigger('change')">
								<em class="fas fa-sync-alt"></em>
							</button>
						</div>
					</div>
					<div class="card-body p-2">
						<div id="userViews" class="mx-auto text-center">
							<div class="d-flex align-items-center justify-content-center mb-2" style="max-width:250px">
								<div class="input-group">
									<div class="input-group-prepend">
										<span class="input-group-text">
											<i class="fas fa-search fa-lg"></i>
										</span>
									</div>
									<select class="form-control" id="options" name="options" aria-label="Daily Statistics Filter">
										<option value="this_year">This Year</option>
										<option value="this_month">This Month</option>
										<option value="7_days" selected>Last 7 Days</option>
										<option value="last_month">Last Month</option>
										<option value="30_days">Last 30 Days</option>
										<option value="3_months">Last 3 Months</option>
										<option value="6_months">Last 6 Months</option>
										<option value="last_year">Last Year</option>
									</select>
								</div>
								<div class="ml-3">
									<i class="fas fa-spin fa-sync-alt text-primary d-none" id="statisticsLoader"></i>
								</div>
							</div>
							<div class="chart"></div>
						</div>
					</div>
				</div>
				<div class="form-row">
					<div class="col-12 col-xl-6">
						<div class="card mb-2">
							<div class="card-header">
								<div class="d-flex justify-content-between align-items-center">
									<h6 class="mb-0">
										<i class="fas fa-globe mr-2 text-info"></i>
										Popular Browsers
									</h6>
									<button class="btn btn-outline-secondary" onclick="$('#popularBrowsersOptions').trigger('change')" data-toggle="tooltip" title="Reload">
										<em class="fas fa-sync-alt"></em>
									</button>
								</div>
							</div>
							<div class="card-body p-2">
								<div class="form-row">
									<div class="col-12 col-lg-6">
										<div class="input-group mb-2">
											<div class="input-group-prepend">
												<span class="input-group-text">
													<i class="fas fa-search fa-lg"></i>
												</span>
											</div>
											<select class="form-control" id="popularBrowsersOptions" name="popularBrowsersOptions" aria-label="Popular Browsers Filter">
												<option value="today" selected>Today</option>
												<option value="yesterday">Yesterday</option>
												<option value="last_month">Last Month</option>
												<option value="last_weekend">Last Weekend</option>
												<option value="7_days">Last 7 Days</option>
												<option value="30_days">Last 30 Days</option>
												<option value="60_days">Last 60 Days</option>
												<option value="custom">Custom</option>
											</select>
										</div>
									</div>
									<div class="col-12 col-lg-6">
										<div class="input-group mb-2 d-none">
											<div class="input-group-prepend">
												<span class="input-group-text">
													<i class="fas fa-calendar fa-lg"></i>
												</span>
											</div>
											<input type="text" id="popularBrowsersDatePicker" maxlength="23" data-toggle="daterangepicker" class="form-control" aria-label="Popular Browsers Date Range Filter">
										</div>
									</div>
								</div>
								<table id="tbPopularBrowsers" class="table table-bordered table-bordered table-striped table-hover m-0 w-100" aria-label="Popular Browsers">
									<thead>
										<tr>
											<th scope="col" data-priority="0">Browser</th>
											<th scope="col" data-priority="2">OS</th>
											<th scope="col" data-priority="3">Device</th>
											<th scope="col" data-priority="1">Views</th>
										</tr>
									</thead>
									<tfoot>
										<tr>
											<th scope="col" data-priority="0">Browser</th>
											<th scope="col" data-priority="2">OS</th>
											<th scope="col" data-priority="3">Device</th>
											<th scope="col" data-priority="1">Views</th>
										</tr>
									</tfoot>
								</table>
							</div>
						</div>
					</div>
					<div class="col-12 col-xl-6">
						<div class="card mb-2">
							<div class="card-header">
								<div class="d-flex justify-content-between align-items-center">
									<h6 class="mb-0">
										<i class="fas fa-flag mr-2 text-info"></i>
										Popular Countries/ASNs
									</h6>
									<button class="btn btn-outline-secondary" onclick="$('#popularCountryAsnFilterOptions').trigger('change')" data-toggle="tooltip" title="Reload">
										<em class="fas fa-sync-alt"></em>
									</button>
								</div>
							</div>
							<div class="card-body p-2">
								<div class="input-group mb-2">
									<div class="input-group-prepend">
										<span class="input-group-text">
											<i class="fas fa-search fa-lg"></i>
										</span>
									</div>
									<select class="form-control" id="popularCountryASNOptions" name="popularCountryASNOptions" aria-label="Select Country/ASN">
										<option value="popularCountries" selected>Country</option>
										<option value="popularASN">ASN</option>
									</select>
									<select class="form-control" id="popularCountryAsnFilterOptions" name="popularCountryAsnFilterOptions" aria-label="Popular Countries/ASNs Filter">
										<option value="today" selected>Today</option>
										<option value="yesterday">Yesterday</option>
										<option value="last_month">Last Month</option>
										<option value="last_weekend">Last Weekend</option>
										<option value="7_days">Last 7 Days</option>
										<option value="30_days">Last 30 Days</option>
										<option value="60_days">Last 60 Days</option>
										<option value="custom">Custom</option>
									</select>
								</div>
								<div class="input-group mb-2 d-none">
									<div class="input-group-prepend">
										<span class="input-group-text">
											<i class="fas fa-calendar fa-lg"></i>
										</span>
									</div>
									<input type="text" id="popularCountryAsnDatePicker" maxlength="23" data-toggle="daterangepicker" class="form-control" aria-label="Popular Countries/ASNs Date Range Filter">
								</div>
								<table id="tbPopularCountries" class="table table-bordered table-striped table-hover m-0 w-100" aria-label="Popular Countries/ASNs">
									<thead>
										<tr>
											<th scope="col" data-priority="0">Country / ASN</th>
											<th scope="col" data-priority="1">Views</th>
										</tr>
									</thead>
									<tfoot>
										<tr>
											<th scope="col" data-priority="0">Country / ASN</th>
											<th scope="col" data-priority="1">Views</th>
										</tr>
									</tfoot>
								</table>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
			</div>
		</div>
	</div>
</div>
{# Plugin Widget Slot: page bottom #}
{{ render_slot('backend.users.list.bottom') }}

{% include templates.backend_footer %}