{% extends "layout.html" %}
{% block title %}{{date.strftime('%B %Y')}}{% endblock %}
{% block head %}
  <script>
    function toggleAccounts() {
      document.querySelector('#accounts').classList.toggle('open');
    }
    function showAllTransactions() {
      document.querySelector('.transactions.hidden').classList.remove('hidden');
      document.querySelector('#show-more').remove();
    }
    function uploadFile() {
      document.querySelector('#update-form > input[type="file"]').click();
    }
    function submitUpdate(files) {
      if (files.length) {
        document.querySelector('#update-form').submit();
      }
    }
  </script>
{% endblock %}
{% block page_header %}
  <div id="accounts" onclick="toggleAccounts()">
    <div class="balance">{{account_balance or 0}}{{config['CURRENCY']}}</div>
    <div class="yearly-savings">
      Savings this year: {{budgets.savings}}{{config['CURRENCY']}} / {{budgets.savings_goal}}{{config['CURRENCY']}} ({{budgets.savings - budgets.savings_goal}}{{config['CURRENCY']}})
    </div>
    <table>
      {% for acc in accounts %}
      <tr>
        <td width="80%">{{acc.title}}</td><td>{{acc.amount}}{{config['CURRENCY']}}</td>
      </tr>
      {% endfor %}
    </table>
  </div>
  <div id="header">
    <a href="/{{prev_date.year}}-{{prev_date.month}}" title="Previous month">&laquo;</a>
    <h1 id="month">{{date.strftime('%B %Y')}}</h1>
    {% if not next_date %}
      <form action="{{url_for('update')}}" method="POST" enctype="multipart/form-data" id="update-form">
        {% if bank_adapter_type == 'file' %}<input type="file" name="file" onchange="submitUpdate(this.files)">{% endif %}
        <button type="{{ 'submit' if bank_adapter_type == 'web' else 'button' }}" title="Update data"
          {% if bank_adapter_type == 'file' %}onclick="uploadFile()"{% endif %}>&#8635;</button>
      </form>
    {% else %}
      <a href="/{{next_date.year}}-{{next_date.month}}" title="Next month">&raquo;</a>
    {% endif %}
  </div>
{% endblock %}
{% block page %}
  {% if budget %}
    {% include "_budget.html" %}
    {% if budget.transactions %}
    <hr>
    {% include "_transactions.html" %}
    {% endif %}
  {% else %}
    <p id="nodata">No data for this month</p>
  {% endif %}
{% endblock %}
{% block footer %}
  <div id="footer">
    <a href="{{url_for('budget', year=date.year, month=date.month)}}">budget.json</a> -
    <a href="{{url_for('transactions', year=date.year, month=date.month)}}">transactions.json</a> -
    <a href="{{url_for('transactions_csv', year=date.year, month=date.month)}}">transactions.csv</a> -
    <a href="{{url_for('edit_config')}}">config</a> -
    <a href="{{url_for('logout')}}">logout</a>
  </div>
{% endblock %}