{%extends 'layout.html.twig' %}
{% block stylesheets %}
  {{parent()}}
  <link href="{{ asset('css/trivial.css') }}" media="screen" rel="stylesheet" type="text/css">
{% endblock %}
{% block body %}
    {{ parent() }}
         <div class="container marketing lista">
           <div class="competition-return">    
              <div class="competition-return-image"><img src="{{asset('img/competition-return.png')}}"></div>
                  <a class="competition-return-text" href="{{ path('record_list', {id: trivial.id}) }}">Volver al Ránking</a>
            </div>
              <div class="fondo col-xs-12">
                <div class="record-trivial-name col-md-12 col-xs-12">
                {{trivial.name}}
              </div>
              <div class="col-md-3 col-xs-12 record-trivial-img"><img class="trivial_img" src="{{asset('images/trivials/'~trivial.image) }}"></div>
              <div class="col-md-9 col-xs-12 badge-trivial-medallas record-title">{{user.name}} {{user.firstSurname}} {{user.secondSurname}}</div>
              <div class="table-responsive col-xs-12">
                 <table class="table gametool-table">
                  <thead>
                    <tr>
                      <th>Nº INTENTO</th>
                      <th>PREGUNTAS CONTESTADAS</th>
                      <th>CORRECTAS</th>
                      <th>INCORRECTAS</th>
                      <th>PUNTUACIÓN</th>
                      <th>DETALLES</th>
                    </tr>
                  </thead>
                  <tbody>

                {% for intentos in attempt %} 
                  <tr>                
                    <td>{{intentos.numeroIntento}}</td>
                    <td>{{intentos.preguntas_totales}}</td>
                    <td>{{intentos.correctas}}</td>
                    <td>{{intentos.incorrectas}}</td>
                    <td>{{intentos.puntucion}}</td>
                    <td><a class="record-trivial-tracking" href="{{ path('tracking_list', {id: intentos.attemptId}) }}">ver</a></td>
                  </tr>
                {% endfor %}
                </tbody>
              </table>
            </div>

            <div class="col-xs-12 tracking-bar-chart">
               <canvas id="myChart" width="400" height="400"></canvas>
            </div> 
    </div>
  </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
<script>
var data1='{{ cont1 }}';
var data2='{{ cont2 }}';
var percentage = Math.round((data1/(parseInt(data1)+parseInt(data2)))*100);
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Correctas", "Incorrectas"],
        datasets: [{
            label: '',
            data: [data1, data2],
            backgroundColor: [
                'rgba(95, 214, 134, 1)',
                'rgba(255, 153, 153, 1)'
                
            ],
        }]
    },
    options: {
      maintainAspectRatio: false,
      title: {
            display: true,
            text: percentage+'% de respuestas correctas'
        },
        legend: { display: false },
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true,
                    stepSize:1,
                }
            }]
        }
    }
});

</script>


{% endblock %}