{% include 'panel/p_header.twig' %}
<script src="assets/js/Chart.min.js"></script>
<!-- Checks -->
<section>
<div class="col-lg-12">
  <div class="card">
    <div class="card-header d-flex align-items-center">
      <h2 class="h5 display">Historial de los últimos {{pagedata.cant}} checks de {{pagedata.name}} - {{pagedata.group}}</h2>
    </div>
  <div class="card">
    <div class="card-block">
        <div style="width:75%;">
            <canvas id="canvas"></canvas>
        </div>
        <!-- Lastest fails -->
        <h2>{{T_.lastest_fails}}</h2>
        <table class="table table-striped table-hover">
            <thead>
              <tr>
                <th>Fecha</th>
              </tr>
            </thead>
            <tbody>
        {% for err in pagedata.fails %}
              <tr>
                <td>{{err}}</td>
                </td>
              </tr>
        {% endfor %}
             </tbody>
          </table>
            <!-- Script Chartjs -->
        	<script>
                var barChartData = {
                    //labels: ["Correctos", "Errores"],
                    datasets: [{
                        label: "Correctos",
                        backgroundColor: "#2B86FF",
                        borderColor: "#2B86FF",
                        data: [ {{ pagedata.cgood }} ]
                    },{
                        label: "Errores",
                        backgroundColor: "#ff2a2a",
                        borderColor: "#ff2a2a",
                        data: [ {{ pagedata.cbad }} ]
                    }]
                };
                var config = {
                    type: 'bar',
                    data: barChartData,

                    options: {
                        responsive: true,
                        legend: {
                            position: 'top',
                        },
                        title: {
                            display: true,
                            text: 'Checks correctos y erroneos'
                        },
                        scales: {
                            yAxes: [{
                                ticks: {
                                    beginAtZero: true
                                }
                            }]
                        }
                    }
                };

                window.onload = function() {
                    var ctx = document.getElementById("canvas").getContext("2d");
                    window.myBar = new Chart(ctx, config);
                };
        	</script>


            </div>
          </div>
        </div>
    </div>
</section>

{% include 'footer.twig' %}