<div class="row insights_widget" id="SectionUserSessions">

	<div class="col">
		<div class="card">
			<div class="card-header">
				<h5 class="card-title">{{ strings.users_title }}</h5>
				<h6 class="card-subtitle text-muted">
					{{ strings.users_subtitle }}
				</h6>
			</div>

			<div class="card-body">

				<form id="SessionsFilter" autocomplete="off" class="px-3 pt-3">
					<div class="row">
						<div class="col-auto mb-3">
							<label class="visually-hidden" 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="visually-hidden" for="_fIp">{{ strings.username }}</label>
							<select id="_fUsername" name="fUsername" class="form-control">
								<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 text-end">
							<input id="SubmitForm" href="#" class="btn btn-info" 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="TableSessions"></div>
			</div>
		</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>