{% 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">
					<form class="form-inline m-0 add-ip" id="NewWhiteIp" action="#" method="post" autocomplete="off">
						<input type="hidden" name="list" value="MW" />
						<label class="sr-only" for="IpAddress">{{ strings.ip_address }}</label>
						<div class="input-group w-100">
							<div class="input-group-prepend">
								<div class="input-group-text" style="border-radius: 0">{{ strings.ip_new }}:</div>
							</div>
							<input type="text" class="form-control" id="IpAddress" name="ip"
								   placeholder="{{ strings.enter_ip_white }}" />
							<input type="text" class="form-control" id="Label" name="label"
								   placeholder="{{ strings.label_for_ip }}" />
							<div class="input-group-append">
								<button type="submit" class="btn btn-info add" style="border-radius: 0;" name="subbutt"
										title="{{ strings.ip_new }}"><span class="dashicons dashicons-plus"></span></button>
							</div>
						</div>
					</form>

					<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( '#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 %}