{% extends "layout.html" %}
{% block content %}
<br>
<h2>Toi aussi abuse des pouvoirs du Rézo avec les Metzthernets !</h2>
  <p id="play" style="text-align: center; font-size: 1.5em">
      <a href="{{url_for('play')}}">Jouer</a>
  </p>

  <div id="container" style="min-width: 310px; max-width: 600px; margin: 0 auto"></div>
  <h2>Historique personnel</h2>

  {% if bans_hist != [] %}
  <ul id="history">
      {% for entry in bans_hist %}
      <li class="{{ entry[0] }}" class="events">
      <span class="normal"> {{ entry[1] }}</span>
      </li>
      {% endfor %}
  </ul>
  {% else %}
  <p>
      Rien pour l'instant
  </p>

  {% endif %}
  <script type="text/javascript">
  $(function () {
      Highcharts.chart('container', {
          chart: {
              plotBackgroundColor: null,
              plotBorderWidth: 0,
              plotShadow: false
          },
          title: {
              text: 'État du Rézo',
              align: 'center',
              verticalAlign: 'middle',
              y: 60
          },
          tooltip: {
              pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
          },
          plotOptions: {
              pie: {
                  dataLabels: {
                      enabled: true,
                      distance: -50,
                      style: {
                          fontWeight: 'bold',
                          color: 'white'
                      }
                  },
                  startAngle: -90,
                  endAngle: 90,
                  center: ['50%', '75%']
              },
          },
          series: [{
              type: 'pie',
              name: 'Pourcentage',
              innerSize: '50%',
              data: [
                  {
                    name: 'Tranchés',
                    y: {{ stats[0] }},
                    color: '#FF0000',
                  },{
                    name: 'Vivants',
                    y: {{ stats[1] }},
                    color: '#FFCC00',
                  }
              ]
          }]
      });
  });
  </script>
{% endblock %}