{% load i18n %}

<div class="d-flex flex-wrap gap-3 mb-3">
    <!-- Dashboard -->
    <div class="card flex-grow-1" style="min-width: 350px;" id="dashboard-card">
        <div class="card-body rounded-top">
            <h5 class="card-title text-center">
                <span id="dashboard-info"></span>
            </h5>
            <hr>
            <div>
                <table class="table w-100" id="manage-dashboard">
                    <tbody>
                        <tr>
                            <td>{% trans "Tax Amount:" %}</td>
                            <td class="text-end">
                               <i class="fa-solid fa-circle-question fa-fw" data-bs-tooltip="aa-taxsystem" title="{% trans 'Click on the value to edit' %}"></i>
                               <span href="#" id="taxamount" data-url=""></span>
                            </td>
                        </tr>
                        <tr>
                            <td>{% trans "Tax Period:" %}</td>
                            <td class="text-end">
                                <i class="fa-solid fa-circle-question fa-fw" data-bs-tooltip="aa-taxsystem" title="{% trans 'Click on the value to edit' %}"></i>
                                <span href="#" id="period" data-url=""></span>
                            </td>
                        </tr>
                        <tr>
                            <td>{% trans "Wallet Activity:" %}</td>
                            <td class="text-end">
                                <i class="fa-solid fa-circle-question fa-fw" data-bs-tooltip="aa-taxsystem" title="{% trans 'Last 30 days' %}"></i>
                                <span id="activity"></span>
                            </td>
                        </tr>
                        <tr>
                            <td>{% trans "Payment Filters:" %}</td>
                            <td class="text-end">
                                <a href="{{ manage_filter_url }}" data-bs-tooltip="aa-taxsystem" title="{% trans 'Automatic Payments Filters' %}">
                                    <span class="btn btn-primary">{% translate 'Manage Filters' %}</span>
                                </a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <!-- Update Status -->
    <div class="card flex-grow-1" style="min-width: 350px;" id="update-status-card">
        <div class="card-body rounded-top">
            <h5 class="card-title text-center">
                <span id="dashboard-update">{% translate "Update Information" %}</span>
            </h5>
            <hr>
            <div>
                <table class="table w-100" id="manage-update-dashboard">
                    <tbody>
                        <tr>
                            <td>{% trans "Update Status:" %}</td>
                            <td class="text-end" id="update_status_icon"></td>
                        </tr>
                        <tr>
                            <td>{% trans "Last Wallet Update:" %}</td>
                            <td class="text-end" id="update_wallet"></td>
                        </tr>
                        <tr>
                            <td>{% trans "Last Division Update:" %}</td>
                            <td class="text-end" id="update_divisions"></td>
                        </tr>
                        <tr>
                            <td>{% trans "Last Division Names Update:" %}</td>
                            <td class="text-end" id="update_division_name"></td>
                        </tr>
                        <tr>
                            <td>{% trans "Last Member Update:" %}</td>
                            <td class="text-end" id="update_members"></td>
                        </tr>
                        <tr>
                            <td>{% trans "Last Payments Update:" %}</td>
                            <td class="text-end" id="update_payments"></td>
                        </tr>
                        <tr>
                            <td>{% trans "Last Tax Accounts Deadlines Update:" %}</td>
                            <td class="text-end" id="update_deadlines"></td>
                        </tr>

                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <!-- Division -->
    <div class="card flex-grow-1" style="min-width: 350px;" id="dashboard-division-card">
        <div class="card-body rounded-top">
            <h5 class="card-title text-center">
                <span id="dashboard-division">{% translate "Divisions" %}</span>
            </h5>
            <hr>
            <div>
                <table class="table w-100" id="manage-dashboard-division">
                    <tbody>
                        <tr>
                            <td id="division1_name" >{% trans "Division" %}: 1</td>
                            <td class="text-end" id="division1"></td>
                        </tr>
                        <tr>
                            <td id="division2_name" >{% trans "Division" %}: 2</td>
                            <td class="text-end" id="division2"></td>
                        </tr>
                        <tr>
                            <td id="division3_name" >{% trans "Division" %}: 3</td>
                            <td class="text-end" id="division3"></td>
                        </tr>
                        <tr>
                            <td id="division4_name" >{% trans "Division" %}: 4</td>
                            <td class="text-end" id="division4"></td>
                        </tr>
                        <tr>
                            <td id="division5_name" >{% trans "Division" %}: 5</td>
                            <td class="text-end" id="division5"></td>
                        </tr>
                        <tr>
                            <td id="division6_name" >{% trans "Division" %}: 6</td>
                            <td class="text-end" id="division6"></td>
                        </tr>
                        <tr>
                            <td id="division7_name" >{% trans "Division" %}: 7</td>
                            <td class="text-end" id="division7"></td>
                        </tr>
                        <!-- Line Break -->
                        <tr>
                            <td></td>
                            <td></td>
                        </tr>
                        <!-- Line Break -->
                        <tr>
                            <td id="total_balance_name" >{% trans "Total" %}:</td>
                            <td class="text-end" id="total_balance"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <!-- Statistics -->
    <div class="card flex-grow-1" style="min-width: 350px;" id="dashboard-statistics-card">
        <div class="card-body rounded-top">
            <h5 class="card-title text-center">
                <span id="dashboard-statistics">{% translate "Statistics" %}</span>
            </h5>
            <hr>
            <div>
                <table class="table w-100" id="manage-dashboard-statistics">
                    <tbody>
                        <tr>
                            <td>{% trans "Payments" %}:</td>
                            <td class="text-end" id="statistics_payments"></td>
                        </tr>
                        <tr>
                            <td><button type="button" class="ps-4 btn btn-warning btn-sm btn-square"></button> {% trans "Pending Payments" %}</td>
                            <td class="text-end" id="statistics_payments_pending"></td>
                        </tr>
                        <tr>
                            <td><button type="button" class="ps-4 btn btn-success btn-sm btn-square"></button> {% trans "Automated Payments" %}</td>
                            <td class="text-end" id="statistics_payments_auto"></td>
                        </tr>
                        <tr>
                            <td><button type="button" class="ps-4 btn btn-success btn-sm btn-square"></button> {% trans "Edited Payments" %}</td>
                            <td class="text-end" id="statistics_payments_manually"></td>
                        </tr>
                        <tr>
                            <td>{% trans "Members" %}:</td>
                            <td class="text-end" id="statistics_members"></td>
                        </tr>
                        <tr>
                            <td><button type="button" class="ps-4 btn btn-success btn-sm btn-square"></button> {% trans "Mains" %}</td>
                            <td class="text-end" id="statistics_members_mains"></td>
                        </tr>
                        <tr>
                            <td><button type="button" class="ps-4 btn btn-info btn-sm btn-square"></button> {% trans "Alts" %}</td>
                            <td class="text-end" id="statistics_members_alts"></td>
                        </tr>
                        <tr>
                            <td><button type="button" class="ps-4 btn btn-danger btn-sm btn-square"></button> {% trans "Unregistered" %}</td>
                            <td class="text-end" id="statistics_members_not_registered"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <!-- Tax Account -->
    <div class="card flex-grow-1" style="min-width: 350px;" id="dashboard-psystem-card">
        <div class="card-body rounded-top">
            <h5 class="card-title text-center">
                <span id="dashboard-statistics">{% translate "Tax Accounts" %}</span>
            </h5>
            <hr>
            <div>
                <table class="table w-100" id="manage-dashboard-psystem">
                    <tbody>
                        <tr>
                            <td>{% trans "Accounts" %}:</td>
                            <td class="text-end" id="statistics_payment_users"></td>
                        </tr>
                        <tr>
                            <td>{% trans "Active Accounts" %}:</td>
                            <td class="text-end" id="statistics_payment_users_active"></td>
                        </tr>
                        <tr>
                            <td>{% trans "Inactive Accounts" %}:</td>
                            <td class="text-end" id="statistics_payment_users_inactive"></td>
                        </tr>
                        <tr>
                            <td>{% trans "Deactivated Accounts" %}:</td>
                            <td class="text-end" id="statistics_payment_users_deactivated"></td>
                        </tr>
                        <tr>
                            <td>{% trans "Tax Paid" %}:</td>
                            <td class="text-end" id="psystem_payment_users_paid"></td>
                        </tr>
                        <tr>
                            <td>{% trans "Tax Unpaid" %}:</td>
                            <td class="text-end" id="psystem_payment_users_unpaid"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>