{% extends "main.html" %}

{% load static %}

{% block title %}Sondages{% endblock %}

{% block content %}
  <div class="default-container">
    <p><a href="{% url 'sondages:accueil' %}">« Sondages</a></p>

    <h1>{{ sondage.titre }}</h1>

    <p>
      <em>Sondage créé par {{ sondage.auteur.get_full_name }}.</em><br/>
      {% if sondage.description %}
        {{ sondage.description|linebreaksbr }}<br/>
      {% endif %}
      {% if peut_voter %}
        <a href="{% url 'sondages:vote' sondage.slug %}">Retour au sondage</a>
      {% endif %}
    </p>

    <canvas id="myChart" width="400" height="150"></canvas>

    <a href="{% url 'sondages:liste-resultats' sondage.slug %}">Voir la liste des votes</a>
  </div>
{% endblock %}

{% block js %}
  <script src="{% static "js/chart.min.js" %}"></script>
  <script>
    window.addEventListener("load", function () {
      var ctx = document
        .getElementById('myChart')
        .getContext('2d');
      var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
          labels: [
            {% for choix in choix_sondage %}
              '{{ choix }}',
            {% endfor %}
          ],
          datasets: [
            {
              data: [
                {% for choix in choix_sondage %}
                  {{ choix.votes }},
                {% endfor %}
              ],
              backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
              ],
              borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
              ],
              borderWidth: 1
            }
          ]
        },
        options: {
          plugins: {
            legend: {
              display: false
            },
            title: {
              display: true,
              text: 'Nombre de votes'
            }
          },
          scales: {
            y: {
              beginAtZero: true,
              ticks: {
                precision: 0
              }
            }
          }
        }
      });
    });
  </script>
{% endblock %}