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

	<div class="col-lg-10 col-md-9 col-sm-8">
		<div class="card">
			<div class="card-header">
				<h5 class="card-title">User Sessions</h5>
				<h6 class="card-subtitle text-muted">
					Some sessions may have expired but haven't been automatically cleaned from the database yet
				</h6>
			</div>

			<div class="card-body">
				<div id="TableSessions"></div>
			</div>
		</div>
	</div>

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

		<h6 class="mt-3">{{ strings.title_filter_form }}</h6>
		<div class="" id="">
			<form id="SessionsFilter" autocomplete="off">
				<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="_fUsername">Username</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>
				</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 $oTableSessions = jQuery( '#TableSessions' ).icwpWpsfAjaxTable(
		{
			'ajax_render':{{ ajax.render_table_sessions|raw }}
		}
	);
	jQuery( '#SectionUserSessions' ).icwpWpsfTableActions(
		{
			'table': $oTableSessions,
			'ajax_item_delete':{{ ajax.item_delete|raw }},
			'ajax_bulk_action':{{ ajax.bulk_action|raw }}
		}
	);
	jQuery( document ).icwpWpsfTableWithFilter(
		{
			'table': $oTableSessions,
			'selector_filter_form': 'form#SessionsFilter'
		}
	);
</script>