{% extends 'layout.html' %}


{% block header %}

  <h1>
    {% block title %}
      Transaction Tags
    {% endblock %}
  </h1>

{% endblock %}


{% block content %}

  <div id="transaction-tags">

    <h2>Tags</h2>

    <div id="tags-container" class="tag-container">

      <ul class="tags">
        {% include 'common/tag_tree.html' %}
      </ul>

      <img class="root new-tag button" src="{{ url_for('static', filename='img/icons/plus-thick.png') }}" />

    </div>

  </div>

{% endblock %}


{% block javascript %}

  <script>
    const ADD_TAG_ENDPOINT = "{{ url_for('banking.add_tag') }}";
    const REMOVE_TAG_ENDPOINT = "{{ url_for('banking.delete_tag') }}";
  </script>
  <script type="module" src="{{ url_for('static', filename='js/bind-tag-actions.js') }}">
  </script>

{% endblock %}