{% extends "base.html" %}
{% block title %}{{lang.menu_links.add_proxy.title}}{% endblock %}
{% block h2 %}{{lang.menu_links.add_proxy.title}}{% endblock %}
{% block content %}
{% from 'include/input_macros.html' import input, checkbox, select %}
{% set balance_params = dict() %}
{% set balance_params = {'roundrobin':'roundrobin','source':'source','leastconn':'leastconn','first':'first',
'rdp-cookie':'rdp-cookie', 'uri':'uri', 'uri whole':'uri whole', 'static-rr': 'static-rr',
'url_param userid':'url_param userid'} %}
{% set checks = dict() %}
{% set checks = {'':'Choose a custom health check','option tcp-check':'Check a TCP Port',
'option ssl-hello-chk':'Check a SSL Port','option httpchk':'Check a HTTP service',
'option ldap-check':'Check a LDAP service', 'option mysql-check':'Check a MySql Service',
'option pgsql-check':'Check a PgSQL Service', 'option redis-check': 'Check a Redis Service',
'option smtpchk':'Check a SMTP service'} %}
{% set observe = {'layer7':'layer7', 'layer4': 'layer4'} %}
{% set on_error = {'mark-down':'mark-down', 'fastinter': 'fastinter', 'fail-check':'fail-check',
'sudden-death':'sudden-death'} %}
{% set header_res = {'http-response': 'response', 'http-request': 'request'} %}
{% set header_params = {'add-header': 'add-header', 'set-header': 'set-header', 'del-header': 'del-header'} %}
{% set if_values = {'1':'Host name starts with','2':'Host name ends with','3':'Path starts with','4':'Path ends with', '6': 'Src ip'} %}

