{% extends "app_home/base.html" %}
{% load static %}
{% load i18n %}

{% block navbar_app %}
{% include 'app_home/_sidebar.html' %}
{% endblock %}

{% block title %}
<H2>{{ STATUS_APPNAME|default:"StatusPage" }}</H2>
<hr>{% endblock %}

{% block content %}


<style type="text/css">

    .item.up::before {
        content: "⬤";
        color: #4CAF50;
        font-size: 15px;
        display: inline-block;
        margin: 0 5px 0 0;
    }
    .item.down::before {
        content: "⬤";
        color: #F44336;
        font-size: 15px;
        display: inline-block;
        margin: 0 5px 0 0;
    }
    .item.na::before {
        content: "⬤ ";
        color: #777;
        font-size: 15px;
        display: inline-block;
        margin: 0 5px 0 0;
    }
</style>

<!-- <H6>filter ...</H6> 
<hr> -->



{% for monitorgroup in monitorgroups %}  
<h4>{{ monitorgroup.displayname }}</h4>


<div class="container text-center">{% for monitor in monitorgroup.monitors %}
    <div class="row">

        <div class="col-4 text-start fw-bold">
            <a href="{% url 'app_status:detail' monitor.keyname %}" data-bs-toggle="tooltip" data-bs-title="5 min." data-bs-placement="left">
                {% if monitor.live_status == 'OK' %} <div class="text-start fw-bold item up">
                  {% elif monitor.live_status == 'KO' %} <div class="text-start fw-bold item down">
                  {% else %} <div class="text-start fw-bold item na">{% endif %}
                  
                {{ monitor.displayname }} 
              </div>
            </a>

        </div>
    

    
      <div class="col">
        <div class="text-start fw-bold">{{ monitor.hourly_ratio_pretty }}</div>
        <div class="text-start fw-lighter ">{% translate 'Last hour' %}</div>
        
      </div>
      <div class="col">
        <div class="text-start fw-bold">{{ monitor.daily_ratio_pretty }}</div>
        <div class="text-start fw-lighter ">{% translate 'Last 24 hours' %}</div>
      </div>
      <div class="col">
        <div class="text-start fw-bold">{{ monitor.monthly_ratio_pretty }}</div>
        <div class="text-start fw-lighter ">{% translate 'Last 30 days' %}</div>
      </div>
      <div class="col">
        <div class="text-start fw-bold">{{ monitor.quaterly_ratio_pretty }}</div>
        <div class="text-start fw-lighter ">{% translate 'Last 90 days' %}</div>
      </div>
      <div class="col">
        <div class="text-start fw-bold">{{ monitor.yearly_ratio_pretty }}</div>
        <div class="text-start fw-lighter ">{% translate 'Last year' %}</div>
      </div>

    </div>
  <p></p>
  {% endfor %}
</div>
  {% endfor %}
    
  

<hr>

<!-- Monitor details -->
{% for monitor in monitors %}
<p class="h2">{{ monitor.displayname }}</p>
{% include 'app_status/_monitor_hourly.html' %}
{% endfor %}

{% endblock %}