{% extends "navbar.html" %}
        {% block content %}
        <div class="container-fluid flex-grow-1">
          <h1 class="h3 mb-2 text-gray-800">Add Transaction</h1>
          <div class="card shadow mb-4">
            <div class="card-body">
              <div class="table-responsive">
                <form action="{{ url_for('transactions.add') }}" method="POST"> 
                {{ form.hidden_tag()}}
                {{ form.csrf_token }}
                {% include 'includes/display_flash_message.html' %}
                        <table class="table table-hover">
                            <tbody>
                                <tr>
                                    <td>Date</td>
                                    <td>
                                        {% if form.date.errors -%}
                                        <div class="form-group has-error">
                                            <label class="control-label" for="inputError">{{ form.date.errors[0] }}</label>
                                        {% endif -%}
                                        {{ form.date(rows="1", class="form-control", type="date") }}
                                        {% if form.date.errors -%}
                                        </div>
                                        {% endif -%}
                                    </td>
                                </tr>
                                <tr>
                                    <td>Debit</td>
                                    <td>
                                        {% if form.debit.errors -%}
                                        <div class="form-group has-error">
                                            <label class="control-label" for="inputError">{{ form.debit.errors[0] }}</label>
                                        {% endif -%}
                                        {{ form.debit(rows="1", class="form-control") }}
                                        {% if form.debit.errors -%}
                                        </div>
                                        {% endif -%}
                                    </td>
                                </tr>
                                <tr>
                                    <td>Credit</td>
                                    <td>
                                        {% if form.credit.errors -%}
                                        <div class="form-group has-error">
                                            <label class="control-label" for="inputError">{{ form.credit.errors[0] }}</label>
                                        {% endif -%}
                                        {{ form.credit(rows="1", class="form-control") }}
                                        {% if form.credit.errors -%}
                                        </div>
                                        {% endif -%}
                                    </td>
                                </tr>
                                <tr>
                                    <td>Memo</td>
                                    <td>
                                        {% if form.memo.errors -%}
                                        <div class="form-group has-error">
                                            <label class="control-label" for="inputError">{{ form.memo.errors[0] }}</label>
                                        {% endif -%}
                                        {{ form.memo(rows="1", class="form-control") }}
                                        {% if form.memo.errors -%}
                                        </div>
                                        {% endif -%}
                                    </td>
                                </tr>
                                <tr>
                                    <td>Account</td>
                                    <td>
                                        {% if form.account.errors -%}
                                        <div class="form-group has-error">
                                            <label class="control-label" for="inputError">{{ form.account.errors[0] }}</label>
                                        {% endif -%}
                                        <select id="account" name="account" class="form-control">
                                        {% for choice in form.account.choices %}
                                            <option value="{{ choice.0 }}">{{choice.1}}</option>
                                        {% endfor %}
                                        </select>
                                        {% if form.account.errors -%}
                                        </div>
                                        {% endif -%}
                                    </td>
                                </tr>
                                <tr>
                                    <td>Bank Account</td>
                                    <td>
                                        {% if form.bankaccount.errors -%}
                                        <div class="form-group has-error">
                                            <label class="control-label" for="inputError">{{ form.bankaccount.errors[0] }}</label>
                                        {% endif -%}
                                        <select id="bankaccount" name="bankaccount" class="form-control">
                                        {% for choice in form.bankaccount.choices %}
                                            <option value="{{ choice.0 }}">{{choice.1}}</option>
                                        {% endfor %}
                                        </select>
                                        {% if form.account.errors -%}
                                        </div>
                                        {% endif -%}
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <div class="input-group btn-block" style="padding-top:10px;">
                            <div class="pull-left" style="padding-right:5px;">
                                <input type="submit" class="btn btn-primary" value="Add">
                            </div>
                        </div>
                        </form>
                </div>
              </div>
            </div>
          </div>
        </div>
        {% endblock %}