<script src="/inc/add.js"></script>
<div id="tabs">
	<ul>
		<li><a href="#create" title="{{lang.words.add|title()}} {{lang.words.proxy}}: {{lang.words.create|title()}} {{lang.words.proxy}} - Roxy-WI">{{lang.words.create|title()}} {{lang.words.proxy}}</a></li>
		<li><a href="#listen" title="{{lang.words.add|title()}} {{lang.words.proxy}}: {{lang.words.create|title()}} {{lang.words.listener|title()}} - Roxy-WI">{{lang.words.listener|title()}}</a></li>
		<li><a href="#frontend" title="{{lang.words.add|title()}} {{lang.words.proxy}}: {{lang.words.create|title()}} {{lang.words.frontend|title()}} - Roxy-WI">{{lang.words.frontend|title()}}</a></li>
		<li><a href="#backend" title="{{lang.words.add|title()}} {{lang.words.proxy}}: {{lang.words.create|title()}} {{lang.words.backend|title()}} - Roxy-WI">{{lang.words.backend|title()}}</a></li>
		<li><a href="#ssl" title="{{lang.words.add|title()}} {{lang.words.proxy}}: {{lang.words.upload|title()}} SSL {{lang.words.certs}} - Roxy-WI">SSL {{lang.words.certs}}</a></li>
		<li><a href="#option" title="{{lang.words.add|title()}} {{lang.words.proxy}}: {{lang.words.params|title()}} {{lang.words.templates}} - Roxy-WI">{{lang.words.params|title()}}</a></li>
		<li><a href="#add-servers" title="{{lang.words.add|title()}} {{lang.words.proxy}}: {{lang.words.servers|title()}} {{lang.words.templates}} - Roxy-WI">{{lang.words.servers|title()}}</a></li>
		<li><a href="#userlist" title="{{lang.words.add|title()}} {{lang.words.proxy}}: {{lang.words.create|title()}} {{lang.words.userlists|title()}} - Roxy-WI">{{lang.words.userlists|title()}}</a></li>
		<li><a href="#peers" title="{{lang.words.add|title()}} {{lang.words.proxy}}: {{lang.words.create|title()}} peers - Roxy-WI">Peers</a></li>
		<li><a href="#lists" title="{{lang.words.add|title()}} {{lang.words.proxy}}: {{lang.words.create|title()}} {{lang.words.and}} {{lang.words.upload}} {{lang.words.whitelists}} {{lang.words.or}} {{lang.words.blacklists}} - Roxy-WI">{{lang.words.lists|title()}}</a></li>
		<li><a href="#maps" title="{{lang.words.add|title()}} {{lang.words.proxy}}: {{lang.words.create|title()}} {{lang.words.and}} {{lang.words.upload}} {{lang.words.maps}} - Roxy-WI">{{lang.words.maps|title()}}</a></li>
	</ul>
	<ul id='browse_histroy'></ul>
	{% include 'include/add_proxy.html' %}
	<div id="listen">
		<form name="add-listener" id="add-listener" action="/app/add/haproxy/add" method="post">
			<table class="add-table">
				<caption><h3>{{lang.words.add|title()}} {{lang.words.listener}}</h3></caption>
				<tr>
					<td class="addName">{{lang.words.select|title()}} {{lang.words.w_a}} {{lang.words.server}}: </td>
					<td class="addOption">
						<select required name="serv" id="serv">
							<option disabled selected>------</option>
							{% for select in selects %}
								<option value="{{ select.2 }}">{{ select.1 }}</option>
							{% endfor %}
						</select>
						<div class="tooltip tooltipTop"><b>{{lang.words.note|title()}}:</b> {{lang.phrases.master_slave}}</div>
					</td>
					<td rowspan="5" class="add-note addName alert-info">
						{{lang.add_page.desc.listener_desc1}}
						<br /><br />
						{{lang.add_page.desc.listener_desc2}}
						<br /><br />
						{{lang.add_page.desc.listener_desc3}}
					</td>
				</tr>
				<tr>
					<td class="addName">{{lang.words.name|title()}}:</td>
					<td class="addOption">
						{{ input('name', name='listener', title=lang.words.name|title() + ' ' +lang.words.listener, placeholder="web_80", required='required') }}
					</td>
				</tr>
				<tr>
					<td class="addName">IP and {{lang.words.port|title()}}:</td>
					<td class="addOption">
						{{ input('ip', placeholder="Any", size='15') }}<b>:</b>
						{{ input('listen-port', name='port', title=lang.add_page.desc.port_for_bind + ' ' + lang.words.listener, placeholder="8080", size='5', required='required') }}
						<div id="listener_bind" style="display: none"></div>
						<a class="link add-server" id="add_bind_listener" title="{{lang.add_page.desc.bind_ip_pair}}"></a>
						<div class="tooltip tooltipTop">
							{{lang.add_page.desc.ip_port}}
						</div>
					</td>
				</tr>
				<tr class="advance">
					<td class="addName">{{lang.words.mode|title()}}: </td>
					<td class="addOption">
						{% set values = dict() %}
						{% set values = {'http':'http','tcp':'tcp'} %}
						{{ select('listen-mode-select', name='mode', values=values, selected='http', required='required', class='force_close') }}
						<span id="https-listen-span">
							<label for="https-listen" style="margin-top: 5px;" title="{{lang.words.enable|title()}} SSL Offloading" data-help="{{lang.add_page.desc.ssl_offloading}}">SSL Offloading</label>
							<input type="checkbox" id="https-listen" name="ssl" value="https" >
						</span>
						<div id="https-hide-listen" style="display: none;">
							<br /><span class="tooltip tooltipTop">{{lang.words.enter2|title()}} {{lang.words.name}} {{lang.words.of}} pem {{lang.words.file2}}, {{lang.add_page.desc.press_down}}:</span><br />
							{{ input('path-cert-listen', name="cert", placeholder="some_cert.pem", size='39') }}<br />
							<label for="ssl-dis-check-listen" style="margin-top: 5px;">{{lang.add_page.buttons.disable_ssl_check}}</label><input type="checkbox" id="ssl-dis-check-listen" name="ssl-dis-check" value="ssl-dis-check">
							<label for="ssl-check-listen" style="margin-top: 5px;">{{lang.add_page.buttons.disable_ssl_verify}}</label><input type="checkbox" id="ssl-check-listen" name="ssl-check" value="ssl-check" checked>
						</div>
					</td>
				</tr>
				<tr class="advance">
					<td class="addName">Maxconn: </td>
					<td class="addOption">
						{{ input('maxconn', value='2000', type="number", title=lang.add_page.desc.maxconn_fix, size='5', required='required') }}
						<div class="tooltip tooltipTop">{{lang.add_page.desc.maxconn_desc}}: 2000</div>
					</td>
				</tr>
				<tr class="advance">
					<td class="addName">{{lang.words.balance|title()}}: </td>
						<td class="addOption">
							{{ select('balance', values=balance_params, selected='roundrobin', required='required', class='force_close') }}
						</td>
				</tr>
				<tr class="advance">
					<td class="addName">{{lang.words.health|title()}} {{lang.words.check}}: </td>
					<td class="addOption">
						{{ select('listener_checks', name='health_check', values=checks, selected='', class='force_close') }}
						<span id="listener_checks_note" class="tooltip tooltipTop"></span>
						<br />
						<span id="listener_checks_http" style="display: none;">
							URI path for checking: {{ input('listener_checks_http_path', name='checks_http_path', value='/',  title="URI for checking e.g. /check") }}
							Domain name: {{ input('listener_checks_http_domain', name='checks_http_domain', placeholder='domain.com',  title="Domain name for checking e.g. domain.com") }}
						</span>
					</td>
				</tr>
				<tr class="advance">
					<td class="addName">{{lang.words.headers|title()}}: </td>
					<td class="addOption">
						<span title="{{lang.words.add|title()}} {{lang.words.headers}}" id="add_listener_header" class="link add-server"></span>
						<div id="listener_header_div" style="display: none;">
							<p style="border-bottom: 1px solid #ddd; padding-bottom: 10px;" id="listener_header_p">
								{{ select('listener_header_res_method', name='headers_res', values=header_res, first='------', class='force_close') }}
								{{ select('listener_header_method', name='headers_method', values=header_params, selected='add-header', class='force_close') }}
								<b class="padding10">{{lang.words.name}}</b>
								{{ input('listener_header_name', name="header_name") }}
								<b class="padding10">{{lang.words.value}}</b>
								{{ input('listener_header_value', name="header_value", placeholder='Leave blank if using del-header') }}
								<span class="minus minus-style" onclick="deleteId('listener_header_p')" title="{{lang.words.delete|title()}}"></span>
							</p>
						</div>
						<span>
							<a class="link add-server" id="listener_add_header" title="{{lang.words.add|title()}} {{lang.words.headers}}" style="display: none;"></a>
						</span>
					</td>
				</tr>
				<tr class="advance">
					<td class="addName" title="Access control list">ACL: </td>
					<td class="addOption">
						<span title="{{lang.words.add|title()}} ACL" id="add_listener_acl" class="link add-server"></span>
						<div id="listener_acl" style="display: none;">
							<p style="border-bottom: 1px solid #ddd; padding-bottom: 10px;" id="listener_acl_rule">
								<b class="padding10">{{lang.words.if|title()}}</b>
								{{ select('listener_acl_if', name='acl_if', values=if_values, first='Select if', class='force_close', disabled=false) }}
								<b class="padding10">{{lang.words.value}}</b>
								{{ input('listener_acl_value', name="acl_value") }}
								<b class="padding10">{{lang.words.then}}</b>
								{% set values = dict() %}
								{% set values = {'2':'Redirect to','3':'Allow','4':'Deny', '6': 'Return', '7': 'Set-header'} %}
								{{ select('listener_acl_then', name='acl_then', values=values, first='Select then', class='force_close', disabled=false) }}
								<b class="padding10">{{lang.words.value}}</b>
								{{ input('listener_acl_then_value', name='acl_then_value', title="Required if \'then\' is \'Use backend\' or \'Redirect\', \'Return\', or \'Set-header\'") }}
								<span class="minus minus-style" onclick="deleteId('listener_acl_rule')" title="{{lang.words.delete|title()}} {{lang.words.this}} ACL"></span>
							</p>
						</div>
						<span>
							<a class="link add-server" id="listener_add_acl" title="{{lang.words.add|title()}} ACL" style="cursor: pointer; display: none;"></a>
						</span>
					</td>
				</tr>
				<tr class="advance">
					<td class="addName"><span title="Cache support start 1.8 and latter" class="help_cursor">Web {{lang.words.acceleration}}:</span></td>
					<td class="addOption">
						<span class="controlgroup">
							{{ checkbox('compression', title=lang.add_page.desc.http_compression, value='1', desc=lang.words.compression|title()) }}
							{{ checkbox('cache', title=lang.words.enable|title()+' '+lang.words.cache, value='2', desc=lang.words.cache|title()) }}
							{{ checkbox('ssl_offloading', title=lang.add_page.desc.http_https, desc='HTTP->HTTPS') }}
						</span>
					</td>
				</tr>
				<tr class="advance">
					<td class="addName"><span title="Web application firewall" class="help_cursor">WAF:</span></td>
					<td class="addOption">
						<span class="controlgroup">
							{{ checkbox('slow_atack', title=lang.add_page.desc.slow_attack,
							desc='Slow attack') }}
							{{ checkbox('ddos', title='DDOS attack protect', desc='DDOS') }}
							{{ checkbox('whitelist_checkbox', title=lang.words.enable|title()+' '+ lang.words.whitelist, desc=lang.words.whitelist|title()) }}
							{{ checkbox('blacklist_checkbox', title=lang.words.enable|title()+' '+ lang.words.blacklist, desc=lang.words.blacklist|title()) }}
							{{ checkbox('waf', title='Web application firewall', desc='WAF', value='1') }}
							{{ checkbox('antibot', title=lang.add_page.desc.antibot, desc='Antibot', value='1') }}
						</span>
						<div id="blacklist-hide" style="display: none;">
							<br /><span class="tooltip tooltipTop">{{lang.words.enter2|title()}} {{lang.words.w_a}} {{lang.words.blacklist}} {{lang.words.name}}, {{lang.add_page.desc.press_down}}:</span><br />
							{{ input('blacklist-hide-input', size='39', name="blacklist", placeholder="blacklist.lst") }}
						</div>
						<div id="whitelist-hide" style="display: none;">
							<br /><span class="tooltip tooltipTop">{{lang.words.enter2|title()}} {{lang.words.w_a}} {{lang.words.whitelist}} {{lang.words.name}}, {{lang.add_page.desc.press_down}}:</span><br />
							{{ input('whitelist-hide-input', size='39', name="whitelist", placeholder="whitelist.lst") }}
						</div>
					</td>
				</tr>
				<tr class="advance">
					<td class="addName">{{lang.words.options|title()}}:</td>
					<td class="addOption">
						<span class="controlgroup">
							{{ checkbox('forward_for', title=lang.add_page.desc.forward_for, desc='Forward for') }}
							{{ checkbox('redispatch', title=lang.add_page.desc.redispatch, desc='Redispatch') }}
							{% set values = dict() %}
							{% set values = {'Off':'Off','Server only':'Server only','Force close':'Force close','Pretend keep alive':'Pretend keep alive'} %}
							{{ select('force_close', values=values, first='Force HTTP close', title=lang.add_page.desc.force_close, class='force_close') }}
							{{ checkbox('cookie', title=lang.add_page.desc.cookie, desc=lang.words.set|title()+' cookie', value='1') }}
							{{ checkbox('options-listen-show', title=lang.add_page.buttons.set_options_m, desc=lang.add_page.buttons.set_options) }}
						</span>
						<br>
						<span id="cookie_div" style="display: none;">
							<input type="text" placeholder="name" name="cookie_name" id="cookie_name" class="form-control"><br><br>
							<input type="text" placeholder="domain" name="cookie_domain" class="form-control"><br><br>
							<span class="controlgroup">
								{% set values = dict() %}
								{% set values = {'None':'None','rewrite':'rewrite','indirect':'indirect','insert':'insert'} %}
								{{ select('rewrite', values=values, first='rewrite/indirect/insert', class='force_close') }}
								{{ checkbox('prefix', title=lang.add_page.desc.c_prefix, desc='prefix', value='prefix') }}
								{{ checkbox('nocache', title=lang.add_page.desc.c_nocache, desc='nocache', value='nocache') }}
								{{ checkbox('postonly', title=lang.add_page.desc.c_postonly, desc='postonly', value='postonly') }}
								{{ checkbox('dynamic', title=lang.add_page.desc.c_dynamic, desc='dynamic', value='dynamic') }}
								<span id="dynamic_div" style="display: none;">
									dynamic-cookie-key: {{ input('dynamic-cookie-key', placeholder="your-custom-key") }}
								</span>
							</span>
						</span>
						<div id="options-listen-show-div" style="display: none;">
							<div class="tooltip">
								<span style="padding-right: 10px;">{{lang.words.start2|title()}} {{lang.words.typing}} {{lang.words.options}}: </span>
								{{ input('options') }}
								<span style="padding-left: 10px;">
									{{lang.add_page.desc.press_down}}. <a href="http://cbonte.github.io/haproxy-dconv/1.7/configuration.html" target="_blanck" style="color: #23527c" title="HAProxy docs">{{lang.words.read|title()}} {{lang.words.more}} {{lang.words.about}} {{lang.words.options}}</a>
								</span>
								<br />
								<span style="padding-right: 10px;">{{lang.words.start2|title()}} {{lang.words.typing}} {{lang.words.saved}} {{lang.words.options}}: </span>
								{{ input('saved-options') }}
									{{lang.add_page.desc.saved_options}}
							</div>
							<textarea name="option" title="Options thru" id="optionsInput" cols=80 rows=5 placeholder="acl test hdr_beg(host) -i some_host"></textarea>
						</div>
					</td>
				</tr>
				<tr>
					<td class="addName">{{lang.words.servers|title()}}:</td>
					<td class="addOption">
						{% include 'include/add_servers.html' %}
						<br>
						<br>
						{{ checkbox('template-listen', name='template', title=lang.add_page.desc.server_template, value='template', desc=lang.add_page.desc.server_template) }}
					</td>
				</tr>
				<tr class="advance">
					<td class="addName">{{lang.words.check|title()}}:</td>
					<td class="addOption">
						<div>
							<label for="controlgroup-listen-show" style="margin-top: 5px;" title="Set custom check parameters">{{lang.words.custom|title()}} {{lang.words.check}} {{lang.words.params}}</label>
							<input type="checkbox" id="controlgroup-listen-show" name="default-check" value="1">
							<span class="tooltip tooltipTop">{{lang.add_page.desc.def_check}}: inter 2000 rise 2 fall 5</span>
						</div>
						<div class="controlgroup" id="controlgroup-listen" style="display: none;">
							<label for="check-servers-listen" title="Ebable servers check">{{lang.words.check|title()}}</label>
							<input type="checkbox" id="check-servers-listen" name="check-servers" checked value="1">
							{% set values = dict() %}
							{% set values = {'1000':'1000','2000':'2000','3000':'3000'} %}
							{{ select('inter-listen', values=values, first='inter', class='force_close') }}
							{% set values = dict() %}
							{% set values = {'1':'1','2':'2','3':'3'} %}
							{{ select('rise-listen', name='rise', values=values, first='rise', class='force_close') }}
							{% set values = dict() %}
							{% set values = {'4':'4','5':'5','6':'6'} %}
							{{ select('fall-listen', name='fall', values=values, first='fall', class='force_close') }}
						</div>
						<div style="display: block">
							{{ checkbox('circuit_breaking_listen', name="circuit_breaking", desc='Circuit Breaking', title=lang.add_page.desc.circuit_breaking,  value='1') }}
						</div>
						<div id="circuit_breaking_listen_div" style="display: none">
							Observe:
							{{ select('circuit_breaking_observe', values=observe, class='force_close') }}
							error-limit: {{ input('circuit_breaking_error_limit', type='number', value='50', style='width: 50px;') }}
							on-error:
							{{ select('circuit_breaking_on_error', values=on_error, class='force_close') }}
							<div class="tooltip tooltipTop">{{lang.words.read|title()}} {{lang.words.more}} {{lang.words.about}} Circuit Breaking <a href="https://roxy-wi.org/description/circuit-breaking" title="Circuit Breaking" target="_blank">{{lang.words.here}}</a></div>
						</div>
					</td>
				</tr>
				<tr class="advance-show">
					<td class="addOption" colspan="2">
						<button title="{{lang.add_page.buttons.show_full_settings}}" class="row-down advance-show-button">{{lang.words.show|title()}} {{lang.words.advanced}} {{lang.words.settings}}</button>
						<button title="{{lang.add_page.buttons.hide_full_settings}}" class="row-up advance-hide-button" style="display: none">{{lang.words.hide|title()}} {{lang.words.advanced}} {{lang.words.settings}}</button>
					</td>
				</tr>
				<tr>
					<td class="addButton">
						<a class="ui-button ui-widget ui-corner-all" title="{{lang.words.add|title()}} {{lang.words.listener|title()}}" onclick="addProxy('add-listener')">{{lang.words.add|title()}} {{lang.words.linstener|title()}}</a>
					</td>
					<td class="addButton">
						<a class="ui-button ui-widget ui-corner-all" title="{{lang.words.generate|title()}} {{lang.words.and}} {{lang.words.display}} {{lang.words.config}}" onclick="generateConfig('add-listener')">{{lang.words.generate|title()}} {{lang.words.config}}</a>
					</td>
				</tr>
			</table>
		</form>
	</div>

		<!-- Second tabs -->

	<div id="frontend">
		<form name="add-frontend" id="add-frontend" action="/app/add.py" method="post">
		<table>
			<caption><h3>{{lang.words.add|title()}} {{lang.words.frontend}}</h3></caption>
			<tr>
				<td class="addName">{{lang.words.select|title()}} {{lang.words.w_a}} {{lang.words.server}}: </td>
				<td class="addOption">
					<select required name="serv" id="serv2">
						<option disabled selected>------</option>
						{% for select in selects %}
							<option value="{{ select.2 }}">{{ select.1 }}</option>
						{% endfor %}
					</select>
					<div class="tooltip tooltipTop"><b>{{lang.words.note|title()}}:</b> {{lang.phrases.master_slave}}</div>
				</td>
				<td rowspan="5" class="add-note addName alert-info">
						{{lang.add_page.desc.front_desc1}}
						<br /><br />
						{{lang.add_page.desc.listener_desc2}}
						<br /><br />
						{{lang.add_page.desc.listener_desc1}}
				</td>
			</tr>
			<tr>
				<td class="addName">{{lang.words.name|title()}}:</td>
				<td class="addOption">
					<input type="text" name="frontend" id="new_frontend" required title="{{lang.words.name|title()}} {{lang.words.frontend}}"  placeholder="web_80" class="form-control">
				</td>
			</tr>
			<tr>
				<td class="addName">IP and {{lang.words.port|title()}}:</td>
				<td class="addOption">
					<input type="text" name="ip" id="ip1" size="15" placeholder="Any" class="form-control"><b>:</b>
					<input type="text" name="port" size="5" required title="{{lang.add_page.desc.port_for_bind}} {{lang.words.frontend}}" placeholder="8080" class="form-control">
					<div id="frontend_bind" style="display: none"></div>
					<a class="link add-server" id="add_bind_frontend" title="{{lang.add_page.desc.bind_ip_pair}}"></a>
					<div class="tooltip tooltipTop">
						{{lang.add_page.desc.ip_port}}
					</div>
				</td>
			</tr>
			<tr class="advance">
				<td class="addName">{{lang.words.mode|title()}}: </td>
				<td class="addOption">
					{% set values = dict() %}
					{% set values = {'http':'http','tcp':'tcp'} %}
					{{ select('frontend-mode-select', name='mode', values=values, selected='http', required='required', class='force_close') }}
					<span id="https-frontend-span">
						{{ checkbox('https-frontend', title=lang.add_page.desc.ssl_offloading, desc='SSL Offloading') }}

					</span>
					<div id="https-hide-frontend" style="display: none;">
						<br /><span class="tooltip tooltipTop">{{lang.words.enter2|title()}} {{lang.words.name}} {{lang.words.of}} pem {{lang.words.file2}}, {{lang.add_page.desc.press_down}}:</span><br />
						{{ input('path-cert-frontend', name="cert", placeholder="some_cert.pem", size='39') }}
					</div>
				</td>
			</tr>
			<tr class="advance">
				<td class="addName">Maxconn: </td>
				<td class="addOption">
					{{ input('maxconn', value='2000', type="number", title=lang.add_page.desc.maxconn_fix, size='5', required='required') }}
					<div class="tooltip tooltipTop">{{lang.add_page.desc.maxconn_desc}}: 2000</div>
				</td>
			</tr>
			<tr class="advance">
				<td class="addName">{{lang.words.headers|title()}}: </td>
				<td class="addOption">
					<span title="{{lang.words.add|title()}} {{lang.words.headers}}" id="add_frontend_header" class="link add-server"></span>
					<div id="frontend_header_div" style="display: none;">
						<p style="border-bottom: 1px solid #ddd; padding-bottom: 10px;" id="frontend_header_p">
							{{ select('frontend_header_res_method', name='headers_res', values=header_res, first='------', class='force_close') }}
							{{ select('frontend_header_method', name='headers_method', values=header_params, selected='add-header', class='force_close') }}
							<b class="padding10">{{lang.words.name}}</b>
							{{ input('frontend_header_name', name="header_name") }}
							<b class="padding10">{{lang.words.value}}</b>
							{{ input('frontend_header_value', name="header_value", placeholder='Leave blank if using del-header') }}
							<span class="minus minus-style" onclick="deleteId('frontend_header_p')" title="{{lang.words.delete|title()}}"></span>
						</p>
					</div>
					<span>
						<a class="link add-server" id="frontend_add_header" title="{{lang.words.add|title()}} {{lang.words.headers}}" style="display: none;"></a>
					</span>
				</td>
			</tr>
			<tr class="advance">
				<td class="addName" title="Access control list">ACL: </td>
				<td class="addOption">
					<span title="{{lang.words.add|title()}} ACL" id="add_frontend_acl" class="link add-server"></span>
					<div id="frontend_acl" style="display: none;">
						<p id="frontend_acl_rule" style="border-bottom: 1px solid #ddd; padding-bottom: 10px;">
							<b class="padding10">if</b>
							{{ select('frontend_acl_if', name='acl_if', values=if_values, first='Select if', class='force_close', disabled=false) }}
							<b class="padding10">value</b>
							{{ input('frontend_acl_value', name='acl_value') }}
							<b class="padding10">then</b>
							{% set values = dict() %}
							{% set values = {'5':'Use backend','2':'Redirect to','3':'Allow','4':'Deny', '6': 'Return', '7': 'Set-header'} %}
							{{ select('frontend_acl_then', name='acl_then', values=values, first='Select then', class='force_close', disabled=false) }}
							<b class="padding10">value</b>
							{{ input('frontend_acl_then_value', name='acl_then_value', title="Required if \'then\' is \'Use backend\' or \'Redirect\', \'Return\', or \'Set-header\'") }}
							<span class="minus minus-style" onclick="deleteId('frontend_acl_rule')" title="{{lang.words.delete|title()}}"></span>
						</p>
					</div>
					<span>
						<a class="link add-server" id="frontend_add_acl" title="{{lang.words.add|title()}} ACL" style="cursor: pointer; display: none;"></a>
					</span>
				</td>
			</tr>
			<tr class="advance">
				<td class="addName"><span title="Cache support start 1.8 and latter" class="help_cursor">Web {{lang.words.acceleration}}:</span></td>
				<td class="addOption">
					<span class="controlgroup">
						{{ checkbox('compression2', name="compression", title=lang.add_page.desc.http_compression, value='1', desc=lang.words.compression|title()) }}
						{{ checkbox('cache2', name="cache", title=lang.words.enable|title()+' '+lang.words.cache, value='2', desc=lang.words.cache|title()) }}
						{{ checkbox('ssl_offloading1', title=lang.add_page.desc.http_https, desc='HTTP->HTTPS') }}
					</span>
				</td>
			</tr>
			<tr class="advance">
				<td class="addName"><span title="Web application firewall" class="help_cursor">WAF:</span></td>
				<td class="addOption">
					<span class="controlgroup">
						{{ checkbox('slow_atack1', title=lang.add_page.desc.slow_attack,
						desc='Slow attack') }}
						{{ checkbox('ddos1', title='DDOS attack protect', desc='DDOS') }}
						{{ checkbox('whitelist_checkbox1', title=lang.words.enable|title()+' '+ lang.words.whitelist, desc=lang.words.whitelist|title())  }}
						{{ checkbox('blacklist_checkbox1', title=lang.words.enable|title()+' '+ lang.words.blacklist, desc=lang.words.blacklist|title()) }}
						{{ checkbox('waf2', name='waf', title='Web application firewall', desc='WAF', value='1') }}
						{{ checkbox('antibot1', title=lang.add_page.desc.antibot, desc='Antibot', value='1') }}
					</span>
					<div id="blacklist-hide1" style="display: none;">
						<br /><span class="tooltip tooltipTop">{{lang.words.enter2|title()}} {{lang.words.w_a}} {{lang.words.blacklist}} {{lang.words.name}}, {{lang.add_page.desc.press_down}}:</span><br />
						{{ input('blacklist-hide-input1', size='39', name="blacklist", placeholder="blacklist.lst") }}
					</div>
					<div id="whitelist-hide1" style="display: none;">
						<br /><span class="tooltip tooltipTop">{{lang.words.enter2|title()}} {{lang.words.w_a}} {{lang.words.whitelist}} {{lang.words.name}}, {{lang.add_page.desc.press_down}}:</span><br />
						{{ input('whitelist-hide-input1', size='39', name="whitelist", placeholder="whitelist.lst") }}
					</div>
				</td>
			</tr>
			<tr class="advance">
				<td class="addName">{{lang.words.options|title()}}:</td>
				<td class="addOption">
					<span class="controlgroup">
						{{ checkbox('forward_for1', title=lang.add_page.desc.forward_for,
						desc='Forward for') }}
						{% set values = dict() %}
						{% set values = {'Off':'Off','Server only':'Server only','Force close':'Force close','Pretend keep alive':'Pretend keep alive'} %}
						{{ select('force_close', values=values, first='Force HTTP close', title=lang.add_page.desc.force_close, class='force_close') }}
						{{ checkbox('options-frontend-show', title=lang.add_page.buttons.set_options_m, desc=lang.add_page.buttons.set_options) }}
					</span>
					<div id="options-frontend-show-div" style="display: none;">
						<div style="font-size: 12px; padding-bottom: 10px;">
							<span style="padding-right: 10px;">{{lang.words.start2|title()}} {{lang.words.typing}} {{lang.words.options}}: </span>
							{{ input('options1') }}
							<span style="padding-left: 10px;">
									{{lang.add_page.desc.press_down}}. <a href="http://cbonte.github.io/haproxy-dconv/1.7/configuration.html" target="_blanck" style="color: #23527c" title="HAProxy docs">{{lang.words.read|title()}} {{lang.words.more}} {{lang.words.about}} {{lang.words.options}}</a>
							</span>
							<br />
							<span style="padding-right: 10px;">{{lang.words.start2|title()}} {{lang.words.typing}} {{lang.words.saved}} {{lang.words.options}}:</span>
							{{ input('saved-options1') }}
								{{lang.add_page.desc.saved_options}}
						</div>
						<textarea name="option" title="Options thru" cols=80 rows=5 id="optionsInput1" placeholder="acl test hdr_beg(host) -i some_host"></textarea>
					</div>
				</td>
			</tr>
			<tr>
				<td class="addName">{{lang.words.default_backend}}</td>
				<td class="addOption">
					{{ input('backends', name='backends', placeholder="some_backend", size='30', title=lang.add_page.desc.no_def_backend) }}
					<div class="tooltip tooltipTop">
						<b>{{lang.words.note|title()}}</b>: {{lang.add_page.desc.def_backend}}, <span title="{{lang.words.create|title()}} {{lang.words.backend}}" class="redirectBackend link">{{lang.add_page.desc.def_backend_exit}}</span>.
					</div>
				</td>
			</tr>
			<tr class="advance-show">
				<td class="addOption" colspan="2">
					<button title="{{lang.add_page.buttons.show_full_settings}}" class="row-down advance-show-button">{{lang.words.show|title()}} {{lang.words.advanced}} {{lang.words.settings}}</button>
					<button title="{{lang.add_page.buttons.hide_full_settings}}" class="row-up advance-hide-button" style="display: none">{{lang.words.hide|title()}} {{lang.words.advanced}} {{lang.words.settings}}</button>
				</td>
			</tr>
			<tr>
				<td class="addButton">
					<a class="ui-button ui-widget ui-corner-all" title="Add Frontend" onclick="addProxy('add-frontend')">Add Frontend</a>
				</td>
				<td class="addButton">
					<a class="ui-button ui-widget ui-corner-all" title="{{lang.words.generate|title()}} {{lang.words.and}} {{lang.words.display}} {{lang.words.config}}" onclick="generateConfig('add-frontend')">{{lang.words.generate|title()}} {{lang.words.config}}</a>
				</td>
			</tr>
		</table>
		</form>
	</div>

				<!-- Third tabs -->

	<div id="backend">
		<form name="add-backend" id="add-backend" action="/app/add.py" method="post">
		<table>
			<caption><h3>{{lang.words.add|title()}} {{lang.words.backend}}</h3></caption>
			<tr>
				<td class="addName">{{lang.words.select|title()}} {{lang.words.w_a}} {{lang.words.server}}: </td>
				<td class="addOption">
					<select required name="serv" id="serv3">
						<option disabled selected>------</option>
						{% for select in selects %}
							<option value="{{ select.2 }}">{{ select.1 }}</option>
						{% endfor %}
					</select>
					<div class="tooltip tooltipTop"><b>{{lang.words.note|title()}}:</b> {{lang.phrases.master_slave}}</div>
				</td>
				<td rowspan="4" class="add-note addName alert-info">
						{{lang.add_page.desc.back_des1}}
						<br /><br />
						{{lang.add_page.desc.listener_desc2}}
						<br /><br />
						{{lang.add_page.desc.listener_desc3}}
				</td>
			</tr>
			<tr>
				<td class="addName">{{lang.words.name|title()}}:</td>
				<td class="addOption">
					{{ input('new_backend', title=lang.words.name|title() + ' ' +lang.words.backend, placeholder="web_80", required='required') }}
				</td>
			</tr>
			<tr class="advance">
				<td class="addName">{{lang.words.mode|title()}}: </td>
				<td class="addOption">
					{% set values = dict() %}
					{% set values = {'http':'http','tcp':'tcp'} %}
					{{ select('backend-mode-select', name='mode', values=values, selected='http', required='required', class='force_close') }}
					<span id="https-backend-span">
						<label for="https-backend" style="margin-top: 5px;">Is SSL enabled on frontend?</label>
						<input type="checkbox" id="https-backend" name="ssl" value="https">
					</span>
					<div id="https-hide-backend" style="display: none;">
						<label for="ssl-dis-check-backend" style="margin-top: 5px;">{{lang.add_page.buttons.disable_ssl_check}}</label><input type="checkbox" id="ssl-dis-check-backend" name="ssl-dis-check" value="ssl-dis-check">
						<label for="ssl-check-backend" style="margin-top: 5px;">{{lang.add_page.buttons.disable_ssl_verify}}</label><input type="checkbox" id="ssl-check-backend" name="ssl-check" value="ssl-check" checked>
					</div>
				</td>
			</tr>
			<tr class="advance">
				<td class="addName">{{lang.words.balance|title()}}: </td>
					<td class="addOption">
						{{ select('balance', values=balance_params, selected='roundrobin', required='required', class='force_close') }}
					</td>
			</tr>
			<tr class="advance">
				<td class="addName">{{lang.words.health|title()}} {{lang.words.check}}: </td>
				<td class="addOption">
					{{ select('backend_checks', name='health_check', values=checks, selected='', class='force_close') }}
					<span id="backend_checks_note" class="tooltip tooltipTop"></span>
					<br />
					<span id="backend_checks_http" style="display: none;">
							URI path for checking: {{ input('backend_checks_http_path', name='checks_http_path', value='/',  title="URI for checking e.g. /check") }}
							Domain name: {{ input('backend_checks_http_domain', name='checks_http_domain', placeholder='domain.com',  title="Domain name for checking e.g. domain.com") }}
						</span>
				</td>
			</tr>
			<tr class="advance">
				<td class="addName">{{lang.words.headers|title()}}: </td>
				<td class="addOption">
					<span title="{{lang.words.add|title()}} {{lang.words.headers}}" id="add_backend_header" class="link add-server"></span>
					<div id="backend_header_div" style="display: none;">
						<p style="border-bottom: 1px solid #ddd; padding-bottom: 10px;" id="backend_header_p">
							{{ select('backend_header_res_method', name='headers_res', values=header_res, first='------', class='force_close') }}
							{{ select('backend_header_method', name='headers_method', values=header_params, selected='add-header', class='force_close') }}
							<b class="padding10">{{lang.words.name}}</b>
							{{ input('backend_header_name', name="header_name") }}
							<b class="padding10">{{lang.words.value}}</b>
							{{ input('lbackend_header_value', name="header_value", placeholder='Leave blank if using del-header') }}
							<span class="minus minus-style" onclick="deleteId('listener_header_p')" title="{{lang.words.delete|title()}}"></span>
						</p>
					</div>
					<span>
						<a class="link add-server" id="backend_add_header" title="{{lang.words.add|title()}} {{lang.words.headers}}" style="display: none;"></a>
					</span>
				</td>
			</tr>
			<tr class="advance">
				<td class="addName" title="Access control list">ACL: </td>
				<td class="addOption">
					<span title="{{lang.words.add|title()}} ACL" id="add_backend_acl" class="link add-server"></span>
					<div id="backend_acl" style="display: none;">
						<p id="backend_acl_rule" style="border-bottom: 1px solid #ddd; padding-bottom: 10px;">
							<b class="padding10">if</b>
							{{ select('backend_acl_if', name='acl_if', values=if_values, first='Select if', class='force_close', disabled=false) }}
							<b class="padding10">value</b>
							{{ input('backend_acl_value', name="acl_value") }}
							<b class="padding10">then</b>
							{% set values = dict() %}
							{% set values = {'2':'Redirect to','3':'Allow','4':'Deny', '6': 'Return', '7': 'Set-header'} %}
							{{ select('backend_acl_then', name='acl_then', values=values, first='Select then', class='force_close', disabled=false) }}
							<b class="padding10">value</b>
							{{ input('backend_acl_then_value', name='acl_then_value', title="Required if \'then\' is \'Use backend\', \'Redirect\', \'Return\', or \'Set-header\'") }}
							<span class="minus minus-style" onclick="deleteId('backend_acl_rule')" title="{{lang.words.delete|title()}} {{lang.words.this}} {{lang.words.rule}}"></span>
						</p>
					</div>
					<span>
						<a class="link add-server" id="backend_add_acl" title="{{lang.words.add|title()}} ACL" style="cursor: pointer; display: none;"></a>
					</span>
				</td>
			</tr>
			<tr class="advance">
				<td class="addName"><span title="Cache support start 1.8 and latter" class="help_cursor">Web {{lang.words.acceleration}}:</span></td>
				<td class="addOption">
					<span class="controlgroup">
						{{ checkbox('compression3', name="compression", title=lang.add_page.desc.http_compression, value='1', desc=lang.words.compression|title()) }}
						{{ checkbox('cache3', name="cache", title=lang.words.enable|title()+' '+lang.words.cache, value='2', desc=lang.words.cache|title()) }}
						{{ checkbox('ssl_offloading2', title=lang.add_page.desc.http_https, desc='SSL Offloading') }}
					</span>
				</td>
			</tr>
			<tr class="advance">
				<td class="addName">{{lang.words.options|title()}}:</td>
				<td class="addOption">
					<span class="controlgroup">
						{{ checkbox('forward_for2', title=lang.add_page.desc.forward_for, desc='Forward for') }}
						{{ checkbox('redispatch2', title=lang.add_page.desc.redispatch, desc='Redispatch') }}
						{% set values = dict() %}
						{% set values = {'Off':'Off','Server only':'Server only','Force close':'Force close','Pretend keep alive':'Pretend keep alive'} %}
						{{ select('force_close', values=values, first='Force HTTP close', title=lang.add_page.desc.force_close, class='force_close') }}
						{{ checkbox('cookie2', title=lang.add_page.desc.cookie, desc=lang.words.set|title()+' cookie', value='1') }}
						{{ checkbox('options-backend-show', title=lang.add_page.buttons.set_options_m, desc=lang.add_page.buttons.set_options) }}
					</span>
					<br>
					<span id="cookie_div2" style="display: none;">
						<input type="text" placeholder="name" name="cookie_name" id="cookie_name2" class="form-control"><br><br>
						<input type="text" placeholder="domain" name="cookie_domain" class="form-control"><br><br>
						<span class="controlgroup">
							{% set values = dict() %}
							{% set values = {'None':'None','rewrite':'rewrite','indirect':'indirect','insert':'insert'} %}
							{{ select('rewrite2', values=values, first='rewrite/indirect/insert', class='force_close') }}
							{{ checkbox('prefix2', name='prefix', title=lang.add_page.desc.c_prefix, desc='prefix', value='prefix') }}
							{{ checkbox('nocache2', name='nocache', title=lang.add_page.desc.c_nocache, desc='nocache', value='nocache') }}
							{{ checkbox('postonly2', name='postonly', title=lang.add_page.desc.c_postonly, desc='postonly', value='postonly') }}
							{{ checkbox('dynamic2', name='dynamic', title=lang.add_page.desc.c_dynamic, desc='dynamic', value='dynamic') }}
							<span id="dynamic_div2" style="display: none;">
								dynamic-cookie-key: {{ input('dynamic-cookie-key2', name='dynamic-cookie-key', placeholder="your-custom-key") }}
							</span>
						</span>
					</span>
					<div id="options-backend-show-div" style="display: none;">
						<div style="font-size: 12px; padding-bottom: 10px;">
							<span style="padding-right: 10px;">{{lang.words.start2|title()}} {{lang.words.typing}} {{lang.words.options}}: </span>
							{{ input('options2') }}
							<span style="padding-left: 10px;">
								{{lang.add_page.desc.press_down}}. <a href="http://cbonte.github.io/haproxy-dconv/1.7/configuration.html" target="_blanck" style="color: #23527c" title="HAproxy docs">{{lang.words.read|title()}} {{lang.words.more}} {{lang.words.about}} {{lang.words.options}}</a>
							</span>
							<br />
							<span style="padding-right: 10px;">{{lang.words.start2|title()}} {{lang.words.typing}} {{lang.words.saved}} {{lang.words.options}}: </span>
							<input type="text" id="saved-options2" class="form-control">
								{{lang.add_page.desc.saved_options}}
						</div>
						<textarea name="option" title="Options thru" cols=80 rows=5 id="optionsInput2" placeholder="acl test hdr_beg(host) -i some_host"></textarea>
					</div>
				</td>
			</tr>
			<tr>
				<td class="addName">{{lang.words.servers|title()}}:</td>
				<td class="addOption">
					{% include 'include/add_servers.html' %}
					<br>
					<br>
					{{ checkbox('template-backend', name='template', title=lang.add_page.desc.server_template, value='template', desc=lang.add_page.desc.server_template) }}
				</td>
			</tr>
			<tr class="advance">
				<td class="addName">{{lang.words.check|title()}}:</td>
				<td class="addOption">
					<div>
						<label for="controlgroup-backend-show" style="margin-top: 5px;" title="Set custom check parameters">{{lang.words.custom|title()}} {{lang.words.check}} {{lang.words.params}}</label>
						<input type="checkbox" id="controlgroup-backend-show" name="default-check">
						<span class="tooltip tooltipTop">{{lang.add_page.desc.def_check}}: inter 2000 rise 2 fall 5</span>
					</div>
					<div class="controlgroup" id="controlgroup-backend" style="display: none;">
						<label for="check-servers-backend" title="Ebable servers check">{{lang.words.check|title()}}</label>
						<input type="checkbox" id="check-servers-backend" name="check-servers" checked value="1">
						{% set values = dict() %}
						{% set values = {'1000':'1000','2000':'2000','3000':'3000'} %}
						{{ select('inter-backend', values=values, first='inter', class='force_close') }}
						{% set values = dict() %}
						{% set values = {'1':'1','2':'2','3':'3'} %}
						{{ select('rise-backend', name='rise', values=values, first='rise', class='force_close') }}
						{% set values = dict() %}
						{% set values = {'4':'4','5':'5','6':'6'} %}
						{{ select('fall-backend', name='fall', values=values, first='fall', class='force_close') }}
					</div>
					<div style="display: block">
						{{ checkbox('circuit_breaking_backend', name="circuit_breaking", desc='Circuit Breaking', title=lang.add_page.desc.circuit_breaking, value='1') }}
					</div>
					<div id="circuit_breaking_backend_div" style="display: none">
						Observe:
						{{ select('circuit_breaking_observe', values=observe, class='force_close') }}
						error-limit: {{ input('circuit_breaking_error_limit', type='number', value='50', style='width: 50px;') }}
						on-error:
						{{ select('circuit_breaking_on_error', values=on_error, class='force_close') }}
						<div class="tooltip tooltipTop">{{lang.words.read|title()}} {{lang.words.more}} {{lang.words.about}} Circuit Breaking <a href="https://roxy-wi.org/description/circuit-breaking" title="Circuit Breaking" target="_blank">{{lang.words.here}}</a></div>
					</div>
				</td>
			</tr>
			<tr class="advance-show">
				<td class="addOption" colspan="2">
					<button title="{{lang.add_page.buttons.show_full_settings}}" class="row-down advance-show-button">{{lang.words.show|title()}} {{lang.words.advanced}} {{lang.words.settings}}</button>
					<button title="{{lang.add_page.buttons.hide_full_settings}}" class="row-up advance-hide-button" style="display: none">{{lang.words.hide|title()}} {{lang.words.advanced}} {{lang.words.settings}}</button>
				</td>
			</tr>
			<tr>
				<td class="addButton">
					<a class="ui-button ui-widget ui-corner-all" title="{{lang.words.add|title()}} {{lang.words.backend|title()}}" onclick="addProxy('add-backend')">{{lang.words.add|title()}} {{lang.words.backend|title()}}</a>
				</td>
				<td class="addButton">
					<a class="ui-button ui-widget ui-corner-all" title="{{lang.words.generate|title()}} {{lang.words.and}} {{lang.words.display}} {{lang.words.config}}" onclick="generateConfig('add-backend')">{{lang.words.generate|title()}} {{lang.words.config}}</a>
				</td>
			</tr>
		</table>
		</form>
	</div>

	<div id="ssl">
		<table>
			<caption><h3>SSL</h3></caption>
			<tr class="overviewHead">
				<td class="padding10 first-collumn" style="width: 30%;">{{lang.words.view|title()}} {{lang.words.cert2}}</td>
				<td>
					{{lang.words.upload|title()}} {{lang.words.certs}}
				</td>
				<td></td>
			</tr>
			<tr>
				<td class="padding10 first-collumn">
					<select required name="serv" id="serv5">
						<option disabled selected>------</option>
						{% for select in selects %}
							<option value="{{ select.2 }}">{{ select.1 }}</option>
						{% endfor %}
					</select>
					<button id="ssl_key_view" title="{{lang.words.view|title()}} {{lang.words.certs}}">{{lang.words.view|title()}}</button>
				</td>
				<td colspan="2" style="padding: 10px 0 10px 0;">
					<span id="ajax-show-ssl"></span>
				</td>
			</tr>
			<tr class="overviewHead">
				<td class="padding10 first-collumn" style="width: 30%;">{{lang.words.upload|title()}} SSL {{lang.words.certs}}</td>
				<td>
					{{lang.words.cert_name|title()}}
				</td>
				<td>
					<span title="{{lang.add_page.paste_cert_desc}}" class="help_cursor">{{lang.add_page.desc.paste_cert}}</span>
				</td>
			</tr>
			<tr>
				<td class="first-collumn padding10" valign="top" style="padding-top: 15px;">
					<select required id="serv4">
						<option disabled selected>------</option>
						{% for select in selects %}
							<option value="{{ select.2 }}">{{ select.1 }}</option>
						{% endfor %}
					</select>
				</td>
				<td valign="top" style="padding-top: 27px;">
					{{ input('ssl_name') }}
				</td>
				<td style="padding-top: 15px; padding-bottom: 15px;">
					<textarea id="ssl_cert" cols="50" rows="5"></textarea><br /><br />
					<button id="ssl_key_upload" title="{{lang.words.upload|title()}} SSL {{lang.words.cert}}">{{lang.words.upload|title()}}</button>
				</td>
			</tr>
		</table>
		<table>
			<caption><h3>Let's Encrypt</h3></caption>
			<tr class="overviewHead">
				<td class="padding10 first-collumn">{{lang.words.server|title()}}</td>
				<td>{{lang.words.domain|title()}}</td>
				<td>{{lang.words.email|title()}}</td>
				<td></td>
			</tr>
			<tr>
				<td class="padding10 first-collumn">
					<select required id="serv_for_lets">
						<option disabled selected>------</option>
						{% for select in selects %}
						<option value="{{ select.2 }}">{{ select.1 }}</option>
						{% endfor %}
					</select>
				</td>
				<td>
					{{ input('lets_domain', placeholder="example.com") }}
				</td>
				<td>
					{{ input('lets_email') }}
				</td>
				<td>
					<button id="lets_button">{{lang.words.w_get|title()}} {{lang.words.w_a}} {{lang.words.cert}}</button>
				</td>
			</tr>
		</table>
		<div id="ajax-ssl"></div>
	</div>
	<div id="option">
		<table class="overview" id="option_table">
			<tr class="overviewHead">
				<td class="padding10 first-collumn">Id</td>
				<td class="padding10 first-collumn">{{lang.words.params|title()}}</td>
				<td></td>
			</tr>
		{% for option in options %}
			<tr id="option-{{ option.id }}" class="{{ loop.cycle('odd', 'even') }}">
				{% if option.groups == group or group == '1' %}
				<td class="padding10 first-collumn">
					{{ option.id }}
				</td>
				<td class="padding10 first-collumn" style="width: 77%;">
					<input type="text" id="option-body-{{ option.id }}" value="{{ option.options }}" size="60" class="form-control">
				</td>
				<td>
					<a class="delete" onclick="confirmDeleteOption({{ option.id }})" title="{{lang.words.delete|title()}} {{lang.words.param}} {{option.options}}" style="cursor: pointer;"></a>
				</td>
				{% endif %}
			</tr>
		{% endfor %}
		</table>
		<br /><span class="add-button" title="{{lang.words.add|title()}} {{lang.words.param}}" id="add-option-button">+ {{lang.words.add|title()}}</span>
		<br /><br />
		<table class="overview" id="option-add-table" style="display: none;">
			<tr class="overviewHead">
				<td class="padding10 first-collumn">&nbsp;</td>
				<td>{{lang.words.param|title()}}</td>
				<td></td>
			</tr>
			<tr>
				<td class="padding10 first-collumn">
					{{lang.words.enter|title()}} {{lang.words.w_an}} {{lang.words.param}}:
				</td>
				<td style="width: 77%;">
					{{ input('new-option', size='60') }}
				</td>
				<td>
					<span class="add-admin" id="add-option-new" title="{{lang.words.add|title()}} {{lang.words.new}} {{lang.words.param}}" style="cursor: pointer;"></span>
				</td>
			</tr>
		</table>
		<div id="ajax-option"></div>
		<div class="add-note alert addName alert-info" style="width: inherit; margin-right: 15px;">
			{{lang.add_page.desc.options}}
		</div>
	</div>

	<div id="add-servers">
		<table class="overview" id="servers_table">
			<tr class="overviewHead">
				<td class="padding10 first-collumn">{{lang.words.server|title()}}</td>
				<td class="padding10 first-collumn">{{lang.words.desc|title()}}</td>
				<td></td>
			</tr>
		{% for s in saved_servers %}
			<tr id="servers-saved-{{ s.id }}" class="{{ loop.cycle('odd', 'even') }}">
				{% if s.groups == group or group == '1' %}
				<td class="padding10 first-collumn">
					<input type="text" id="servers-ip-{{ s.id }}" value="{{ s.server }}" size="15" class="form-control">
				</td>
				<td class="padding10 first-collumn" style="width: 77%;">
					<input type="text" id="servers-desc-{{ s.id }}" value="{{ s.description }}" size="50" class="form-control">
				</td>
				<td>
					<a class="delete" onclick="confirmDeleteSavedServer({{ s.id }})" title="{{lang.words.delete|title()}} {{lang.words.server}} {{s.server}}" style="cursor: pointer;"></a>
				</td>
				{% endif %}
			</tr>
		{% endfor %}
		</table>
		<br /><span class="add-button" title="{{lang.words.add|title()}} {{lang.words.server}}" id="add-saved-server-button">+ {{lang.words.add|title()}}</span>
		<br /><br />
		<table class="overview" id="saved-server-add-table" style="display: none;">
			<tr class="overviewHead">
				<td class="padding10 first-collumn">{{lang.words.server|title()}}</td>
				<td>{{lang.words.desc|title()}}</td>
				<td></td>
			</tr>
			<tr>
				<td class="padding10 first-collumn">
					{{ input('new-saved-servers', size='15') }}
				</td>
				<td style="width: 77%;">
					{{ input('new-saved-servers-description', size='50') }}
				</td>
				<td>
					<span class="add-admin" id="add-saved-server-new" title="{{lang.words.add|title()}} {{lang.words.new|title()}} {{lang.words.server|title()}}" style="cursor: pointer;"></span>
				</td>
			</tr>
		</table>
		<div id="ajax-servers"></div>
		<div class="add-note alert addName alert-info" style="width: inherit; margin-right: 15px;">
			{{lang.add_page.desc.servers}}
		</div>
	</div>
	<div id="userlist">
		<form name="add-userlist" id="add-userlist" action="/app/add/haproxy/userlist" method="post">
		<table>
			<caption><h3>{{lang.words.add|title()}} {{lang.words.userlists}}</h3></caption>
			<tr>
				<td class="addName">{{lang.words.select|title()}} {{lang.words.w_a}} {{lang.words.server}}: </td>
				<td class="addOption">
					<select required name="serv" id="userlist_serv">
						<option disabled selected>------</option>
						{% for select in selects %}
							<option value="{{ select.2 }}">{{ select.1 }}</option>
						{% endfor %}
					</select>
					<div class="tooltip tooltipTop"><b>{{lang.words.note|title()}}:</b> {{lang.phrases.master_slave}}</div>
				</td>
				<td rowspan="4" class="add-note addName alert-info">{{lang.add_page.desc.userlist_desc}}</td>
			</tr>
			<tr>
				<td class="addName">{{lang.words.name|title()}}:</td>
				<td class="addOption">
					{{ input('new_userlist', required='required', title=lang.add_page.desc.userlist_name, placeholder="basic-auth-list") }}
				</td>
			</tr>
			<tr>
				<td class="addName">{{lang.words.groups|title()}}:</td>
				<td class="addOption">
					<span id="userlist-groups">
						{{ input('userlist-group', title=lang.add_page.desc.userlist_user_grp, placeholder="group_name") }}
					</span>
					<span>
						<span class="add-server" id="add-userlist-group" title="Add extra group" style="cursor: pointer;"></span>
					</span>
					<div class="tooltip tooltipTop">{{lang.add_page.desc.userlist_group}}</div>
				</td>
			</tr>
			<tr>
				<td class="addName">{{lang.words.user|title()}}:</td>
				<td class="addOption">
					<span id="userlist-users">
						{{ input('userlist-user', required='required', title=lang.words.username|title(), placeholder="user_name") }}
						{{ input('userlist-password', required='required', title=lang.add_page.desc.userlist_pass, placeholder="password") }}
						{{ input('userlist-user-group', title=lang.add_page.desc.userlist_user_grp,  placeholder="group") }}
					</span>
					<span>
						<span class="add-server" id="add-userlist-user" title="Add extra user" style="cursor: pointer;"></span>
					</span>
					<div class="tooltip tooltipTop">{{lang.add_page.desc.userlist_user}}</div>
				</td>
			</tr>
			<tr>
				<td class="addButton">
					<a class="ui-button ui-widget ui-corner-all" title="Add Userlist" onclick="addProxy('add-userlist')">{{lang.words.add|title()}} {{lang.words.userlist|title()}}</a>
				</td>
				<td class="addButton">
					<a class="ui-button ui-widget ui-corner-all" title="{{lang.words.generate|title()}} {{lang.words.and}} {{lang.words.display}} {{lang.words.config}}" onclick="generateConfig('add-userlist')">{{lang.words.generate|title()}} {{lang.words.config}}</a>
				</td>
			</tr>
		</table>
		</form>
		<br />
		<table>
			<caption><h3>{{lang.words.existing|title()}} {{lang.words.userlists}}</h3></caption>
			<tr>
				<td class="addName">{{lang.words.select|title()}} {{lang.words.w_a}} {{lang.words.server}}: </td>
				<td class="addOption">
					<select required name="serv" id="existing_userlist_serv">
						<option disabled selected>------</option>
						{% for select in selects %}
							<option value="{{ select.2 }}">{{ select.1 }}</option>
						{% endfor %}
					</select>
					<div class="tooltip tooltipTop"><b>{{lang.words.note|title()}}:</b> {{lang.phrases.master_slave}}</div>
				</td>
				<td>
					<a class="ui-button ui-widget ui-corner-all" title="Add Userlist" onclick="showUserlists()">{{lang.words.show|title()}} {{lang.words.userlists}}</a>
				</td>
			</tr>
			<tr id="existing_userlist_tr" style="display: none;">
				<td class="addName">{{lang.words.existing|title()}} {{lang.words.userlists}}:</td>
				<td class="addOption" id="existing_userlist_ajax"></td>
			</tr>
		</table>
		<div class="add-note addName alert-info" style="width: inherit; margin-right: 15px;">
			{{lang.add_page.desc.userlist}}
		</div>
		<div class="add-note alert addName alert-info" style="width: inherit; margin-right: 15px;">
			{{lang.words.read|title()}}
			<a href="https://roxy-wi.org/description/userlist" title="How to use userlists" target="_blank">
				<b>{{lang.words.here}}</b>
			</a>
			{{lang.phrases.howto_user}} {{lang.words.userlists}}
		</div>
	</div>
	<div id="peers">
		<form name="add-peers" id="add-peers" action="/app/add/haproxy/peers" method="post">
		<table>
			<caption><h3>{{lang.words.add|title()}} Peer</h3></caption>
			<tr>
				<td class="addName">{{lang.words.select|title()}} {{lang.words.w_a}} {{lang.words.server}}: </td>
				<td class="addOption">
					<select required name="serv" id="peers_serv">
						<option disabled selected>------</option>
						{% for select in selects %}
							<option value="{{ select.2 }}">{{ select.1 }}</option>
						{% endfor %}
					</select>
					<div class="tooltip tooltipTop"><b>{{lang.words.note|title()}}:</b> {{lang.phrases.master_slave}}</div>
				</td>
				<td rowspan="4" class="add-note addName alert-info">
					{{lang.add_page.desc.peers}}
				</td>
			</tr>
			<tr>
				<td class="addName">Peers {{lang.words.name}}:</td>
				<td class="addOption">
					{{ input('peers-name', title="Peers "+lang.words.name,  placeholder="peers name") }}
				</td>
			</tr>
			<tr>
				<td class="addName">Peers {{lang.words.servers}}:</td>
				<td class="addOption">
					<span name="add_peers">
						<input name="servers_name" required title="Peer {{lang.words.name}}" size=14 placeholder="haproxy1" class="form-control">:
						<input name="servers" required title="Peer IP" size=14 placeholder="xxx.xxx.xxx.xxx" class="form-control">:
						<input name="server_port" required title="Peer {{lang.words.port}}" size=3 placeholder="yyy" class="form-control add_server_number" type="number">
						<br />
						<input name="servers_name" required title="Peer {{lang.words.name}}" size=14 placeholder="haproxy2" class="form-control">:
						<input name="servers" title="Peer IP" size=14 placeholder="xxx.xxx.xxx.xxx" class="form-control second-server"><span class="second-server">:</span>
						<input name="server_port" title="Peer {{lang.words.port}}" size=3 placeholder="yyy" class="form-control second-server add_server_number" type="number">
					</span>
					<span>
						<a class="link add-server backend_server" name="add-peer-input" title="{{lang.words.add|title()}} peer {{lang.words.server}}" style="cursor: pointer;"></a>
					</span>
				</td>
			</tr>
			<tr>
				<td class="addButton">
					<a class="ui-button ui-widget ui-corner-all" title="{{lang.words.add|title()}} peer" onclick="addProxy('add-peers')">{{lang.words.add|title()}} peer</a>
				</td>
				<td class="addButton">
					<a class="ui-button ui-widget ui-corner-all" title="{{lang.words.generate|title()}} {{lang.words.and}} {{lang.words.display}} {{lang.words.config}}" onclick="generateConfig('add-peers')">{{lang.words.generate|title()}} {{lang.words.config}}</a>
				</td>
			</tr>
		</table>
		</form>
		<div class="alert addName alert-info" style="width: inherit; margin-right: 15px;">
			{{lang.add_page.desc.peers_master}}
		</div>
		<div class="alert addName alert-info" style="width: inherit; margin-right: 15px;">
			{{lang.add_page.desc.peers_slave}}
		</div>
		<div class="add-note alert addName alert-info" style="width: inherit; margin-right: 15px;">
			{{lang.words.read|title()}}
			<a href="https://roxy-wi.org/howto/peers" title="How to use peers" target="_blank">
				<b>{{lang.words.here}}</b>
			</a>
			{{lang.phrases.howto_user}} peers
		</div>
	</div>
	<div id="lists">
		<table class="overview">
			<tr class="overviewHead">
				<th class="padding10 first-collumn">{{lang.words.new|title()}} {{lang.words.blacklist}}</th>
				<th>{{lang.words.server|title()}} {{lang.words.for}} {{lang.words.uploading}}</th>
				<th>{{lang.words.existing|title()}} {{lang.words.blacklists}}</th>
			</tr>
			<tr>
				<td class="padding10 first-collumn" style="width: 25%;">
					{{lang.words.name|title()}}: {{ input('new_blacklist_name') }}
					<button onclick="createList('black')">{{lang.words.create|title()}}</button>
				</td>
				<td class="first-collumn">
					<select required name="serv-black-list" id="serv-black-list">
						<option disabled selected>------</option>
						<option value="all">{{lang.words.all|title()}}</option>
							{% for select in selects %}
								<option value="{{ select.2 }}">{{ select.1 }}</option>
							{% endfor %}
					</select>
				</td>
				<td style="width: 30%; padding: 10px 0 10px 0;">
					{% for list in black_lists %}
					<span class="list_of_lists list_blacklists">
						<a onclick="editList('{{ list }}', 'black')" title="{{lang.words.edit|title()}} {{lang.words.the}} {{ list }} {{lang.words.list}}">{{ list }}</a>
					</span>
					{% endfor %}
				</td>

			</tr>
			{{ input('group', value=group, type='hidden') }}
		</table>
		<table>
			<tr class="overviewHead">
				<th class="padding10 first-collumn">{{lang.words.new|title()}} {{lang.words.whitelist}}</th>
				<th>{{lang.words.server|title()}} {{lang.words.for}} {{lang.words.uploading}}</th>
				<th>{{lang.words.existing|title()}} {{lang.words.whitelists}}</th>
			</tr>
			<tr>
				<td class="padding10 first-collumn" style="width: 25%;">
					{{lang.words.name|title()}}: {{ input('new_whitelist_name') }}
					<button onclick="createList('white')">{{lang.words.create|title()}}</button>
				</td>
				<td class="first-collumn">
					<select required name="serv-white-list" id="serv-white-list">
						<option disabled selected>------</option>
						<option value="all">{{lang.words.all|title()}}</option>
							{% for select in selects %}
								<option value="{{ select.2 }}">{{ select.1 }}</option>
							{% endfor %}
					</select>
				</td>
				<td style="width: 30%; padding: 10px 0 10px 0;">
					{% for list in white_lists %}
					<span class="list_of_lists list_whitelists">
						<a onclick="editList('{{ list }}', 'white')" title="{{lang.words.edit|title()}} {{lang.words.the}} {{ list }} {{lang.words.list}}">{{ list }}</a>
					</span>
					{% endfor %}
				</td>
			</tr>
		</table>
		<div id="ajax"></div>
		<div class="add-note alert addName alert-info" style="width: inherit; margin-right: 15px;">
			{{lang.add_page.desc.lists_howto}}
			<a href="https://roxy-wi.org/howto/blacklist" title="How to create and manage blacklist" target="_blank">{{lang.words.article}}</a>
		</div>
		<div id="dialog-confirm-cert-edit" title="{{lang.words.view|title()}} {{lang.words.cert}} " style="display: none;">
			<span><b>{{lang.words.note|title()}}:</b> {{lang.add_page.desc.lists_new_line}}</span>
			<textarea id="edit_lists" style="width: 100%" rows=20></textarea>
		</div>
	</div>

	<div id="maps">
		<table class="overview">
			<tr class="overviewHead">
				<th class="padding10 first-collumn">{{lang.words.new|title()}} {{lang.words.map}}</th>
				<th>{{lang.words.server|title()}} {{lang.words.for}} {{lang.words.uploading}}</th>
				<th>{{lang.words.existing|title()}} {{lang.words.maps}}</th>
			</tr>
			<tr>
				<td class="padding10 first-collumn" style="width: 25%;">
					{{lang.words.name|title()}}: {{ input('new_map_name') }}
					<button onclick="createMap()">{{lang.words.create|title()}}</button>
				</td>
				<td class="first-collumn">
					<select required name="serv-map" id="serv-map">
						<option disabled selected>------</option>
						<option value="all">{{lang.words.all|title()}}</option>
							{% for select in selects %}
								<option value="{{ select.2 }}">{{ select.1 }}</option>
							{% endfor %}
					</select>
				</td>
				<td style="width: 30%; padding: 10px 0 10px 0;">
					{% for map in maps %}
					<span class="list_of_lists list_maps">
						<a onclick="editMap('{{ map }}')" title="{{lang.words.edit|title()}} {{lang.words.the}} {{ map }} {{lang.words.map}}">{{ map }}</a>
					</span>
					{% endfor %}
				</td>
			</tr>
			{{ input('group', value=group, type='hidden') }}
		</table>
		<div id="ajax-maps"></div>
		<div class="add-note alert addName alert-info" style="width: inherit; margin-right: 15px;">
			{{lang.add_page.desc.lists_howto}}
			<a href="https://www.haproxy.com/blog/introduction-to-haproxy-maps" title="Introduction to HAProxy Maps" target="_blank">{{lang.words.article}}</a>
		</div>
		<div id="dialog-confirm-map-edit" title="{{lang.words.view|title()}} {{lang.words.map}} " style="display: none;">
			<span><b>{{lang.words.note|title()}}:</b> {{lang.add_page.desc.lists_new_line}}</span>
			<textarea id="edit_map" style="width: 100%" rows=20></textarea>
		</div>
	</div>
	{% include 'include/del_confirm.html' %}
	<div id="dialog-confirm-cert" title="View certificate " style="display: none;">
		<pre id="dialog-confirm-body"></pre>
	</div>
	<input type="hidden" id="group" value="{{ group }}">
