{% extends "base.html" %}
{% block content %}
{% from 'include/input_macros.html' import input, checkbox, select %}
<script src="/inc/smon.js"></script>
<script src="/inc/users.js"></script>
<script src="/inc/fontawesome.min.js"></script>
<script src="/inc/jquery.timeago.js" type="text/javascript"></script>
{% if user_status == 0 %}
	{% include 'include/no_sub.html' %}
{% elif smon_error != '' %}
<div style="text-align: center;">
	<br />
	<h3>You have not installed SMON service. Read <a href="https://roxy-wi.org/services.py?service=smon"
	title="Simple monitoring network ports with alerting via Telegram and WEB panel" target="_blank">here</a> how to install SMON service</h3>
</div>
{% elif smon_status.0 == 'failed' %}
<div style="text-align: center;">
	<br />
	<h3>SMON service is not run. Run the SMON service <a href="users.py#services" title="Roxy-WI services" target="_blank">here</a> before use</h3>
</div>
{% elif smon|length == 0 and action != 'add' and action != 'history' and action != 'checker_history' %}
<div style="text-align: center;">
	<br />
	<h3>You do not have added servers in SMON service. Create your first server <a href="smon.py?action=add" title="Roxy-WI SMON" target="_blank">here</a> before use</h3>
	<br />
	<iframe width="860" height="515" src="https://www.youtube.com/embed/bJtRJeHG5B0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
{% elif smon|length == 0 and action != 'add' and action == 'history' %}
<div style="text-align: center;">
	<br />
	<h3>No events added yet. Click here <a href="smon.py?action=add" title="Roxy-WI SMON" target="_blank">here</a> to see if new check have been added</h3>
	<br />
</div>
{% elif smon|length == 0 and action != 'add' and action == 'checker_history' %}
<div style="text-align: center;">
	<br />
	<h3>
		No events added yet. Check if there are any Checker are enabled on the "<a href="hapservers.py" title="HAProxy Overview">HAProxy Overview</a>"
		or on "<a href="hapservers.py?service=nginx" title="NGINX Overview">NGINX Overview</a>"
		or on "<a href="hapservers.py?service=apache" title="Apache Overview">Apache Overview</a>"
		or on "<a href="hapservers.py?service=keepalived" title="Keepalived Overview">Keepalived Overview</a>" pages
	</h3>
	<br />
</div>
{% else %}
{% if action == 'add' %}
<table class="overview" id="ajax-smon">
	<thead>
		<tr class="overviewHead">
			<th class="padding10 first-collumn" style="width: 150px;">IP</th>
			<th style="width: 2%;">Port</th>
			<th style="width: 5%;">Enabled</th>
			<th style="width: 10%;">Protocol</th>
			<th style="width: 15%;">URI</th>
			<th style="width: 20%;">Body</th>
			<th style="width: 15%;">Telegram</th>
			<th style="width: 15%;">Slack</th>
			<th style="width: 10%;">Group</th>
			<th style="width: 100%;">Description</th>
			<th></th>
			<th></th>
		</tr>
	</thead>
	<tbody>
		{{env}}
		{% for s in smon %}
			<tr id="smon-{{s.0}}">
				{% include 'include/smon_server.html' %}
		{% endfor %}
	</tbody>
</table>
<br /><span class="add-button" title="Add a new server" id="add-smon-button">+ Add</span>
<br /><br />
<div id="ajax"></div>
<div class="add-note addName alert-info" style="width: inherit; margin-right: 15px;">
	You can read the description of all parameters <a href="https://roxy-wi.org/services.py?service=smon" title="SMON service description" target="_blank">here</a>
</div>
<div id="smon-add-table" style="display: none;">	
	<table class="overview">
		{% include 'include/tr_validate_tips.html' %}
		<tr>
			<td class="padding20">
				IP
				<span class="need-field">*</span>
			</td>
			<td>
				{{ input('new-smon-ip') }}
			</td>
		</tr>
		<tr>
			<td class="padding20">
				Port
				<span class="need-field">*</span>
			</td>
			<td>
				{{ input('new-smon-port', type='number', size='4') }}
			</td>
		</tr>
		<tr>
			<td class="padding20">Enable</td>
			<td>
				{{ checkbox('new-smon-enable', checked='checked') }}
			</td>
		</tr>
		<tr>
			<td class="padding20">Protocol</td>
			<td>
				{% set values = dict() %}
				{% set values = {'':'', 'http':'http','https':'https'} %}
				{{ select('new-smon-proto',  values=values, selected='') }}
			</td>
		</tr>
		<tr>
			<td class="padding20">URI</td>
			<td>{{ input('new-smon-uri') }}</td>
		</tr>
		<tr>
			<td class="padding20">Body</td>
			<td>{{ input('new-smon-body') }}</td>
		</tr>
		<tr>
			<td class="padding20">Telegram</td>
			<td>
				<select id="new-smon-telegram">
					<option value="0">Disabled</option>
				{% for t in telegrams %}
					<option value="{{t.id}}">{{t.chanel_name}}</option>
				{% endfor %}
				</select>
			</td>
		</tr>
		<tr>
			<td class="padding20">Slack</td>
			<td>
				<select id="new-smon-slack">
					<option value="0">Disabled</option>
				{% for t in slacks %}
					<option value="{{t.id}}">{{t.chanel_name}}</option>
				{% endfor %}
				</select>
			</td>
		</tr>
		<tr>
			<td class="padding20">Group</td>
			<td>{{ input('new-smon-group') }}</td>
		</tr>
		<tr>
			<td class="padding20">Description</td>
			<td>{{ input('new-smon-description') }}</td>
		</tr>
	</table>
	{% include 'include/del_confirm.html' %}
{% elif action == 'history' or action == 'checker_history' %}
	{% include 'ajax/alerts_history.html' %}
{% else %}
	<div class="main" id="smon_dashboard">
		{% include 'ajax/smon_dashboard.html' %}
	</div>
{% endif %}
</div>
{% endif %}
{% endblock %}