{% extends "finances/layout.html" %}
{% load crispy_forms_tags %}
{% load finances_tags %}

{% block title %}
Add Budget Categories
{% endblock %}

{% block content %}

<form method="POST">
    {% csrf_token %}
    <fieldset class="form-group">
        <legend class="border-bottom mb-4">Add Budget Categories</legend>
        {{ form|crispy }}
    </fieldset>
    <div class="form-group">
        <button class="btn btn-outline-secondary" type="submit">
            Add Category
        </button>
    </div>
</form>

<br>
<br>

<h2>Current Categories</h2>

<table id="table" class="table">
    <tr>
        <th>Category</th>
        <th>Amount ($)</th>
        <th>Type</th>
        <th style="text-align:right">Active?</th>
    </tr>
    {% for category in budget_categories %}
    <tr>
        <td>{{ category.category }}</td>
        <td>{{ category.amount|currency }}</td>
        <td>{{ category.category_type }}</td>
    </tr>
    {% endfor %}
</table>

<br>

{% endblock %}