</div>
</div>
<script>
$( function() {
	$( ".force_close" ).selectmenu({
	  width: 180
	});
	if (window.matchMedia('(max-width: 1280px)').matches || window.matchMedia('(max-width: 1024px)').matches || window.matchMedia('(max-width: 667px)').matches) {
		$( "select" ).selectmenu({
			  width: 150
		});
	}
});
var serv_ports = $('.send_proxy');

for (var i = 0; i <= serv_ports.length; i++) {
	var uniqId = makeid(3);
	$(serv_ports[i]).append('<label for="' + uniqId + '" class="send_proxy_label" title="Set send-proxy for this server" data-help="The Send-proxy parameter enforces the use of the PROXY protocol over any connection established to this server. The PROXY protocol informs the other end about the layer 3/4 addresses of the incoming connection so that it can know the client\'s address or the public address it accessed to, whatever the upper-layer protocol.">send-proxy</label><input type="checkbox" name="send_proxy" value="1" id="' + uniqId + '">');
	var uniqId = makeid(3);
	$(serv_ports[i]).append('<label for="' + uniqId + '" class="send_proxy_label" title="Set this server as backup server" data-help="When all servers in a farm are down, we want to redirect traffic to a backup server which delivers either sorry pages or a degraded mode of the application.\n' +
			'This can be done easily in HAProxy by adding the keyword backup on the server line. If multiple backup servers are configured, only the first active one is used.">backup</label><input type="checkbox" name="backup" value="1" id="' + uniqId + '">');
}
</script>
{% endblock %}