{% extends "base.html" %}
{% from 'include/input_macros.html' import select %}
{% block title %}{{ lang.menu_links.history.title }} {{ smon_name }}{% endblock %}
{% block h2 %}{{ lang.menu_links.history.title }} {{ smon_name }}{% endblock %}
{% block content %}
{% set checking_types = {'1': 'TCP/UDP', '2': 'HTTP', '4': 'Ping', '5': 'DNS'} %}
{% if user_subscription['user_status'] == 0 or user_subscription['user_plan'] == 'user' %}
	{% include 'include/no_sub.html' %}
{% else %}
<link href="{{ url_for('static', filename='css/chart.min.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='css/smon.css') }}" rel="stylesheet">
<script src="/inc/chart.min-4.3.0.js"></script>
<script src="/inc/metrics.js"></script>
<script src="/inc/smon.js"></script>
<div class="row wrap1">
{% for s in smon %}
    <div id="smon_name" class="col-md-8">
    {% if check_id == 2 %}
        <a href="{{s.url}}" title="{{lang.words.open|title()}}" target="_blank">{{s.url}}</a>
    {% elif check_id == 1 %}
       {{s.ip}}:{{s.port}}
    {% elif check_id == 5 %}
        {{s.ip}} {{lang.phrases.resource_record_type}}: {{s.record_type|upper()}}
    {% else %}
        {{s.smon_id.name}}
    {% endif %}
    </div>
{% endfor %}
</div>
<div class="row statuses wrap">
    <div class="col-md-8" style="transform: translateX(0px);">
        <div id="smon_history_statuses"></div>
        <div id="check_interval">{{lang.words.checking|title()}} {{lang.words.every}} {{check_interval}} {{lang.words.minutes2}}</div>
    </div>
    <div class="col-md-4" id="cur_status"></div>
</div>
<div class="row statuses wrap">
    {% for s in smon %}
    <div class="col">
        <h4>{{lang.words.checking|title()}}</h4>
        <p class="smon_stats">({{lang.words.type|title()}})</p>
        <span class="smon_value" title="{{last_resp_time}}">{{checking_types[check_id|string()]}}</span>
    </div>
    <div class="col">
        <h4>{{lang.words.response|title()}}</h4>
        <p class="smon_stats">({{lang.words.current|title()}})</p>
        <span class="smon_value" title="{{last_resp_time}}">{{last_resp_time}}ms</span>
    </div>
    <div class="col">
        <h4>{{lang.words.average2|title()}} {{lang.words.response}}</h4>
        <p class="smon_stats">(24-{{lang.words.hours}})</p>
        <span class="smon_value">{{avg_res_time}}ms</span>
    </div>
    <div class="col">
        <h4>{{lang.words.uptime}}</h4>
        <p class="smon_stats">(24-{{lang.words.hours}})</p>
        <span class="smon_value">{{uptime}}%</span>
    </div>
    <div class="col">
        <h4>{{lang.words.cert_expire}}</h4>
        {% if s.smon_id.ssl_expire_date is not none %}
            {% set ssl_date = s.smon_id.ssl_expire_date.split()[0] %}
        {% else %}
            {% set ssl_date = 'N/A' %}
        {% endif %}
        <p class="smon_stats">({{ssl_date}})</p>
        <span class="smon_value">{{cert_day_diff}} {{lang.words.days}}</span>
    </div>
    {% endfor %}
</div>
<div class="chart-container_overview" style="width: 98%;">
    <canvas id="metrics_3" role="img"></canvas>
</div>
{% endif %}
<script>
    function showSmonHistory() {
		let metrics = new Promise(
			(resolve, reject) => {
				removeData();
				getSmonHistoryCheckData('{{dashboard_id}}');
			});
		metrics.then();
        show_statuses('{{dashboard_id}}', '{{check_id}}', '#smon_history_statuses');
	}
	showSmonHistory();
</script>
{% endblock %}