{% extends 'base.html' %}
{% block title %}Budget Monthly Analysis{% endblock title %}

{% block content %}
<main>
    <div class="container mt-5">
        <div class="card">
            <div class="card-header bg-primary text-white">
                Budget Categories
                <br/>
                <label for="month-selector">Choose a month:</label>

                <select name="month-selector" id="month-selector">
                    {% for month in all_months %}
                        <option value="{{month}}">{{month}}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="card-body">
                
                <div class="table-responsive">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th scope="col">ID</th>
                                <th scope="col">Name</th>
                                <th scope="col">Total Month Cost</th>
                            </tr>
                        </thead>
                        <tbody id="table-body">
                            <tr><td>Loading...</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</main>
<script src="{{url_for('.static', filename='budget_monthly_analysis.js')}}"></script>
{% endblock content %}