haproxy-wi/app/templates/add.html

{% extends "base.html" %}
{% 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 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 if_values = dict() %}
{% 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="Add proxy: Create proxy - HAProxy-WI">Create proxy</a></li>
		<li><a href="#listen" title="Add proxy: Create Listen - HAProxy-WI">Listen</a></li>
		<li><a href="#frontend" title="Add proxy: Create Frontend - HAProxy-WI">Frontend</a></li>
		<li><a href="#backend" title="Add proxy: Create Backend - HAProxy-WI">Backend</a></li>
		<li><a href="#ssl" title="Add proxy: Upload SSL certificates - HAProxy-WI">SSL certificates</a></li>
		<li><a href="#option" title="Add proxy: Pre-saved options - HAProxy-WI">Options</a></li>
		<li><a href="#add-servers" title="Add proxy: Pre-saved servers - HAProxy-WI">Servers</a></li>
		<li><a href="#userlist" title="Add proxy: Create Userlists - HAProxy-WI">Userlists</a></li>
		<li><a href="#lists" title="Add proxy: Create and upload whitelists or blacklists - HAProxy-WI">Lists</a></li>
		{% include 'include/login.html' %}
	</ul>
	<ul id='browse_histroy'></ul>
	{% include 'include/add_proxy.html' %}
	<div id="listen">
		<form name="add-listener" id="add-listener" action="/app/add.py" method="post">
			<table class="add-table">
				<caption><h3>Add listen</h3></caption>
				<tr>
					<td class="addName">Select server: </td>
					<td class="addOption">
						<select required name="serv" id="serv">
							<option disabled selected>Choose server</option>
							{% for select in selects %}
								<option value="{{ select.2 }}">{{ select.1 }}</option>
							{% endfor %}
						</select>
						<div class="tooltip tooltipTop"><b>Note:</b> If you re-configure the master server, the slave server will re-configured automatically</div>
					</td>
					<td rowspan="5" class="add-note addName alert-info">
						A "listen" section defines a complete proxy with its frontend and backend parts combined in one section. It is generally useful for TCP-only traffic.
						<br /><br />
						All proxy names must be formed from upper and lower case letters, digits, '-' (dash), '_' (underscore) , '.' (dot) and ':' (colon). ACL names are
						case-sensitive, which means that "www" and "WWW" are two different proxies.
						<br /><br />
						Historically, all proxy names could overlap, it just caused troubles in the logs. Since the introduction of content switching, it is mandatory that two
						proxies with overlapping capabilities (frontend/backend) have different names. However, it is still permitted that a frontend and a backend share the same
						name, as this configuration seems to be commonly encountered.
					</td>
				</tr>
				<tr>
					<td class="addName">Name:</td>
					<td class="addOption">
						{{ input('name', name='listener', title="Name Listener", placeholder="web_80", required='required') }}
					</td>
				</tr>
				<tr>
					<td class="addName">IP and Port:</td>
					<td class="addOption">
						{{ input('ip', placeholder="Any", size='15') }}<b>:</b>
						{{ input('listen-port', name='port', type="number", title="Port for bind listen", placeholder="8080", size='5', required='required') }}
						<div class="tooltip tooltipTop">
							IP for bind listener, <b>if empty will be assigned on all IPs</b>.
							Start typing IP, or press the "down" button.<br>If you are using <b>VRRP, leave the IP field blank</b>. If you assign an IP, the slave server will not start
						</div>
					</td>
				</tr>
				<tr class="advance">
					<td class="addName">Mode: </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="Enable 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">Enter name of pem file, or press the "down" button:</span><br />
							{{ input('path-cert-listen', name="cert", placeholder="some_cert.pem", size='39') }}<br />
							<label for="ssl-check-listen" style="margin-top: 5px;">Disable ssl verify on servers?</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="Fix the maximum number of concurrent connections on a frontend", size='5', required='required') }}
						<div class="tooltip tooltipTop">This value should not exceed the global maxconn. Default global maxconn value: 2000</div>
					</td>
				</tr>
				<tr class="advance">
					<td class="addName">Balance: </td>
						<td class="addOption">
							{{ select('balance', values=balance_params, selected='roundrobin', required='required', class='force_close') }}
						</td>
				</tr>
				<tr class="advance">
					<td class="addName">Health 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" title="Access control list">ACL: </td>
					<td class="addOption">
						<span title="Add 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">if</b>
								{{ select('listener_acl_if', name='acl_if', values=if_values, first='Choose if', class='force_close', disabled=false) }}
								<b class="padding10">value</b>
								{{ input('listener_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('listener_acl_then', name='acl_then', values=values, first='Choose action', class='force_close', disabled=false) }}
								<b class="padding10">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="delete_acl_rule('listener_acl_rule')" title="Delete this rule"></span>
							</p>
						</div>
						<span>
							<a class="link add-server" id="listener_add_acl" title="Add 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">Web acceleration(?):</span></td>
					<td class="addOption">
						<span class="controlgroup">
							{{ checkbox('compression', title='Enable Compression', value='1', desc='Compression') }}
							{{ checkbox('cache', title='Enable cache', value='2', desc='Cache') }}
							{{ checkbox('ssl_offloading', title='Enable redirect from HTTP to HTTPS', desc='HTTP->HTTPS') }}
						</span>
					</td>
				</tr>
				<tr class="advance">
					<td class="addName"><span title="Web application firewall">WAF(?):</span></td>
					<td class="addOption">
						<span class="controlgroup">
							{{ checkbox('slow_atack', title='Slow attack protect', desc='Slow attack') }}
							{{ checkbox('ddos', title='DDOS attack protect', desc='DDOS') }}
							{{ checkbox('blacklist_checkbox', title='Use blacklist', desc='Blacklist') }}
							{{ checkbox('waf', title='Web application firewall', desc='WAF', value='1') }}
							{{ checkbox('antibot', title='Antibot Protection', desc='Antibot', value='1') }}
						</span>
						<div id="blacklist-hide" style="display: none;">
							<br /><span class="tooltip tooltipTop">Enter a blacklist name, or press the "down" button:</span><br />
							{{ input('blacklist-hide-input', size='39', name="blacklist", placeholder="blacklist.lst") }}
						</div>
					</td>
				</tr>
				<tr class="advance">
					<td class="addName">Options:</td>
					<td class="addOption">
						<span class="controlgroup">
							{{ checkbox('forward_for', title='Option Forward for if none', desc='Forward for') }}
							{{ checkbox('redispatch', title='Enable 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', class='force_close') }}
							{{ checkbox('cookie', title='Set cookie', desc='Set cookie', value='1') }}
							{{ checkbox('options-listen-show', title='Set options manually', desc='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='This keyword indicates that instead of relying on a dedicated cookie for the persistence, an existing one will be completed', desc='prefix', value='prefix') }}
								{{ checkbox('nocache', title='This option is recommended in conjunction with the insert mode when there is a cache between the client and HAProxy', desc='nocache', value='nocache') }}
								{{ checkbox('postonly', title='This option ensures that cookie insertion will only be performed on responses to POST requests', desc='postonly', value='postonly') }}
								{{ checkbox('dynamic', title='Activate dynamic cookies. When used, a session cookie is dynamically created for each server', 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;">Start typing options: </span>
								{{ input('options') }}
								<span style="padding-left: 10px;">
									or press the "down" button. <a href="http://cbonte.github.io/haproxy-dconv/1.7/configuration.html" target="_blanck" style="color: #23527c" title="HAproxy docs">Read more about options</a>
								</span>
								<br />
								<span style="padding-right: 10px;">Start typing saved options: </span>
								{{ input('saved-options') }}
									It are the options that you saved in the "Options" tab
							</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">Servers:</td>
					<td class="addOption">
						{% include 'include/add_servers.html' %}
						<br>
						<br>
						{{ checkbox('template-listen', name='template', title='Use server-template instead servers list', value='template', desc='Server-template') }}
					</td>
				</tr>
				<tr class="advance">
					<td class="addName">Check:</td>
					<td class="addOption">
						<div>
							<label for="controlgroup-listen-show" style="margin-top: 5px;" title="Change default check">Custom check params</label>
							<input type="checkbox" id="controlgroup-listen-show" name="default-check" value="1">
							<span class="tooltip tooltipTop"> Default params: 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">Check</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>
					</td>
				</tr>
				<tr class="advance-show">
					<td class="addOption" colspan="2">
						<button title="Show full list of settings" class="row-down advance-show-button">Show Advanced settings</button>
						<button title="Hide full list of settings" class="row-up advance-hide-button" style="display: none">Hide Advanced settings</button>
					</td>
				</tr>
				<tr>
					<td class="addButton">
						<a class="ui-button ui-widget ui-corner-all" title="Add Listen" onclick="addProxy('add-listener')">Add Listen</a>
					</td>
					<td class="addButton">
						<a class="ui-button ui-widget ui-corner-all" title="Generate config and show it" onclick="generateConfig('add-listener')">Generate 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>Add frontend</h3></caption>
			<tr>
				<td class="addName">Select server: </td>
				<td class="addOption">
					<select required name="serv" id="serv2">
						<option disabled selected>Choose server</option>
						{% for select in selects %}
							<option value="{{ select.2 }}">{{ select.1 }}</option>
						{% endfor %}
					</select>
					<div class="tooltip tooltipTop"><b>Note:</b> If you re-configure the master server, the slave server will re-configured automatically</div>
				</td>
				<td rowspan="5" class="add-note addName alert-info">
						A "frontend" section describes a set of listening sockets accepting client connections.
						<br /><br />
						All proxy names must be formed from upper and lower case letters, digits, '-' (dash), '_' (underscore) , '.' (dot) and ':' (colon). ACL names are
						case-sensitive, which means that "www" and "WWW" are two different proxies.
						<br /><br />
						Historically, all proxy names could overlap, it just caused troubles in the logs. Since the introduction of content switching, it is mandatory that two
						proxies with overlapping capabilities (frontend/backend) have different names. However, it is still permitted that a frontend and a backend share the same
						name, as this configuration seems to be commonly encountered.
				</td>
			</tr>
			<tr>
				<td class="addName">Name:</td>
				<td class="addOption">
					<input type="text" name="frontend" id="new_frontend" required title="Name frontend"  placeholder="web_80" class="form-control">
				</td>
			</tr>
			<tr>
				<td class="addName">IP and Port:</td>
				<td class="addOption">
					<input type="text" name="ip" id="ip1" size="15" placeholder="Any" class="form-control"><b>:</b>
					<input type="number" name="port" required title="Port for bind frontend" placeholder="8080" class="form-control">
					<div class="tooltip tooltipTop">
						IP for bind listener, <b>if empty will be assigned on all IPs</b>.
						Start typing IP, or press the "down" button.<br>If you are using <b>VRRP, leave the IP field blank</b>. If you assign an IP, the slave server will not start
					</div>
				</td>
			</tr>
			<tr class="advance">
				<td class="addName">Mode: </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">
						<label for="https-frontend" style="margin-top: 5px;" title="Enable SSL Offloading">SSL Offloading</label>
						<input type="checkbox" id="https-frontend" name="ssl" value="https">
					</span>
					<div id="https-hide-frontend" style="display: none;">
						<br /><span class="tooltip tooltipTop">Enter a name of pem file, or press the "down" button:</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="Fix the maximum number of concurrent connections on a frontend", size='5', required='required') }}
					<div class="tooltip tooltipTop">This value should not exceed the global maxconn. Default global maxconn value: 2000</div>
				</td>
			</tr>
			<tr class="advance">
				<td class="addName" title="Access control list">ACL: </td>
				<td class="addOption">
					<span title="Add 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='Choose 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='Choose action', 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="delete_acl_rule('frontend_acl_rule')" title="Delete this rule"></span>
						</p>
					</div>
					<span>
						<a class="link add-server" id="frontend_add_acl" title="Add 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">Web acceleration(?):</span></td>
				<td class="addOption">
					<span class="controlgroup">
						{{ checkbox('compression2', name="compression", title='Enable Compression', value='1', desc='Compression') }}
						{{ checkbox('cache2', name="cache", title='Enable cache', value='2', desc='Cache') }}
						{{ checkbox('ssl_offloading1', title='Enable redirect from HTTP to HTTPS', desc='HTTP->HTTPS') }}
					</span>
				</td>
			</tr>
			<tr class="advance">
				<td class="addName"><span title="Web application firewall">WAF(?):</span></td>
				<td class="addOption">
					<span class="controlgroup">
						{{ checkbox('slow_atack1', title='Slow attack protect', desc='Slow attack') }}
						{{ checkbox('ddos1', title='DDOS attack protect', desc='DDOS') }}
						{{ checkbox('blacklist_checkbox1', title='Use blacklist', desc='Blacklist') }}
						{{ checkbox('waf2', name='waf', title='Web application firewall', desc='WAF', value='1') }}
						{{ checkbox('antibot1', title='Antibot Protection', desc='Antibot', value='1') }}
					</span>
					<div id="blacklist-hide1" style="display: none;">
						<br /><span class="tooltip tooltipTop">Enter a blacklist name, or press the "down" button::</span><br />
						{{ input('blacklist-hide-input1', size='39', name="blacklist", placeholder="blacklist.lst") }}
					</div>
				</td>
			</tr>
			<tr class="advance">
				<td class="addName">Options:</td>
				<td class="addOption">
					<span class="controlgroup">
						{{ checkbox('forward_for1', title='Option Forward for if none', 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', class='force_close') }}
						{{ checkbox('options-frontend-show', title='Set options manually', desc='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;">Start typing options: </span>
							{{ input('options1') }}
							<span style="padding-left: 10px;">
								or press the "down" button:. <a href="http://cbonte.github.io/haproxy-dconv/1.7/configuration.html" target="_blanck"  style="color: #23527c" title="HAproxy docs">Read more about options</a>
							</span>
							<br />
							<span style="padding-right: 10px;">Start typing saved options: </span>
							{{ input('saved-options1') }}
								It are the options that you saved in the "Options" tab
						</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">Default backend</td>
				<td class="addOption">
					<div style="font-size: 12px; padding-bottom: 10px;">Start typing backend, or press the "down" button</div>
					{{ input('backends', name='backends', placeholder="some_backend", size='30') }}
					<p style="font-size: 12px"><b>Note:</b> If you want to use a default backend, you must <span title="Create backend" id="redirectBackend" class="link">create a new backend</span> first.</p>
				</td>
			</tr>
			<tr class="advance-show">
				<td class="addOption" colspan="2">
					<button title="Show full list of settings" class="row-down advance-show-button">Show Advanced settings</button>
					<button title="Hide full list of settings" class="row-up advance-hide-button" style="display: none">Hide Advanced 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="Generate config and show it" onclick="generateConfig('add-frontend')">Generate 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>Add backend</h3></caption>
			<tr>
				<td class="addName">Select server: </td>
				<td class="addOption">
					<select required name="serv" id="serv3">
						<option disabled selected>Choose server</option>
						{% for select in selects %}
							<option value="{{ select.2 }}">{{ select.1 }}</option>
						{% endfor %}
					</select>
					<div class="tooltip tooltipTop"><b>Note:</b> If you re-configure the master server, the slave server will reconfigured automatically</div>
				</td>
				<td rowspan="4" class="add-note addName alert-info">
						A "backend" section describes a set of servers to which the proxy will connect to forward incoming connections.
						<br /><br />
						All proxy names must be formed from upper and lower case letters, digits, '-' (dash), '_' (underscore) , '.' (dot) and ':' (colon). ACL names are
						case-sensitive, which means that "www" and "WWW" are two different proxies.
						<br /><br />
						Historically, all proxy names could overlap, it just caused troubles in the logs. Since the introduction of content switching, it is mandatory that two
						proxies with overlapping capabilities (frontend/backend) have different names. However, it is still permitted that a frontend and a backend share the same
						name, as this configuration seems to be commonly encountered.
				</td>
			</tr>
			<tr>
				<td class="addName">Name:</td>
				<td class="addOption">
					{{ input('new_backend', title="Name backend", placeholder="web_80", required='required') }}
				</td>
			</tr>
			<tr class="advance">
				<td class="addName">Mode: </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-check" style="margin-top: 5px;">Disable SSL verify on servers</label><input type="checkbox" id="ssl-check" name="ssl-check" value="ssl-check" checked>
					</div>
				</td>
			</tr>
			<tr class="advance">
				<td class="addName">Balance: </td>
					<td class="addOption">
						{{ select('balance', values=balance_params, selected='roundrobin', required='required', class='force_close') }}
					</td>
			</tr>
			<tr class="advance">
				<td class="addName">Health 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" title="Access control list">ACL: </td>
				<td class="addOption">
					<span title="Add 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='Choose 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='Choose action', 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="delete_acl_rule('backend_acl_rule')" title="Delete this rule"></span>
						</p>
					</div>
					<span>
						<a class="link add-server" id="backend_add_acl" title="Add 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">Web acceleration(?):</span></td>
				<td class="addOption">
					<span class="controlgroup">
						{{ checkbox('compression3', name="compression", title='Enable Compression', value='1', desc='Compression') }}
						{{ checkbox('cache3', name="cache", title='Enable cache', value='2', desc='Cache') }}
						{{ checkbox('ssl_offloading2', title='Enable SSL Offloading', desc='SSL Offloading') }}
					</span>
				</td>
			</tr>
			<tr class="advance">
				<td class="addName">Options:</td>
				<td class="addOption">
					<span class="controlgroup">
						{{ checkbox('forward_for2', title='Option Forward for if none', desc='Forward for') }}
						{{ checkbox('redispatch2', title='Enable 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', class='force_close') }}
						{{ checkbox('cookie2', title='Set cookie', desc='Set cookie', value='1') }}
						{{ checkbox('options-backend-show', title='Set options manually', desc='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='This keyword indicates that instead of relying on a dedicated cookie for the persistence, an existing one will be completed', desc='prefix', value='prefix') }}
							{{ checkbox('nocache2', name='nocache', title='This option is recommended in conjunction with the insert mode when there is a cache between the client and HAProxy', desc='nocache', value='nocache') }}
							{{ checkbox('postonly2', name='postonly', title='This option ensures that cookie insertion will only be performed on responses to POST requests', desc='postonly', value='postonly') }}
							{{ checkbox('dynamic2', name='dynamic', title='Activate dynamic cookies. When used, a session cookie is dynamically created for each server', 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;">Start typing options: </span>
							{{ input('options2') }}
							<span style="padding-left: 10px;">
								or press the "down" button. <a href="http://cbonte.github.io/haproxy-dconv/1.7/configuration.html" target="_blanck" style="color: #23527c" title="HAproxy docs">Read more about options</a>
							</span>
							<br />
							<span style="padding-right: 10px;">Start typing saved options: </span>
							<input type="text" id="saved-options2" class="form-control">
								It are the options that you saved in the "Options" tab
						</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">Servers:</td>
				<td class="addOption">
					{% include 'include/add_servers.html' %}
					<br>
					<br>
					{{ checkbox('template-backend', name='template', title='Use server-template instead servers list', value='template', desc='Server-template') }}
				</td>
			</tr>
			<tr class="advance">
				<td class="addName">Check:</td>
				<td class="addOption">
					<div>
						<label for="controlgroup-backend-show" style="margin-top: 5px;" title="Change default check">Custom check params</label>
						<input type="checkbox" id="controlgroup-backend-show" name="default-check">
						<span class="tooltip tooltipTop"> Default params: 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">Check</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>
				</td>
			</tr>
			<tr class="advance-show">
				<td class="addOption" colspan="2">
					<button title="Show full list of settings" class="row-down advance-show-button">Show Advanced settings</button>
					<button title="Hide full list of settings" class="row-up advance-hide-button" style="display: none">Hide Advanced settings</button>
				</td>
			</tr>
			<tr>
				<td class="addButton">
					<a class="ui-button ui-widget ui-corner-all" title="Add Backend" onclick="addProxy('add-backend')">Add Backend</a>
				</td>
				<td class="addButton">
					<a class="ui-button ui-widget ui-corner-all" title="Generate config and show it" onclick="generateConfig('add-backend')">Generate 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%;">View certificates</td>
				<td>
					Existing certificates
				</td>
			</tr>
			<tr>
				<td class="padding10 first-collumn">
					<select required name="serv" id="serv5">
						<option disabled selected>Choose server</option>
						{% for select in selects %}
							<option value="{{ select.2 }}">{{ select.1 }}</option>
						{% endfor %}
					</select>
					<button id="ssl_key_view" title="View certificates">View</button>
				</td>
				<td colspan="2">
					<span  id="ajax-show-ssl"></span>
				</td>
			</tr>
			<tr class="overviewHead">
				<td class="padding10 first-collumn" style="width: 30%;">Upload SSL certificates</td>
				<td>
					Certificate name
				</td>
				<td>
					<span title="This pem file will be used to create https connection with haproxy">Paste certificate content here(?)</span>
				</td>
			</tr>
			<tr style="width: 50%;">
				<td class="first-collumn" valign="top" style="padding-top: 15px;">
					<select required id="serv4">
						<option disabled selected>Choose server</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="Upload ssl certificates">Upload</button>
				</td>
			</tr>
		</table>
		<table>
			<caption><h3>Let's Encrypt</h3></caption>
			<tr class="overviewHead">
				<td class="padding10 first-collumn">
					Server
				</td>
				<td>
					Domain name
				</td>
				<td>
					E-mail
				</td>
				<td></td>
			</tr>
			<tr>
				<td class="padding10 first-collumn">
					<select required id="serv_for_lets">
						<option disabled selected>Choose server</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">Get certificate</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">Options</td>
				<td></td>
			</tr>
		{% for option in options %}
			<tr id="option-{{ option.0 }}" class="{{ loop.cycle('odd', 'even') }}">
				{% if option.2 == group or group == '1' %}
				<td class="padding10 first-collumn">
					{{ option.0 }}
				</td>
				<td class="padding10 first-collumn" style="width: 77%;">
					<input type="text" id="option-body-{{ option.0 }}" value="{{ option.1 }}" size="60" class="form-control">
				</td>
				<td>
					<a class="delete" onclick="confirmDeleteOption({{ option.0 }})" title="Delete option {{option.1}}" style="cursor: pointer;"></a>
				</td>
				{% endif %}
			</tr>
		{% endfor %}
		</table>
		<br /><span class="add-button" title="Add option" id="add-option-button">+ Add</span>
		<br /><br />
		<table class="overview" id="option-add-table" style="display: none;">
			<tr class="overviewHead">
				<td class="padding10 first-collumn">&nbsp;</td>
				<td>Option</td>
				<td></td>
			</tr>
			<tr>
				<td class="padding10 first-collumn">
					Enter option for save:
				</td>
				<td style="width: 77%;">
					{{ input('new-option', size='60') }}
				</td>
				<td>
					<span class="add-admin" id="add-option-new" title="Add new option" style="cursor: pointer;"></span>
				</td>
			</tr>
		</table>
		<div id="ajax-option"></div>
		<div class="add-note addName alert-info" style="width: inherit; margin-right: 15px;">
			In this section you can create, edit and delete options with given parameters. And after use them as autocomplete in the "Add" sections
		</div>
		<div class="add-note addName alert-info" style="width: inherit; margin-right: 15px;">
			How to use pre saved option you can see in
			<a href="https://haproxy-wi.org/description.py?description=saved" title="How to use pre saved options" target="_blank">
				<b>this video</b>
			</a>
		</div>
	</div>

	<div id="add-servers">
		<table class="overview" id="servers_table">
			<tr class="overviewHead">
				<td class="padding10 first-collumn">Server</td>
				<td class="padding10 first-collumn">Description</td>
				<td></td>
			</tr>
		{% for s in saved_servers %}
			<tr id="servers-saved-{{ s.0 }}" class="{{ loop.cycle('odd', 'even') }}">
				{% if s.3 == group or group == '1' %}
				<td class="padding10 first-collumn">
					<input type="text" id="servers-ip-{{ s.0 }}" value="{{ s.1 }}" size="15" class="form-control">
				</td>
				<td class="padding10 first-collumn" style="width: 77%;">
					<input type="text" id="servers-desc-{{ s.0 }}" value="{{ s.2 }}" size="50" class="form-control">
				</td>
				<td>
					<a class="delete" onclick="confirmDeleteSavedServer({{ s.0 }})" title="Delete server {{s.1}}" style="cursor: pointer;"></a>
				</td>
				{% endif %}
			</tr>
		{% endfor %}
		</table>
		<br /><span class="add-button" title="Add server" id="add-saved-server-button">+ Add</span>
		<br /><br />
		<table class="overview" id="saved-server-add-table" style="display: none;">
			<tr class="overviewHead">
				<td class="padding10 first-collumn">Server</td>
				<td>Description</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>
					<button class="add-admin" id="add-saved-server-new" title="Add new server" style="cursor: pointer;"></button>
				</td>
			</tr>
		</table>
		<div id="ajax-servers"></div>
		<div class="add-note addName alert-info" style="width: inherit; margin-right: 15px;">
			In this section you can create, edit and delete servers. And after use them as autocomplete in the "Add" sections
		</div>
		<div class="add-note addName alert-info" style="width: inherit; margin-right: 15px;">
			How to use pre saved servers you can see in
			<a href="https://haproxy-wi.org/description.py?description=saved" title="How to use pre saved servers" target="_blank">
				<b>this video</b>
			</a>
		</div>
	</div>
	<div id="userlist">
		<form name="add-userlist" id="add-userlist" action="/app/add.py" method="post">
		<table>
			<caption><h3>Add Userlist</h3></caption>
			<tr>
				<td class="addName">Select server: </td>
				<td class="addOption">
					<select required name="serv" id="userlist_serv">
						<option disabled selected>Choose server</option>
						{% for select in selects %}
							<option value="{{ select.2 }}">{{ select.1 }}</option>
						{% endfor %}
					</select>
					<div class="tooltip tooltipTop"><b>Note:</b> If you reconfigure Master server, Slave will reconfigured automatically</div>
				</td>
				<td rowspan="4" class="add-note addName alert-info">
					It is possible to control access to frontend/backend/listen sections or to
					http stats by allowing only authenticated and authorized users. To do this,
					it is required to create at least one userlist and to define users.
				</td>
			</tr>
			<tr>
				<td class="addName">Userlist name:</td>
				<td class="addOption">
					{{ input('new_userlist', required='required', title="Userlist name", placeholder="basic-auth-list") }}
				</td>
			</tr>
			<tr>
				<td class="addName">Groups:</td>
				<td class="addOption">
					<span id="userlist-groups">
						{{ input('userlist-group', title="User`s group", 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">It is also possible to attach users to this group by using a comma separated list of names preceded by "users" keyword.</div>
				</td>
			</tr>
			<tr>
				<td class="addName">User:</td>
				<td class="addOption">
					<span id="userlist-users">
						{{ input('userlist-user', required='required', title="User name", placeholder="user_name") }}
						{{ input('userlist-password', required='required', title="User password. By default it insecure-password", placeholder="password") }}
						{{ input('userlist-user-group', title="User`s group",  placeholder="user`s group") }}
					</span>
					<span>
						<span class="add-server" id="add-userlist-user" title="Add extra user" style="cursor: pointer;"></span>
					</span>
					<div class="tooltip tooltipTop">It is also possible to attach groups to this user by using a comma separated list of groups.</div>
				</td>
			</tr>
			<tr>
				<td class="addButton">
					<a class="ui-button ui-widget ui-corner-all" title="Add Userlist" onclick="addProxy('add-userlist')">Add Userlist</a>
				</td>
				<td class="addButton">
					<a class="ui-button ui-widget ui-corner-all" title="Generate config and show it" onclick="generateConfig('add-userlist')">Generate config</a>
				</td>
			</tr>
		</table>
		</form>
		<div class="add-note addName alert-info" style="width: inherit; margin-right: 15px;">
			In this section you can create userlists. And after use them  in the "Add" sections
		</div>
		<div class="add-note addName alert-info" style="width: inherit; margin-right: 15px;">
			How to use userlists you can read
			<a href="https://haproxy-wi.org/description.py?description=userlist" title="How to use userlists" target="_blank">
				<b>here</b>
			</a>
		</div>
	</div>
	<div id="lists">
		<table class="overview">
			<tr class="overviewHead">
				<th class="padding10 first-collumn">New blacklist</th>
				<th>Server for uploading</th>
				<th>Existing blacklists</th>
			</tr>
			<tr>
				<td class="padding10 first-collumn" style="width: 25%;">
					Name: {{ input('new_blacklist_name') }}
					<button onclick="createList('black')">Create</button>
				</td>
				<td class="padding10 first-collumn">
					<select required name="serv-black-list" id="serv-black-list">
						<option disabled selected>Choose server</option>
						<option value="all">ALL</option>
							{% for select in selects %}
								<option value="{{ select.2 }}">{{ select.1 }}</option>
							{% endfor %}
					</select>
				</td>
				<td style="width: 30%;">
					{% for list in black_lists %}
						<a onclick="editList('{{ list }}', 'black')" style="cursor: pointer;" title="Edit list {{ list }}">{{ list }}</a>
					{% endfor %}
				</td>

			</tr>
			{{ input('group', value=group, type='hidden') }}
		</table>
		<table>
			<tr class="overviewHead">
				<th class="padding10 first-collumn">New whitelist</th>
				<th>Server for uploading</th>
				<th>Existing whitelists</th>
			</tr>
			<tr>
				<td class="padding10 first-collumn" style="width: 25%;">
					Name: {{ input('new_whitelist_name') }}
					<button onclick="createList('white')">Create</button>
				</td>
				<td class="padding10 first-collumn">
					<select required name="serv-white-list" id="serv-white-list">
						<option disabled selected>Choose server</option>
						<option value="all">ALL</option>
							{% for select in selects %}
								<option value="{{ select.2 }}">{{ select.1 }}</option>
							{% endfor %}
					</select>
				</td>
				<td style="width: 30%;">
					{% for list in white_lists %}
						<a onclick="editList('{{ list }}', 'white')" style="cursor: pointer;" title="Edit list {{ list }}">{{ list }}</a>
					{% endfor %}
				</td>
			</tr>
		</table>
		<div id="ajax"></div>
		<div class="add-note addName alert-info" style="width: inherit; margin-right: 15px;">
			In this section you can create and edit black and white lists. And after use them in the HAProxy configs or in the "Add proxy" pages. Read how to use it in this
			<a href="https://haproxy-wi.org/howto.py?howto=blacklist" title="How to create and manage blacklist" target="_blank">article</a>
		</div>
		<div id="dialog-confirm-cert-edit" title="View certificate " style="display: none;">
			<span><b>Note:</b> Each new address must be specified from a new line</span>
			<textarea id="edit_lists" 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>
{% include 'include/del_confirm.html' %}
<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">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">backup</label><input type="checkbox" name="backup" value="1" id="' + uniqId + '">');
}
</script>
{% endblock %}