{% extends "base.html" %}
{% load django_bootstrap5 %}

{% block page_title %}Expenses{% endblock %}


{% block content %}

<ul>
    {% for expense in expenses %}
    <li>{{ category }}</a></li>
    {% endfor %}
</ul>


<div class="accordion" id="accordionPanelsStayOpenExample">
    {% for expense in expenses %}
    <div class="accordion-item">
        <h2 class="accordion-header" id="panelsStayOpen-headingOne">
            <button class="accordion-button" type="button" data-bs-toggle="collapse"
                data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true"
                aria-controls="panelsStayOpen-collapseOne">
                {{ exepense.name }}
            </button>
        </h2>
        <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show"
            aria-labelledby="panelsStayOpen-headingOne">
            <div class="accordion-body">
                <ul class="list-group">
                    <li class="list-group-item">{{ expense.date }}</li>
                    <li class="list-group-item">{{ expense.amount }}</li>
                    {% if expense.category %}
                    <li class="list-group-item">A third item</li>
                    {% endif %}
                    {% if expense.source %}
                    <li class="list-group-item">A third item</li>
                    {% endif %}
                </ul>
            </div>
        </div>
    </div>
    {% endfor %}
</div>


{% endblock content %}