{% extends '/wpadmin_pages/insights/ips/ips_base.twig' %}

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

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

					<form class="form-inline m-0 add-ip" id="NewBlackIp" action="#" method="post" autocomplete="off">
						<input type="hidden" name="list" value="MB" />
						<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"
									{% if flags.can_blacklist %}
										placeholder="{{ strings.enter_ip_block }}"
									{% else %}
										readonly
										placeholder="{{ strings.pro_only_feature }}"
									{% endif %}
							/>
							<div class="input-group-append">
								<button type="submit" class="btn btn-warning add" style="border-radius: 0;"
										name="subbutt"
										{% if flags.can_blacklist %}
											title="{{ strings.ip_block }}"
										{% else %}
											disabled="disabled"
											title="Manual IP Blocking Is A Pro Feature"
										{% endif %}
										><span class="dashicons dashicons-plus"></span>
									<span>{{ strings.ip_block }}</span></button>
							</div>
						</div>
					</form>

					<div id="TableIpsBlack"></div>
				</div>
				<div class="card-footer">
					{{ strings.trans_limit|raw }}
					<br />{{ strings.auto_expire|raw }}
				</div>
			</div>
		</div>
	</div>
{% endblock %}

{% block section_table_js %}
	<script>
		var $oTableIpsBlack = jQuery( '#TableIpsBlack' ).icwpWpsfAjaxTable(
			{
				'ajax_render':{{ ajax.render_table_ip|raw }},
				'req_params': {
					'fLists': [ 'AB', 'MB' ]
				}
			}
		);
		jQuery( '#SectionIpsBlack' ).icwpWpsfTableActions(
			{
				'table': $oTableIpsBlack,
				'ajax_item_delete':{{ ajax.item_delete|raw }},
				'ajax_item_insert':{{ ajax.item_insert|raw }},
				'forms': {
					'insert': jQuery( 'form#NewBlackIp' )
				}
			}
		);
	</script>
{% endblock %}