{% extends 'layout.html' %}


{% block javascript %}

  <script src="{{ url_for('static', filename='js/define-filter.js') }}" defer>
  </script>
  <script>
    const FILTER_ENDPOINT = "{{ url_for('credit.update_statements_display') }}";
  </script>
  <script type="module" src="{{ url_for('static', filename='js/update-statements-display.js') }}">
  </script>

{% endblock %}


{% block left_sidebar %}

  <nav id="sidebar-nav-menu">
    <ul>

      <li>
        <a class="button" href="#top">
          <img class="icon" src="{{ url_for('static', filename='img/icons/arrow-up.png') }}" />
        </a>
      </li>

      <li>
        <a class="button" href="#bottom">
          <img class="icon" src="{{ url_for('static', filename='img/icons/arrow-down.png') }}" />
        </a>
      </li>

    </ul>
  </nav>

{% endblock %}


{% block header %}

  <a name="top"></a>

  <h1>
    {% block title %}Credit Card Statements{% endblock %}
  </h1>

{% endblock %}


{% block content %}

  <div id="card-filter">
    {% for card in filter_cards %}

      <a id="{{ card.account.bank.bank_name }}-{{ card.last_four_digits }}" class="card {{ 'active selected' if card.active else 'inactive' }}" data-card-id="{{ card.id }}">
        {{ card.account.bank.bank_name }} (-{{card.last_four_digits }})
      </a>

    {% endfor %}
  </div>

  <div id="credit-statements-container">
    {% include 'credit/statements.html' %}
  </div>

  <a name="bottom"></a>

{% endblock %}