{% if not flags.is_enabled %}
	<div class="alert alert-dark">
		<h6 class="alert-heading">{{ strings.not_enabled }}</h6>
		<p class="m-0"><a class="alert-link" href="{{ hrefs.please_enable }}">{{ strings.please_enable }}</a></p>
	</div>
{% endif %}
<div class="row insights_widget" id="SectionTrafficTable">

	<div class="col">

		<form id="TrafficFilterForm" autocomplete="off" class="px-3 pt-3">
			<div class="form-row">

				<div class="col-auto mb-3">
					<label class="sr-only" for="_fIp">{{ strings.ip_address }}</label>
					<select id="_fIp" name="fIp" class="form-control">
						<option value="">-- {{ strings.ip_address }} --</option>
						{% for unique_ip in vars.unique_ips %}
							<option value="{{ unique_ip }}">{{ unique_ip }}</option>
						{% endfor %}
					</select>
				</div>

				<div class="col-auto mb-3">
					<label class="sr-only" for="_fResponse">{{ strings.response }}</label>
					<select id="_fResponse" name="fResponse" class="form-control">
						<option value="">-- {{ strings.response }} --</option>
						{% for unique_response in vars.unique_responses %}
							<option value="{{ unique_response }}">{{ unique_response }}</option>
						{% endfor %}
					</select>
				</div>

				<div class="col-auto mb-3">
					<label class="sr-only" for="_fUsername">{{ strings.username }}</label>
					<select id="_fUsername" name="fUsername" class="form-control"
							{% if vars.unique_users is empty %}disabled="disabled"{% endif %}
					>
						<option value="">-- {{ strings.username }} --</option>
						{% for uniq_user in vars.unique_users %}
							<option value="{{ uniq_user }}">{{ uniq_user }}</option>
						{% endfor %}
					</select>
				</div>

				<div class="col-auto mb-3">
					<label class="sr-only" for="_fLoggedIn">{{ strings.logged_in }}?</label>
					<select id="_fLoggedIn" name="fLoggedIn" class="form-control">
						<option value="-1" selected>-- {{ strings.logged_in }} --</option>
						<option value="1">{{ strings.yes }}</option>
						<option value="0">{{ strings.no }}</option>
					</select>
				</div>

				<div class="col-auto mb-3">
					<label class="sr-only" for="_fOffense">{{ strings.offense|capitalize }}?</label>
					<select id="_fOffense" name="fOffense" class="form-control">
						<option value="-1" selected>-- {{ strings.offense|capitalize }} --</option>
						<option value="1">{{ strings.yes }}</option>
						<option value="0">{{ strings.no }}</option>
					</select>
				</div>

				<div class="col-auto mb-3">
					<label class="sr-only" for="_fPath">{{ strings.path_contains }}</label>
					<input type="text" id="_fPath" name="fPath" placeholder="{{ strings.path_contains }}..."
						   class="form-control form-control-plaintext" />
				</div>

				<div class="col-auto mb-3">
					<input type="checkbox" id="_fExcludeYou" name="fExcludeYou" value="Y"
						   class="form-control custom-checkbox" />
					<label class="form-check-label" for="_fExcludeYou" title="{{ strings.exclude_your_ip_tooltip }}">
						{{ strings.exclude_your_ip }}?</label>
				</div>

				<div class="col-auto mb-3 text-right">
					<input id="SubmitForm" class="btn btn-primary" type="submit"
						   value="{{ strings.filters_apply }}" />
					<a id="ClearForm" href="#" class="btn btn-sm btn-link text-dark">{{ strings.filters_clear }}</a>
				</div>

			</div>
		</form>

		<div id="TableTraffic"></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>