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

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

		<div class="col-6 mt-3">
			<h5><label for="_fIpBlack" class="form-label">{{ strings.ip_filter }}</label></h5>
			<form class="mb-3" id="FilterIpBlack" action="#" method="post" autocomplete="off">
				<input type="hidden" name="fLists[]" value="MB" />
				<input type="hidden" name="fLists[]" value="AB" />
				<div class="row">
					<div class="col mb-2">
						<select id="_fIpBlack" name="fIp"
								class="select2picker static form-control"
								style="width: 100%">
							<option value="">-- {{ strings.select }} --</option>
							{% for unique_ip in vars.unique_ips_black %}
								<option value="{{ unique_ip }}">{{ unique_ip }}</option>
							{% endfor %}
						</select>
					</div>
				</div>
				<div class="row">
					<div class="col">
						<input id="SubmitForm" 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_block }}</h5>
			<form class="mb-3 add-ip" id="NewBlackIp" action="#" method="post" autocomplete="off">
				<input type="hidden" name="list" value="MB" />
				<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="IpAddressNew" name="ip"
								{% if flags.can_blacklist %}
									placeholder="{{ strings.enter_ip_block }}"
								{% else %}
									readonly
									placeholder="{{ strings.pro_only_feature }}"
								{% endif %}
						/>
					</div>
				</div>
				<div class="row">
					<div class="col">
						<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>
	</div>

{% endblock %}

{% 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 font-weight-normal">
						{{ strings.trans_limit|raw }}
						<br/>{{ strings.auto_expire|raw }}
					</h6>
				</div>
				<div class="card-body">
					<div id="TableIpsBlack"></div>
				</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( document ).icwpWpsfTableWithFilter(
			{
				'table': $oTableIpsBlack,
				'selector_filter_form': 'form#FilterIpBlack',
			}
		);
		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 %}