{% extends "base.html" %}
{% block title %}Account {{account.account_name}}{% endblock title %}
{% block body %}
<div class="flex">
  <span class="text-lg grow">{{account.account_name}}</span>
  <div>
    <a href="/accounts/id/{{account.account_id}}/transactions/add">+</a>
  </div>
</div>
<div class="mb-2">
  <h2>Transactions</h2>
  <button class="ars-button" onclick="onRecategorize()">Recategorize</button>
  <table width="100%">
    <thead>
      <tr>
        <th width="40%">Description</th>
        <th width="20%">Date</th>
        <th width="10%">Amount</th>
        <th width="10%">Acc</th>
        <th width="15%">Category</th>
        <th width="5%">Link</th>
      </tr>
    </thead>
    <tbody>
      {% for tx in transactions %}
      <tr>
        <td>{{tx.description}}</td>
        <td>{{tx.tx_date}}</td>
        <td>{{tx.amount/100}}</td>
        <td>{{tx.accumulated/100}}</td>
        <td>{% if tx.category %}{{categories[tx.category]}}{% endif %}</td>
        <td><a href="/transaction/{{ tx.transaction_id }}">Go to</a></td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  <div class="flex">
    <div class="flex grow flex-row justify-evenly">
      <div>
        <a href="/accounts/id/{{account.account_id}}?entries={{n_entries}}&page={{prev_page}}">&lt;</a>
      </div>
      <div>{{curr_page + 1}}</div>
      <div>
        <a href="/accounts/id/{{account.account_id}}?entries={{n_entries}}&page={{next_page}}">&gt;</a>
      </div>
    </div>
    <div>
      <select onchange="onSelect(event)">
        <option {% if n_entries == 10 %}selected="selected"{% endif %}>10</option>
        <option {% if n_entries == 20 %}selected="selected"{% endif %}>20</option>
        <option {% if n_entries == 50 %}selected="selected"{% endif %}>50</option>
        <option {% if n_entries == 100 %}selected="selected"{% endif %}>100</option>
        <option {% if n_entries == 200 %}selected="selected"{% endif %}>200</option>
      </select>
    </div>
  </div>
</div>
<style>
  table {
    border-spacing: 0.2rem;
  }
</style>
<script>
  function onRecategorize() {
    fetch(
      '/api/v1/accounts/id/{{account.account_id}}/recategorize',
      {method: 'POST'}
    ).then(e=>console.log(e));
  }

  function onSelect(e) {
    let params = new URLSearchParams(window.location.search);
    params.set("entries", e.target.value);
    window.location.search = params.toString();
  }

  function formatDate(date) {
    return date.substr(0, date.indexOf('T'));
  }
</script>
{% endblock body %}