{% load i18n %}

<div id="user_votes_modal_{{uid}}" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">{{user.persons}}</h4>
      </div>
      <div class="modal-body">
      	<div style="height: 300px;width: 300px">
        	<canvas id="commentUserChart{{uid}}" width="200" height="200"></canvas>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">{% trans 'Close' %}</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
	
	<script>
(function(){
	var ctx = document.getElementById("commentUserChart{{uid}}").getContext("2d");
	var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["{% trans 'Positive' %}", "{% trans 'Negative' %}", "{% trans 'Neutral' %}", ],
        datasets: [{
            label: '{% trans '# type of comments' %}',
            data: [{{stats.positive}}, {{stats.negative}}, {{stats.neutral}},],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
            ],
            borderWidth: 1
        }]
    },
    options: {
    	legend: { display: false},
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});
})();

$('#user_votes_modal_{{uid}}').modal('show');
	</script>
</div>