{% extends "base.html" %}

{% block scripts %}
{{ super() }}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js" integrity="sha256-SiHXR50l06UwJvHhFY4e5vzwq75vEHH+8fFNpkXePr0=" crossorigin="anonymous"></script>

<script type="text/javascript"> 
Chart.defaults.global.hover.mode = 'nearest';
var ctx = document.getElementById("transchart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: {{ labelslist | safe }},
        datasets: [{
            data: {{ translist }},
            fill: false,
            borderColor: "rgb(75, 192, 192)",
            lineTension:0.1 }]
    },
    options: {
        hover: {
            // Overrides the global setting
            mode: 'index'
        },
        legend: {
            display: false
            },
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});
</script>
{% endblock %}

{% block page_content %}
<div class="row">
    <div class="col-md-12">
    <div class="panel panel-info">
      <div class="panel-heading">Transactions</div>
      <div class="panel-body">

      <canvas id="transchart" height="80"></canvas>
     
        <div class="table-responsive">
          <table class="table table-hover table-striped table-condensed cf">
          <thead>
            <tr>
              <th></th>
              <th>Description</th>
              <th>Amount</th>
              <th>Date</th>
            </tr>
          </thead>
 
          <tbody>
          {% for transaction in transactions %}
            {% if transaction.value > 0 %}
              <tr class="success">
                <td><span class="glyphicon glyphicon-plus"></span></td>
                <td>{{ transaction.description }}</td>
                <td>{{ transaction.value }} {{ transaction.currency }}</td>
                <td>{{ moment(transaction.date_created).format('lll') }}</td>
            {% else %}
              <tr class="danger">
                <td><span class="glyphicon glyphicon-minus"></span></td>
                <td>{{ transaction.description }}</td>
                <td>{{ transaction.value }} {{ transaction.currency }}</td>
                <td>{{ moment(transaction.date_created).format('lll') }}</td>
            {% endif %}
              </tr>
           </tbody>
           {% endfor %}
        </table>
       </div>

        </div>
      </div>


  </div>

  </div>

{% endblock %}