{% extends "client/base_site.html" %}
{% load i18n static %}
{% load humanize %}
{% block title %}Customer Accounts - Dashboard{% endblock %}

{% block topbar %}
    {% include "client/topbar.html" %}
{% endblock %}

{% block content %}
    <div class="page-content">
        <div class="page-container">
            {% block breadcrumbs %}
                {% include "client/breadcrumbs.html" with title="Customer Accounts" %}
            {% endblock %}
            <div class="row row-cols-xxl-3 row-cols-md-2 row-cols-">
                {% for account in accounts %}
                    <div class="col">
                        <div class="card overflow-hidden">
                            <div class="card-header border-bottom card-tabs d-flex flex-wrap align-items-center gap-2">
                            <div class="flex-grow-1">
                                <h4 class="header-title text-uppercase">{{ account.account_number }}<!--{{ account.accounttype.account_category }} Account--></h4>
                            </div>
                        </div>
                            <div class="card-body">
                                <div class="d-flex align-items-center gap-2 my-2 py-1">
                                    <h3 class="mb-0 fw-bold">{{ account.balance|floatformat:2|intcomma }}  <small class="text-muted">{{ account.accounttype.currency }}</small></h3>
                                </div>

                                <a href="{% url 'client-account-deposit' account.account_id %}" class="btn btn-success">Deposits</a>
                                <a href="{% url 'client-account-withdraw' account.account_id %}" class="btn btn-primary" style="float: right;">Withdraw</a>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>                   
        </div>
        {% block footer %}{% include "client/footer.html" %}{% endblock %}
</div>
{% endblock %}