{% block section_pre_table %}
	<div class="row">

		<div class="col-6 mt-3">
			<h5><label for="_fIpWhite" class="form-label">{{ strings.ip_filter }}</label></h5>
			<form class="mb-3" id="FilterIpWhite" action="#" method="post" autocomplete="off">
				<input type="hidden" name="fLists[]" value="MW" />
				<div class="row">
					<div class="col mb-2">
						<select id="_fIpWhite" name="fIp"
								class="select2picker static form-control mb-2"
								style="width: 100%">
							<option value="">-- {{ strings.select }} --</option>
							{% for unique_ip in vars.unique_ips_white %}
								<option value="{{ unique_ip }}">{{ unique_ip }}</option>
							{% endfor %}
						</select>
					</div>
				</div>
				<div class="row">
					<div class="col">
						<input id="SubmitForm" href="#" class="btn btn-info" style="border-radius: 0;"
							   type="submit" value="{{ strings.filters_apply }}" />
					</div>
				</div>
			</form>
		</div>

		<div class="col-6 mt-3">
			<h5>{{ strings.ip_new }}</h5>
			<form class="mb-3 add-ip" id="NewWhiteIp" action="#" method="post" autocomplete="off">
				<input type="hidden" name="list" value="MW" />
				<label class="visually-hidden" for="IpAddressNew">{{ strings.ip_address }}</label>

				<div class="row">
					<div class="col">
						<input type="text" class="form-control mb-2 mt-2" id="IpAddress" name="ip"
							   placeholder="{{ strings.enter_ip_white }}" />
					</div>
				</div>
				<div class="row">
					<div class="col">
						<input type="text" class="form-control mb-2" id="Label" name="label"
							   placeholder="{{ strings.label_for_ip }}" />
					</div>
				</div>
				<div class="row">
					<div class="col">
						<button type="submit" class="btn btn-info add" style="border-radius: 0;" name="subbutt"
								title="{{ strings.ip_new }}"><span class="dashicons dashicons-plus"></span>
							{{ strings.ip_new }}
						</button>
					</div>
				</div>
			</form>

		</div>
	</div>

{% endblock %}

{% block section_table %}
	<div class="row insights_widget" id="SectionIpsWhite">
		<div class="col-12">

			<div class="card">
				<div class="card-header">
					<h5 class="card-title">{{ strings.title_whitelist }}</h5>
					<h6 class="card-subtitle text-muted">{{ strings.summary_whitelist }}</h6>
				</div>
				<div class="card-body">

					<div id="TableIpsWhite"></div>

				</div>
			</div>
		</div>
	</div>
{% endblock %}

{% block section_table_js %}
	<script>
		var $oTableIpsWhite = jQuery( '#TableIpsWhite' ).icwpWpsfAjaxTable(
			{
				'ajax_render':{{ ajax.render_table_ip|raw }},
				'req_params': {
					'fLists': [ 'MW' ]
				}
			}
		);
		jQuery( document ).icwpWpsfTableWithFilter(
			{
				'table': $oTableIpsWhite,
				'selector_filter_form': 'form#FilterIpWhite',
			}
		);
		jQuery( '#SectionIpsWhite' ).icwpWpsfTableActions(
			{
				'table': $oTableIpsWhite,
				'ajax_item_delete':{{ ajax.item_delete|raw }},
				'ajax_item_insert':{{ ajax.item_insert|raw }},
				'forms': {
					'insert': jQuery( 'form#NewWhiteIp' )
				}
			}
		);
	</script>
{% endblock %}