{% 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 = {'ip_hash':'ip_hash','least_conn':'least_conn','random':'random', 'round_robin': 'round-robin'} %}
<script src="/inc/add_nginx.js"></script>
<div id="tabs">
	<ul>
		<li><a href="#create" title="{{lang.words.add|title()}} {{lang.words.proxy}}: {{lang.words.add|title()}} {{lang.words.proxy}} - Roxy-WI">{{lang.words.add|title()}} {{lang.words.proxy}}</a></li>
		<li><a href="#upstream" title="{{lang.words.add|title()}} {{lang.words.proxy}}: {{lang.words.create|title()}} {{lang.words.upstream|title()}} - Roxy-WI">{{lang.words.upstream|title()}}</a></li>
	</ul>
	<ul id='browse_histroy'></ul>
	{% include 'include/add_nginx_proxy.html' %}
    <div id="upstream">
        <form name="add-upstream" id="add-upstream" action="/app/add/nginx/upstream" method="post">
			<table class="add-table">
				<caption><h3>{{lang.words.add|title()}} upstream</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_nginx_page.desc.upstream_desc1}}
						<br /><br />
						{{lang.add_nginx_page.desc.upstream_desc2}}
						<br /><br />
						{{lang.add_nginx_page.desc.upstream_desc3}}
					</td>
				</tr>
                <tr>
					<td class="addName">{{lang.words.name|title()}}:</td>
					<td class="addOption">
						{{ input('name', name='upstream', title="Name upstream", placeholder="backend_servers", required='required') }}
					</td>
				</tr>
				<tr class="advance">
					<td class="addName">{{lang.words.balance|title()}}: </td>
						<td class="addOption">
							{{ select('balance', values=balance_params, selected='round-robin', required='required', class='force_close') }}
						</td>
				</tr>
				<tr class="advance">
					<td class="addName"><span title="{{lang.add_nginx_page.desc.keepalive}}" data-help="{{lang.add_nginx_page.desc.keepalive}}">Keepalive:</span></td>
					<td class="addOption">
						{{ input('name', name='keepalive', title=lang.add_nginx_page.desc.keepalive, placeholder="32") }}
					</td>
				</tr>
				<tr>
					<td class="addName">{{lang.words.servers|title()}}:</td>
					<td class="addOption">
						{% include 'include/add_nginx_servers.html' %}
					</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.upstream|title()}}" onclick="addProxy('add-upstream')">{{lang.words.add|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-upstream')">{{lang.words.generate|title()}} {{lang.words.config}}</a>
					</td>
				</tr>
            </table>
        </form>
    </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 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>
<script>
$( function() {
	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 %}