haproxy-wi/app/templates/add.html

{% extends "base.html" %}
{% block content %}
{% from 'include/input_macros.html' import input, checkbox, select %}
<style>
.container {
	margin-right: 0;
	}
h3 {
	width: 98.8%
	}
</style>
<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-listner" 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='listner', title="Name Listner", 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 down.<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">SSL?</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 to pem file, or press down:</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">
					{% set values = dict() %}
					{% set values = {'roundrobin':'roundrobin','source':'source','leastconn':'leastconn', 'first':'first', 'rdp-cookie':'rdp-cookie'} %}
					{{ select('balance', values=values, selected='roundrobin', required='required', class='force_close') }}
				</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 SSL Offloading', desc='SSL Offloading') }}
				</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 atack protect', desc='Slow atack') }}
					{{ checkbox('ddos', title='DDOS atack 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 the name of the blacklist, or press down:</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 manualy', 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 down. <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="addName">Advanced:</td>
			<td class="addOption"><span title="Show Advanced settings" style="cursor: pointer">Show Advanced settings</span></td>
		</tr>
		<tr>
			<td class="addButton">
				<button type="submit" value="submit">Add Listen</button>
			</td>
		</tr>
		</form>
		</table>
	</div>
		
		<!-- Second tabs -->
		
	<div id="frontend">
		<form name="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 down.<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;">SSL?</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 name to pem file, or 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="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"><span title="Cache support start 1.8 and latter">Web acceleration(?):</span></td>
			<td class="addOption">
				<span class="controlgroup">	
					{{ checkbox('compression2', title='Enable Compression', value='1', desc='Compression') }}
					{{ checkbox('cache2', title='Enable cache', value='2', desc='Cache') }}
					{{ checkbox('ssl_offloading1', title='Enable SSL Offloading', desc='SSL Offloading') }}
				</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 atack protect', desc='Slow atack') }}
					{{ checkbox('ddos1', title='DDOS atack 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 the name of the blacklist, or press down:</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 manualy', 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 down. <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 down</div>
				{{ input('backends', name='backends', placeholder="some_backend", size='30') }}
				<span style="font-size: 12px; padding-left: 10px;"> .</span>
				<p style="font-size: 12px"><b>Note:</b> If backend doesn't exist, you must first <a href="#" style="color: #23527c"  title="Create backend" class="redirectBackend">create a new backend</a>.</p>
			</td>
		</tr>
		<tr class="advance-show">
			<td class="addName">Advanced:</td>
			<td class="addOption"><span title="Show Advanced settings" style="cursor: pointer">Show Advanced settings</span></td>
		</tr>
		<tr>
			<td class="addButton">
				<button type="submit">Add Frontend</button>
			</td>
		</tr>
		</form>
		</table>
	</div>
				
				<!-- Third tabs -->
		
	<div id="backend">
		<form name="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;">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">
					{% set values = dict() %}
					{% set values = {'roundrobin':'roundrobin','source':'source','leastconn':'leastconn', 'first':'first', 'rdp-cookie':'rdp-cookie'} %}
					{{ select('balance', values=values, selected='roundrobin', required='required', class='force_close') }}
				</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', title='Enable Compression', value='1', desc='Compression') }}
					{{ checkbox('cache3', 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 manualy', 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 down. <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="addName">Advanced:</td>
			<td class="addOption"><span title="Show Advanced settings" style="cursor: pointer">Show Advanced settings</span></td>
		</tr>
		<tr>
			<td class="addButton">
				<button type="submit" value="" name="" class="btn btn-default">Add Backend</button>
			</td>
		</tr>
		</form>
		</table>
	</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>
					<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
			<br />
			<br />
			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
			<br />
			<br />
			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" 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="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 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">
				<button type="submit" value="" name="" class="btn btn-default">Add Userlist</button>
			</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
			<br />
			<br />
			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">Server for upload</th>
				<th>New blacklist</th>
				<th>Existing blacklists</th>
			</tr>
			<tr>
				<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: 25%;">
					Name: {{ input('new_blacklist_name') }}
					<button onclick="createList('black')">Create</button>
				</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">Server for upload</th>
				<th>New whitelist</th>
				<th>Existing whitelists</th>
			</tr>
			<tr>
				<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: 25%;">
					Name: {{ input('new_whitelist_name') }}
					<button onclick="createList( 'white')">Create</button>
				</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
		</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;">
		<center><pre id="dialog-confirm-body"></pre></center>
	</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
		});
	}
});
</script>
{% endblock %}