{% 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">
    {% block sidebar %}
    <div class="col-md-12">
    <div class="row">
       <div class="col-md-6">
        {% include "/settings/acc_avatar.html" %}
       </div>
  
       <div class="col-md-6">
        <div class="panel panel-info">
        <div class="panel-heading">Wallet Graph</div>
        <div class="panel-body">
        <canvas id="transchart" height="80"></canvas>
        </div>
        </div>
       </div>
    </div>
    </div>
    {% endblock %}

    <div class="col-md-12">
    <div class="panel panel-info">
    <div class="panel-heading">Last 20 Transactions</div>
    <div class="panel-body">

      <div class="table-responsive">
      <table class="table table-hover table-striped table-condensed cf">
          <thead>
            <tr>
              <th>Date</th>
              <th>Description</th>
              <th>Amount</th>
            </tr>
          </thead>
 
          <tbody>
          {% for transaction in transactions %}
            {% if transaction.value < 0 %}
              <tr class="default">
                <td data-title="Date">{{ moment(transaction.date_created).format('lll') }}</td>
                <td data-title="Description">{{ transaction.description }}</td>
                <td data-title="Amount">{{ transaction.value|abs }} {{ transaction.currency }}</td>
            {% else %}
              <tr class="default">
                <td data-title="Date">{{ moment(transaction.date_created).format('lll') }}</td>
                <td data-title="Description">{{ transaction.description }}</td>
                <td data-title="Amount">{{ transaction.value|abs }} {{ transaction.currency }}</td>
            {% endif %}
              </tr>
           </tbody>
           {% endfor %}
      </table>
      </div>

        </div>
      </div>


  </div>

  </div>

{% endblock %}