{% extends "base.html" %}
{% block content %}
<script src="/inc/waf.js"></script>
{% if manage_rules == '1' %}
	{% from 'include/input_macros.html' import input, checkbox %}
	<table class="overview" id="waf_rules">
		<tr class="overviewHead">
			<td class="padding10 first-collumn">
				Rule name
			</td>
			<td style="width: 100px;">Enabled</td>
			<td>Description</td>
			<td></td>
		</tr>
		{% for r in rules %}
		<tr class="{{ loop.cycle('odd', 'even') }}" id="rule-{{r.id}}">
			<td class="padding10 first-collumn">{{r.rule_name}}</td>
			<td class="checkbox">
				{% set id = 'rule_id-' + r.id|string() %}
				{% if r.en == 1 %}
					{{ checkbox(id, checked='checked') }}
				{% else %}
					{{ checkbox(id) }}
				{% endif %}
			</td>
			<td style="padding-top: 5px;padding-bottom: 10px;">{{r.desc}}</td>
			<td style="padding: 0 10px 0 10px;">
				<a href="waf.py?service={{service}}&waf_rule_id={{r.id}}&serv={{serv}}" class="ui-button ui-widget ui-corner-all" title="View this rule versions">View/Edit</a>
			</td>
		</tr>
		{% endfor %}
	</table>
	<p><span class="add-button" title="Add a new WAF rule" onclick="addNewConfig()" style="margin-right: 20px;">+ Add</span></p><br><br>
	<div id="add-new-config" style="display: none">
		<table class="overview">
			{% include 'include/tr_validate_tips.html' %}
			<tr>
				<td class="padding20">Rule name:<span class="need-field">*</span></td>
				<td>{{ input('new_rule_name', type='text', placeholder='New protected rule', title='New protected rule') }}</td>
			</tr>
			<tr>
				<td class="padding20">Rule description:<span class="need-field">*</span></td>
				<td>{{ input('new_rule_description', type='text', placeholder='This rule protects again attacks', title='This rule protects again attacks') }}</td>
			</tr>
		</table>
	</div>
{% elif waf_rule_file %}
	<center>
		<link rel="stylesheet" href="/inc/codemirror/lib/codemirror.css">
		<link rel="stylesheet" href="/inc/codemirror/addon/dialog/dialog.css">
		<link rel="stylesheet" href="/inc/codemirror/addon/fold/foldgutter.css">
		<script src="/inc/codemirror/lib/codemirror.js"></script>
		<script src="/inc/codemirror/addon/search/search.js"></script>
		<script src="/inc/codemirror/addon/search/searchcursor.js"></script>
		<script src="/inc/codemirror/addon/search/jump-to-line.js"></script>
		<script src="/inc/codemirror/addon/search/matchesonscrollbar.js"></script>
		<script src="/inc/codemirror/addon/search/match-highlighter.js"></script>
		<script src="/inc/codemirror/addon/dialog/dialog.js"></script>
		<script src="/inc/codemirror/addon/edit/matchbrackets.js"></script>
		<script src="/inc/codemirror/addon/edit/closebrackets.js"></script>
		<script src="/inc/codemirror/addon/comment/comment.js"></script>
		<script src="/inc/codemirror/addon/wrap/hardwrap.js"></script>
		<script src="/inc/codemirror/addon/fold/foldcode.js"></script>
		<script src="/inc/codemirror/addon/fold/foldgutter.js"></script>
		<script src="/inc/codemirror/addon/fold/brace-fold.js"></script>
		<script src="/inc/codemirror/addon/fold/comment-fold.js"></script>
		<script src="/inc/codemirror/addon/scroll/annotatescrollbar.js"></script>
		<script src="/inc/codemirror/mode/nginx.js"></script>
		<script src="/inc/codemirror/mode/haproxy.js"></script>
		<script src="/inc/codemirror/keymap/sublime.js"></script>
		<script src="/inc/configshow.js"></script>
			<h4>Config {{waf_rule_file}} from {{ serv }}</h4>
			</center>
			<form action="waf.py" name="saveconfig" id="saveconfig" method="post">
				<input type="hidden" value="{{ serv }}" name="serv">
				<input type="hidden" value="{{ cfg }}.old" name="oldconfig">
				<input type="hidden" value="{{ token }}" name="token">
				<input type="hidden" value="waf_{{ service }}" name="service">
				<input type="hidden" value="{{ config_file_name }}" name="config_file_name">
				<div style="margin-left: 20%;width: 60%;">
					<textarea name="config" id="config_text_area" class="config" rows="35" cols="100">{{ config }}</textarea>
				</div>
				<p>
					<center>
						<a href="waf.py?manage_rules=1&serv={{serv}}" class="ui-button ui-widget ui-corner-all" title="Return to rules management">Back</a>
						{% if role <= 3 %}
						<button type="submit" value="save" name="save" class="btn btn-default" title="Save config without reloading the service">Save</button>
						{% if service == 'haproxy' %}
						<button type="submit" value="" name="" class="btn btn-default">Save and restart</button>
						{% elif service == 'nginx' %}
						<button type="submit" value="" name="reload" class="btn btn-default">Save and reload</button>
						{% endif %}
						{% endif %}
					</center>
				</p>
			</form>
		<style>
		.CodeMirror {
			line-height: 1.2em;
			height: 70%;
		}
		</style>
		<script>
			var myCodeMirror = CodeMirror.fromTextArea(document.getElementById("config_text_area"),
				{
					mode: "modsec",
					lineNumbers: true,
					lineWrapping: true,
					autocapitalize: true,
					autocorrect: true,
					spellcheck: true,
					autoCloseBrackets: true,
					keyMap: "sublime",
					matchBrackets: true,
					foldGutter: true,
					showCursorWhenSelecting: true,
    				gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter", "breakpoints"],
					highlightSelectionMatches: {showToken: /\w/, annotateScrollbar: true}
				});
			myCodeMirror.refresh();
		</script>
{% else %}
	<style>
	.alert-danger {
		width: 450px;
		display: inline-block;
		height: 25px;
		padding-top: 0px;
	}
	</style>
	<script>
		$("#secIntervals").css("display", "none");
		var ip = []
		var hostnamea = []
		{% for s in servers_all %}
		{% if s.15|int() == 1 %}
			ip.push("{{ s[2] }}");
			var host = "{{s[2]}}";
			host = host.replace(/\./g, '\\.');
			hostnamea.push(host);
		{% endif %}
		{% endfor %}

	</script>
	{% if servers_all|length == 0 %}
		{% include 'include/getstarted.html' %}
	{% else %}
	<table class="overview">
		<tr class="overviewHead">
			<td class="padding10 first-collumn">Server</td>
			<td class="padding10">Actions</td>
			<td class="padding10">WAF mode</td>
			{% if service == 'haproxy' %}
			<td>Metrics</td>
			{% endif %}
			<td>Manage rules</td>
			<td>Log</td>
			<td>
				<a onclick="showOverviewWaf(ip, hostnamea)" title="Refresh" style="float: right; margin-right: 25px;">
					<span class="refresh"></span>
				</a>
			</td>
		</tr>
		{% for s in servers_all %}
			<tr class="{{ loop.cycle('odd', 'even') }}" id="{{s[2]}}"></tr>
		{% endfor %}
	</table>
	{% if service == 'haproxy' %}
	<link href="/inc/chart.min.css" rel="stylesheet">
	<script src="/inc/overview.js"></script>
	<script src="/inc/metrics.js"></script>
	<script src="/inc/chart.min.js"></script>
	<div id="table_metrics"></div>
	<div style="padding-left: 25px;float: left;margin-top: 3px;">
		<b>Time range:</b>
		<select title="Choose time range" id="time-range">
			<option value="30">30 minutes</option>
			<option value="60">1 hour</option>
			<option value="180">3 hours</option>
			<option value="360">6 hours</option>
			<option value="720">12 hours</option>
		</select>
	</div>
	<div id="refresh" style="text-align: right;margin-top: 10px;margin-right: 20px; margin-bottom: 10px;" title="Refresh metrics" onclick="showWafMetrics()">
		<span class="refresh"></span>
	</div>
	{% for s in servers %}
	<div class="chart-container">
		<canvas id="waf_{{s.server.ip}}" role="img"></canvas>
	</div>
	{% endfor %}
	{% endif %}
	<div id="dialog-confirm" style="display: none;">
		<p><span class="ui-icon ui-icon-alert" style="float:left; margin:3px 12px 20px 0;"></span>Are you sure?</p>
	</div>
	{% for s in servers %}
		{{s.ip}}
	{% endfor %}
	<script>
		{%- if service == 'haproxy' %}
		function showWafMetrics() {
			{%- for s in servers %}
				getWafChartData('{{s.server.ip}}');
			{%- endfor %}
		}
		showWafMetrics();
		{%- endif %}
		showOverviewWaf(ip, hostnamea);
		$( function() {
			$("#time-range").on('selectmenuchange', function () {
				removeData()
				let metrics = new Promise(
					(resolve, reject) => {
						{%- for s in servers %}
							getWafChartData('{{s.server.ip}}')
						{%- endfor %}
					});
				metrics.then();
			});
		});
	</script>
	<div class="add-note addName alert-info" style="width: inherit; margin-right: 15px; clear: both;">
		Read the description and watch a video about WAF <a href="https://roxy-wi.org/description/waf" class="link" title="WAF" target="_blank">here</a>
	</div>
	{% endif %}
{% endif %}
{% endblock %}