{% extends "base.html" %}
{% block title %}{{lang.words.admin_area|title()}}{% endblock %}
{% block h2 %}{{lang.words.admin_area|title()}}{% endblock %}
{% block content %}
{% from 'include/input_macros.html' import select, checkbox %}
<script src="/inc/users.js"></script>
<script src="/inc/fontawesome.min.js"></script>
<div id="tabs">
	<ul id="admin-tabs">
        <li><a href="#service" title="{{lang.words.proxy|title()}} {{lang.words.service}} - Roxy-WI">{{lang.words.proxy|title()}} {{lang.words.service}}</a></li>
        <li><a href="#monitoring" title="{{lang.words.monitoring|title()}} - Roxy-WI">{{lang.words.monitoring|title()}}</a></li>
        <li><a href="#geolite2" title="GeoLite2 - Roxy-WI">GeoLite2</a></li>
    </ul>

    <div id="service">
		{% if not is_needed_tool %}
			<div style="text-align: center;">
				<h3>{{lang.admin_page.desc.no_ansible}}</h3>.
				<img src="{{ url_for('static', filename='images/no_servers.png')}}" alt="There is no server">
				<h4>
					{{lang.words.install|title()}} <a href="https://roxy-wi.org/installation#ansible" title="{{lang.words.install|title()}} Ansible" target="_blank">{{lang.words.here}}</a> {{lang.phrases.how_to_install}} Ansible.
				</h4>
			</div>
		{% else %}
		<table class="overview">
			<caption><h3>{{lang.words.install|title()}} HAProxy</h3></caption>
			<tr class="overviewHead">
				<td class="padding10 first-collumn">{{lang.words.current2|title()}} {{lang.words.version}}</td>
				<td class="padding10 first-collumn help_cursor" style="width: 30%;" title="{{lang.words.for|title()}} Ubuntu {{lang.admin_page.desc.latest_repo}}">
					{{lang.words.available|title()}} {{lang.words.versions}} (?)
				</td>
				<td class="padding10 first-collumn" style="width: 20%;">{{lang.words.server|title()}}</td>
				<td class="checkbox-head help_cursor" title="{{lang.admin_page.desc.install_as_docker}}">{{lang.words.use|title()}} Docker</td>
				<td>SYN-flood {{lang.words.protection}}</td>
				<td></td>
			</tr>
			<tr>
				<td id="cur_haproxy_ver" class="padding10 first-collumn">
				</td>
				<td class="padding10 first-collumn" style="width: 20%;">
					{% set values = dict() %}
					{% set values = {'2.4.23-1':'2.4.23-1','2.5.14-1':'2.5.14-1', '2.6.14-1':'2.6.14-1','2.7.9-1':'2.7.9-1','2.8.1-1':'2.8.1-1'} %}
					{{ select('hapver',  values=values, selected='2.8.1-1', required='required') }}
				</td>
				<td class="padding10 first-collumn">
					<select autofocus required name="haproxyaddserv" id="haproxyaddserv">
						<option disabled selected>------</option>
						{% for select in servers %}
								<option value="{{ select.2 }}">{{ select.1 }}</option>
						{% endfor %}
					</select>
				</td>
				<td style="padding-left: 25px;">
					{{ checkbox('haproxy_docker', title=lang.admin_page.desc.install_as_docker) }}
				</td>
				<td class="syn-flood-protection-field">
					{{ checkbox('syn_flood', title=lang.words.enable|title() + ' SYN-flood '+ lang.words.protection, checked='checked') }}
				</td>
				<td>
					<span class="ui-button ui-widget ui-corner-all" id="install" title="{{lang.words.install|title()}} HAProxy">{{lang.words.install|title()}}</span>
				</td>
			</tr>
		</table>
		<table>
			<caption><h3>{{lang.words.install|title()}} NGINX</h3></caption>
			<tr class="overviewHead">
				<td class="padding10 first-collumn">{{lang.words.current2|title()}} {{lang.words.version}}</td>
				<td class="padding10 first-collumn" style="width: 30%;">{{lang.words.available|title()}} {{lang.words.versions}}</td>
				<td class="padding10 first-collumn" style="width: 20%;">{{lang.words.server|title()}}</td>
				<td class="checkbox-head help_cursor" title="{{lang.admin_page.desc.install_as_docker}}" >{{lang.words.use|title()}} Docker</td>
				<td>SYN-flood {{lang.words.protection}}</td>
				<td></td>
			</tr>
			<tr>
				<td id="cur_nginx_ver" class="padding10 first-collumn">
				</td>
				<td class="padding10 first-collumn" style="width: 20%;">
					{{lang.admin_page.desc.latest_repo}}
				</td>
				<td class="padding10 first-collumn">
					<select autofocus required name="nginxaddserv" id="nginxaddserv">
						<option disabled selected>------</option>
						{% for select in servers %}
								<option value="{{ select.2 }}">{{ select.1 }}</option>
						{% endfor %}
					</select>
				</td>
				<td style="padding-left: 25px;">
					{{ checkbox('nginx_docker', title=lang.admin_page.desc.install_as_docker) }}
				</td>
				<td class="syn-flood-protection-field">
					{{ checkbox('nginx_syn_flood', title=lang.words.enable|title() + ' SYN-flood '+ lang.words.protection, checked='checked') }}
				</td>
				<td>
					<span class="ui-button ui-widget ui-corner-all" id="nginx_install" title="{{lang.words.install|title()}} NGINX">{{lang.words.install|title()}}</span>
				</td>
			</tr>
		</table>
		<table>
			<caption><h3>{{lang.words.install|title()}} Apache</h3></caption>
			<tr class="overviewHead">
				<td class="padding10 first-collumn">{{lang.words.current2|title()}} {{lang.words.version}}</td>
				<td class="padding10 first-collumn" style="width: 30%;">{{lang.words.available|title()}} {{lang.words.versions}}</td>
				<td class="padding10 first-collumn" style="width: 20%;">{{lang.words.server|title()}}</td>
				<td class="checkbox-head help_cursor" title="{{lang.admin_page.desc.install_as_docker}}" >{{lang.words.use|title()}} Docker</td>
				<td>SYN-flood {{lang.words.protection}}</td>
				<td></td>
			</tr>
			<tr>
				<td id="cur_apache_ver" class="padding10 first-collumn">
				</td>
				<td class="padding10 first-collumn" style="width: 20%;">
					{{lang.admin_page.desc.latest_repo}}
				</td>
				<td class="padding10 first-collumn">
					<select autofocus required name="apacheaddserv" id="apacheaddserv">
						<option disabled selected>------</option>
						{% for select in servers %}
								<option value="{{ select.2 }}">{{ select.1 }}</option>
						{% endfor %}
					</select>
				</td>
				<td style="padding-left: 25px;">
					{{ checkbox('apache_docker', title=lang.admin_page.desc.install_as_docker) }}
				</td>
				<td class="syn-flood-protection-field">
					{{ checkbox('apache_syn_flood', title=lang.words.enable|title() + ' SYN-flood '+ lang.words.protection, checked='checked') }}
				</td>
				<td>
					<span class="ui-button ui-widget ui-corner-all" id="apache_install" title="{{lang.words.install|title()}} Apache">{{lang.words.install|title()}}</span>
				</td>
			</tr>
		</table>
		<div id="ajax"></div>
		{% endif %}
    </div>

    <div id="monitoring">
        {% if not is_needed_tool %}
        <div style="text-align: center;">
            <h3>{{lang.admin_page.desc.no_ansible}} Ansible</h3>.
            <img src="{{ url_for('static', filename='images/no_servers.png')}}" alt="There is no server">
            <h4>
                {{lang.words.read|title()}} <a href="https://roxy-wi.org/installation#ansible" title="{{lang.words.install|title()}} Ansible" target="_blank">here</a> {{lang.phrases.how_to_install}} Ansible.
            </h4>
        </div>
        {% else %}
        {% if role|int() == 1 %}
        <table id="grafana-table">
            <caption><i class="fas fa-chart-bar caption-icon2"></i><h3>Grafana {{lang.words.and}} Prometheus {{lang.words.servers}}</h3></caption>
            <tr class="overviewHead">
                <td class="padding10 first-collumn">{{lang.words.current2|title()}} {{lang.words.installation}}</td>
                <td class="padding10 first-collumn" style="width: 40%;">{{lang.words.available|title()}} {{lang.words.versions}}</td>
                <td class="padding10 first-collumn" style="width: 30%;">{{lang.words.note|title()}}</td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td id="cur_grafana_ver" class="padding10 first-collumn">
                    {% if grafana == "active" %}
                    Grafana {{lang.words.and}} Prometheus {{lang.admin_page.desc.been_installed}}
                    {% else %}
                    {{lang.admin_page.desc.there_are_no}}
                    {% endif %}
                </td>
                <td class="padding10 first-collumn" style="width: 20%;">
                    {{lang.admin_page.desc.latest_repo}} Grafana {{lang.words.and}} Prometheus
                </td>
                <td class="padding10 first-collumn">
                    {{lang.admin_page.desc.before_install}} Grafana {{lang.words.and}} Prometheus {{lang.words.servers}}
                </td>
                <td></td>
                <td>
                    {% if grafana != "active" %}
                    <span class="ui-button ui-widget ui-corner-all" id="grafna_install" title="{{lang.words.install|title()}} Grafana {{lang.words.and}} Prometheus {{lang.words.servers}}">{{lang.words.install|title()}}</span>
                    {% endif %}
                </td>
            </tr>
        </table>
    {% endif %}
        <table id="haproxy-table">
            <caption><i class="fas fa-network-wired caption-icon2"></i><h3>HAProxy Exporter</h3></caption>
            <tr class="overviewHead">
                <td class="padding10 first-collumn" style="width: 20%;">{{lang.words.current2|title()}} {{lang.words.installation}}</td>
                <td class="padding10 first-collumn" style="width: 30%;">{{lang.words.available|title()}} {{lang.words.versions}}</td>
                <td class="padding10 first-collumn" style="width: 30%;">{{lang.words.server|title()}}</td>
                <td class="help_cursor" style="width: 20%;" data-intro="{{lang.admin_page.desc.ext_prom}}">{{lang.words.external|title()}} Prometheus</td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td id="cur_haproxy_exp_ver" class="padding10 first-collumn"></td>
                <td class="padding10 first-collumn" style="width: 20%;">
                    {% set values = dict() %}
                    {% set values = {'0.9.0':'0.9.0', '0.10.0':'0.10.0', '0.11.0':'0.11.0', '0.12.0':'0.12.0', '0.13.0':'0.13.0', '0.14.0':'0.14.0', '0.15.0':'0.15.0'} %}
                    {{ select('hapexpver',  values=values, selected='0.15.0') }}
                </td>
                <td class="padding10 first-collumn">
                    <select autofocus required name="haproxy_exp_addserv" id="haproxy_exp_addserv">
                        <option disabled selected>------</option>
                        {% for select in servers %}
                        <option value="{{ select.2 }}">{{ select.1 }}</option>
                        {% endfor %}
                    </select>
                </td>
                <td style="padding-left: 50px;">{{ checkbox('haproxy_ext_prom', title=lang.admin_page.desc.ext_prom) }}</td>
                <td>
                    <span class="ui-button ui-widget ui-corner-all" id="haproxy_exp_install" title="{{lang.words.install|title()}} HAProxy Exporter">{{lang.words.install|title()}}</span>
                </td>
            </tr>
        </table>
        <table id="nginx-table">
            <caption><i class="fas fa-sitemap caption-icon2"></i><h3>NGINX Exporter</h3></caption>
            <tr class="overviewHead">
                <td class="padding10 first-collumn" style="width: 20%;">{{lang.words.current2|title()}} {{lang.words.installation}}</td>
                <td class="padding10 first-collumn" style="width: 30%;">{{lang.words.available|title()}} {{lang.words.versions}}</td>
                <td class="padding10 first-collumn" style="width: 30%;">{{lang.words.server|title()}}</td>
                <td class="help_cursor" style="width: 20%;" data-help="lang.admin_page.desc.ext_prom">{{lang.words.external|title()}} Prometheus</td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td id="cur_nginx_exp_ver" class="padding10 first-collumn"></td>
                <td class="padding10 first-collumn" style="width: 20%;">
                    {% set values = dict() %}
                    {% set values = {'0.6.0':'0.6.0', '0.7.0':'0.7.0', '0.9.0':'0.9.0', '0.10.0':'0.10.0', '0.11.0':'0.11.0'} %}
                    {{ select('nginxexpver',  values=values, selected='0.11.0') }}
                </td>
                <td class="padding10 first-collumn">
                    <select autofocus required name="nginx_exp_addserv" id="nginx_exp_addserv">
                        <option disabled selected>------</option>
                        {% for select in servers %}
                        <option value="{{ select.2 }}">{{ select.1 }}</option>
                        {% endfor %}
                    </select>
                </td>
                <td style="padding-left: 50px;">{{ checkbox('nginx_ext_prom', title=lang.admin_page.desc.ext_prom) }}</td>
                <td>
                    <span class="ui-button ui-widget ui-corner-all" id="nginx_exp_install" title="{{lang.words.install|title()}} NGINX Exporter">{{lang.words.install|title()}}</span>
                </td>
            </tr>
        </table>
        <table id="apache-table">
            <caption><i class="fas fa-feather-alt caption-icon2"></i><h3>Apache Exporter</h3></caption>
            <tr class="overviewHead">
                <td class="padding10 first-collumn" style="width: 20%;">{{lang.words.current2|title()}} {{lang.words.installation}}</td>
                <td class="padding10 first-collumn" style="width: 30%;">{{lang.words.available|title()}} {{lang.words.versions}}</td>
                <td class="padding10 first-collumn" style="width: 30%;">{{lang.words.server|title()}}</td>
                <td class="help_cursor" style="width: 20%;" data-help="{{lang.admin_page.desc.ext_prom}}">{{lang.words.external|title()}} Prometheus</td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td id="cur_apache_exp_ver" class="padding10 first-collumn"></td>
                <td class="padding10 first-collumn" style="width: 20%;">
                    {% set values = dict() %}
                    {% set values = {'0.10.0':'0.10.0', '0.13.4':'0.13.4', '1.0.1':'1.0.1'} %}
                    {{ select('apacheexpver',  values=values, selected='1.0.1') }}
                </td>
                <td class="padding10 first-collumn">
                    <select autofocus required name="apache_exp_addserv" id="apache_exp_addserv">
                        <option disabled selected>------</option>
                        {% for select in servers %}
                        <option value="{{ select.2 }}">{{ select.1 }}</option>
                        {% endfor %}
                    </select>
                </td>
                <td style="padding-left: 50px;">{{ checkbox('apache_ext_prom', title=lang.admin_page.desc.ext_prom) }}</td>
                <td>
                    <span class="ui-button ui-widget ui-corner-all" id="apache_exp_install" title="{{lang.words.install|title()}} Apache Exporter">{{lang.words.install|title()}}</span>
                </td>
            </tr>
        </table>
        <table id="keepalived-table">
            <caption><i class="fas fa-cloud caption-icon2"></i><h3>Keepalived Exporter</h3></caption>
            <tr class="overviewHead">
                <td class="padding10 first-collumn" style="width: 20%;">{{lang.words.current2|title()}} {{lang.words.installation}}</td>
                <td class="padding10 first-collumn" style="width: 30%;">{{lang.words.available|title()}} {{lang.words.versions}}</td>
                <td class="padding10 first-collumn" style="width: 30%;">{{lang.words.server|title()}}</td>
                <td class="help_cursor" style="width: 20%;" title="{{lang.admin_page.desc.ext_prom}}">{{lang.words.external|title()}} Prometheus</td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td id="cur_keepalived_exp_ver" class="padding10 first-collumn"></td>
                <td class="padding10 first-collumn" style="width: 20%;">
                    {% set values = dict() %}
                    {% set values = {'0.1.0':'0.1.0', '0.2.0':'0.2.0', '0.3.0':'0.3.0', '0.4.0':'0.4.0', '0.5.0':'0.5.0'} %}
                    {{ select('keepalivedexpver',  values=values, selected='0.5.0') }}
                </td>
                <td class="padding10 first-collumn">
                    <select autofocus required name="keepalived_exp_addserv" id="keepalived_exp_addserv">
                        <option disabled selected>------</option>
                        {% for select in servers %}
                        <option value="{{ select.2 }}">{{ select.1 }}</option>
                        {% endfor %}
                    </select>
                </td>
                <td style="padding-left: 50px;">{{ checkbox('keepalived_ext_prom', title=lang.admin_page.desc.ext_prom) }}</td>
                <td>
                    <span class="ui-button ui-widget ui-corner-all" id="keepalived_exp_install" title="{{lang.words.install|title()}} Keepalived Exporter">{{lang.words.install|title()}}</span>
                </td>
            </tr>
        </table>
        <table style="margin-top: 20px" id="node-table">
            <caption><i class="fas fa-server caption-icon2"></i><h3>Node Exporter</h3></caption>
            <tr class="overviewHead">
                <td class="padding10 first-collumn" style="width: 20%;">{{lang.words.current2|title()}} {{lang.words.installation}}</td>
                <td class="padding10 first-collumn" style="width: 30%;">{{lang.words.available|title()}} {{lang.words.versions}}</td>
                <td class="padding10 first-collumn" style="width: 30%;">{{lang.words.server|title()}}</td>
                <td class="help_cursor" style="width: 20%;" title="{{lang.admin_page.desc.ext_prom}}">{{lang.words.external|title()}} Prometheus</td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td id="cur_node_exp_ver" class="padding10 first-collumn"></td>
                <td class="padding10 first-collumn" style="width: 20%;">
                    {% set values = dict() %}
                    {% set values = {'1.2.0':'1.2.0', '1.2.2':'1.2.2', '1.3.0':'1.3.0', '1.3.1':'1.3.1', '1.5.0':'1.5.0', '1.6.1':'1.6.1'} %}
                    {{ select('nodeexpver',  values=values, selected='1.6.1') }}
                </td>
                <td class="padding10 first-collumn">
                    <select autofocus required name="node_exp_addserv" id="node_exp_addserv">
                        <option disabled selected>------</option>
                        {% for select in servers %}
                        <option value="{{ select.2 }}">{{ select.1 }}</option>
                        {% endfor %}
                    </select>
                </td>
                <td style="padding-left: 50px;">{{ checkbox('node_ext_prom', title=lang.admin_page.desc.ext_prom) }}</td>
                <td>
                    <span class="ui-button ui-widget ui-corner-all" id="node_exp_install" title="{{lang.words.install|title()}} Node Exporter">{{lang.words.install|title()}}</span>
                </td>
            </tr>
        </table>
        <div id="ajaxmon"></div>
        <div class="add-note alert addName alert-info" style="width: inherit; margin-right: 15px;">
            {{lang.words.read|title()}} <a href="https://roxy-wi.org/services/grafana" title="About Grafana and Prometheus servers" target="_blank">{{lang.words.about|title()}} Grafana and Prometheus servers</a>
            {{lang.words.and}} <a href="https://roxy-wi.org/howto/exporters" title="About Exporters" target="_blank">{{lang.words.about|title()}} Exporters</a>
        </div>
    </div>
    <div id="geolite2">
		<table>
			{% if not is_needed_tool %}
				<div style="text-align: center;">
					<h3>{{lang.admin_page.desc.no_ansible}}</h3>.
					<img src="{{ url_for('static', filename='images/no_servers.png')}}" alt="There is no server">
					<h4>
						{{lang.words.read|title()}} <a href="https://roxy-wi.org/installation#ansible" title="{{lang.words.install|title()}} Ansible" target="_blank">{{lang.words.here}}</a> {{lang.phrases.how_to_install}} Ansible.
					</h4>
				</div>
			{% else %}
			<caption><h3>Install GeoLite2</h3></caption>
			<tr class="overviewHead">
				<td class="padding10 first-collumn">{{lang.words.server|title()}}</td>
				<td class="padding10 first-collumn">{{lang.words.service|title()}}</td>
				<td class="padding10 first-collumn" style="width: 30%;">{{lang.words.current2|title()}} {{lang.words.installation}}</td>
				<td class="" style="width: 30%;" title="GeoLite2 DB is released every Tuesday. Should Roxy-WI update it?">{{lang.words.updating|title()}}</td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td class="padding10 first-collumn">
					<select autofocus required name="geoipserv" id="geoipserv">
						<option disabled selected>------</option>
						{% for select in servers %}
						<option value="{{ select.2 }}">{{ select.1 }}</option>
						{% endfor %}
					</select>
				</td>
				<td class="padding10 first-collumn">
					<select autofocus required name="geoip_service" id="geoip_service">
						<option disabled selected>------</option>
						<option value="haproxy">HAProxy</option>
						<option value="nginx">NGINX</option>
					</select>
				</td>
				<td id="cur_geoip" class="padding10"></td>
				<td class="checkbox">
					{{ checkbox('updating_geoip', title="Update the database?", checked='checked') }}
				</td>
				<td>
					<span class="ui-button ui-widget ui-corner-all" id="geoip_install" title="{{lang.words.install|title()}} GeoLite2" style="display: none;">{{lang.words.install|title()}}</span>
				</td>
			</tr>
			{% endif %}
		</table>
		<div id="ajax-geoip"></div>
		<div class="add-note alert addName alert-info" style="width: inherit; margin-right: 15px; margin-bottom: 15px;">
			{{lang.phrases.howto_user}} {{lang.words.read}} {{lang.words.in}} {{lang.words.this2}} <a href="https://roxy-wi.org/howto/geoip" title="GeoLite2 {{lang.words.descr|title()}}" target="_blank">{{lang.words.article}}</a>
		</div>
		<table style="min-width: 40%;">
			<tr class="overviewHead">
				<th colspan=13 style="background-color: #d1ecf1; padding: 10px;">
					<span id="table_metrics_head" style="margin-left: 5px;">{{lang.admin_page.desc.country_codes}}</span>
					<select id="geoip_select">
					{% for code in geoip_country_codes %}
					<option>{{code.name}} {{code.code}}</option>
					{% endfor %}
					</select>
				</th>
			</tr>
		</table>
	</div>
</div>
{% endif %}
<script>
    $('#geoip_select').select2();
    $( function() {
        $("#geoip_select").selectmenu("destroy");
    });
</script>
{% endblock %}
