<div class="row insights_widget" id="SectionTrafficTable">

	<div class="col-lg-10 col-md-9 col-sm-8">
		<div class="card">
			<div class="card-header">
				<h5 class="card-title">Traffic Watcher</h5>
				<h6 class="card-subtitle text-muted"></h6>
			</div>
			<div class="card-body">

				<div id="TableTraffic"></div>

			</div>
		</div>
	</div>

	<div class="col-lg-2 col-md-3 col-sm-4">

		<div id="TrafficFilter" class="table-side-filter">
			<h6 class="mt-3">{{ strings.title_filter_form }}</h6>
			<form id="TrafficFilterForm">
				<div class="form-group">
					<label for="_fIp">IP Address</label>
					<select id="_fIp" name="fIp" class="form-control">
						<option value="">-- select --</option>
						{% for unique_ip in vars.unique_ips %}
							<option value="{{ unique_ip }}">{{ unique_ip }}</option>
						{% endfor %}
					</select>
				</div>
				<div class="form-group">
					<label for="_fPath">Page/Path Contains...</label>
					<input type="text" id="_fPath" name="fPath" placeholder=""
						   class="form-control-plaintext" />
				</div>
				<div class="form-group">
					<label for="_fResponse">Response</label>
					<select id="_fResponse" name="fResponse" class="form-control">
						<option value="">-- select --</option>
						{% for unique_response in vars.unique_responses %}
							<option value="{{ unique_response }}">{{ unique_response }}</option>
						{% endfor %}
					</select>
				</div>
				<div class="form-group">
					<label for="_fUsername">Username (ignores 'Logged-In' filter)</label>
					<select id="_fUsername" name="fUsername" class="form-control">
						<option value="">-- select --</option>
						{% for uniq_user in vars.unique_users %}
							<option value="{{ uniq_user }}">{{ uniq_user }}</option>
						{% endfor %}
					</select>
					<small id="fUsernameHelp" class="form-text text-muted">
						Providing a username will cause the 'logged-in' filter to be ignored.
					</small>
				</div>
				<div class="form-group">
					<label for="_fLoggedIn">Logged-In?</label>
					<select id="_fLoggedIn" name="fLoggedIn" class="form-control">
						<option value="-1" selected>-- select --</option>
						<option value="1">Yes</option>
						<option value="0">No</option>
					</select>
				</div>
				<div class="form-group">
					<label for="_fTransgression">Transgression?</label>
					<select id="_fTransgression" name="fTransgression" class="form-control">
						<option value="-1" selected>-- select --</option>
						<option value="1">Yes</option>
						<option value="0">No</option>
					</select>
				</div>
				<div class="form-group">
					<label class="form-check-label" for="_fExludeYou" title="<?php echo $sYourIp; ?>">
						Exclude Your Current IP?</label>
					<input type="checkbox" id="_fExludeYou" name="fExludeYou" value="Y"
						   class="form-control" />
				</div>

				<div class="form-group text-right">
					<input id="SubmitForm" href="#" class="btn btn-info" type="submit" value="Apply Filters" />
					<a id="ClearForm" href="#" class="btn btn-link">Clear Filters</a>
				</div>

			</form>
		</div>
	</div>

</div>

<script>
	var $oTableTraffic = jQuery( '#TableTraffic' ).icwpWpsfAjaxTable(
		{
			'ajax_render':{{ ajax.render_table_traffic|raw }}
		}
	);
	jQuery( document ).icwpWpsfTableWithFilter(
		{
			'table': $oTableTraffic,
			'selector_filter_form':'form#TrafficFilterForm'
		}
	);
</script>