{% include 'header.twig' %}
<!-- Pages -->
<section>
<div class="col-lg-10 mhcenter">
              <div class="card">
                <div class="card-header d-flex align-items-center">
                  <h2 class="h5 display">{{T_.statdif1}}</h2>
                </div>
                <div class="card-block">
                  <table class="table table-striped table-hover">
                    <thead>
                      <tr>
                        <!--<th>#</th>-->
                        <th>{{T_.name}}</th>
                        <th>{{T_.status_uptime}}</th>
                        <th>{{T_.last_check}}</th>
                        <th>{{T_.last_err}}</th>
                      </tr>
                    </thead>
                    <tbody>
                      {% for check in checks %}
                        {% if check.ID_G != beforegroup %}
                        <tr>
                          <th colspan="4" class="thgrp">{{check.nameGroup}}</th>
                        </tr>
                        {% endif %}
                        {% set beforegroup = check.ID_G %}
                      <tr>
                        <td>{{check.name}}</td>
                        

						{# "Switch" type #}
						{% if check.ID_TC == 1 or check.ID_TC == 2 or check.ID_TC == 4 %} {# Ping, HttpCode, SQL DB #}
							<td>
							{#IF/SWITCH uptime to text#}
							{%if check.uptime <= 100 and check.uptime > 90 %}
								<span class='green' data-tooltip='Type of check: {{check.nameCheck}}' data-tooltip-position='top'>{{T_.status_right}}</span>
							{%elseif check.uptime <= 95 and check.uptime > 60 %}
								<span class='blue' data-tooltip='Type of check: {{check.nameCheck}}' data-tooltip-position='top'>{{T_.status_lproblems}}</span>
							{%elseif check.uptime <= 60 and check.uptime > 15 %}
								<span class='orange' data-tooltip='Type of check: {{check.nameCheck}}' data-tooltip-position='top'>{{T_.status_problems}}</span>
							{%elseif check.uptime <= 15 and check.uptime >= 0 %}
								<span class='red' data-tooltip='Type of check: {{check.nameCheck}}' data-tooltip-position='top'>{{T_.status_outofserv}}</span>
							{%elseif check.uptime == 255 %}
								<span class='blue' data-tooltip='Type of check: {{check.nameCheck}}' data-tooltip-position='top'>{{T_.status_maintenance}}</span>
							{%else%}
								<span class='grey' data-tooltip='Type of check: {{check.nameCheck}}' data-tooltip-position='top'>{{T_.status_empty}}</span>
							{%endif%}
							{#END IF/SWITCH#}
							 ({{ check.uptime}}%)
							</td>
							{% if check.uptime != -1 %}{#Only if records exists#}
								<td>
									{{check.dateLastChk}} - 
									{% if check.failedLastChk == 0 %}
										<span style="color:green">{{T_.status_right}}</span>
									{% else %}
										<span style="color:red">{{T_.failed}}</span>
									{% endif %}
								</td>
							{%else%}
								<td>Dame tiempo para recopilar estadísticas</td>
							{%endif%}
								<td>
									{%if check.dateLastErr is not null%}
										{{check.dateLastErr}}
									{%else%}
										{{T_.no_errs}}
									{%endif%}
								</td>

						{% endif %}
						{% if check.ID_TC == 3 %}
							<td colspan="3">
							<div style="width:170px;height:90px;">
								<canvas id="visits{{ check.ID_C }}"></canvas>
							</div>
							 <script>
								var visits{{ check.ID_C }} = document.getElementById("visits{{ check.ID_C }}").getContext("2d");
								var Chart{{ check.ID_C }} = new Chart(visits{{ check.ID_C }}, {
								type: 'bar',
								  data: {
								  labels: [{{ check.dateArray | raw}}],
								  datasets: [
									  {
										label: "Visitas", 
										backgroundColor: "rgba(100,176,243,1)", // Color del sombreado de la grafica en ese lugar
										borderColor: "#4ba4f3", // Colores de la linea y punteado 
										pointBorderColor: "#4ba4f3",
										pointBackgroundColor: "#fff",
										data: [{{ check.visitsArray }}],
								  	}
								  ]
								},
								options: {
									legend: {display: false},
									scales:{
										yAxes:[{ticks:{beginAtZero: true}}]
									}
								},
								});
							</script>
							</td>
						{% endif %}

						{# Fin Switch #}

                        
                      </tr>
                      {% endfor %}
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
</section>

<div style="margin-top: 3em;"></div>

<!-- Noticias -->
<section>
	<div class="col-lg-10" style="margin: 0 auto;">
              <div class="card">
                <div class="card-header d-flex align-items-center">
                  <h2 class="h5 display">Noticias sobre los servicios</h2>
                </div>
                <div class="card-block">
                	{# {% if user.nick != "" %}
						<h3>Añadir incidencia: (Usa Markdown)</h3>
						<form action="index.php?do=addincident" method="POST">
							<textarea name="text" style="width:90%;height:150px;"></textarea>
							<br/><button type="submit">Enviar</button>
						</form>
					{% endif %} #}
                	{% for onenews in news %}
					<h3>Day {{ onenews.day }}</h3>
					<div class="incident">
						{{ onenews.text | raw }}

						{% if user.nick != "" %}
						<hr/>
						<button type="submit" onclick="window.location.href='?do=delincident&ID_Inc={{ incident.ID_Inc }}">Delete</button>
						{% endif %}
					</div>
					{% endfor %}
                </div>
    </div>
</section>
{% include 'footer.twig' %}