{% load i18n %}

<div class="d-flex flex-wrap">
    <!-- Dashboard -->
    <div class="card flex-grow-1 d-none" style="min-width: 350px;" id="dashboard-card">
        <div class="card-body bg-secondary rounded-top">
            <h5 class="card-title text-center">
                <span id="dashboard-info"></span>
            </h5>
            <hr>
            <div>
                <table class="table table-dark table-striped w-100 d-none" id="manage-dashboard">
                    <tbody>
                        <tr>
                            <td>{% trans "Tax Amount:" %}</td>
                            <td class="text-end">
                               <i class="fa-solid fa-circle-question fa-fw" data-tooltip-toggle="taxsystem-tooltip" 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-tooltip-toggle="taxsystem-tooltip" 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-tooltip-toggle="taxsystem-tooltip" title="{% trans 'Last 30 days' %}"></i>
                                <span id="activity"></span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <!-- Update Status -->
    <div class="card flex-grow-1 d-none" style="min-width: 350px;" id="update-status-card">
        <div class="card-body bg-secondary rounded-top">
            <h5 class="card-title text-center">
                <span id="dashboard-update"></span>
            </h5>
            <hr>
            <div>
                <table class="table table-dark table-striped w-100 d-none" 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_division"></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 Payment System Update:" %}</td>
                            <td class="text-end" id="update_payment_system"></td>
                        </tr>

                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <!-- Division -->
    <div class="card flex-grow-1 d-none" style="min-width: 350px;" id="dashboard-division-card">
        <div class="card-body bg-secondary rounded-top">
            <h5 class="card-title text-center">
                <span id="dashboard-division">{% translate "Division Dashboard" %}</span>
            </h5>
            <hr>
            <div>
                <table class="table table-dark table-striped w-100 d-none" 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="division8_name" >{% trans "Total" %}:</td>
                            <td class="text-end" id="division8"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <!-- Statistics -->
    <div class="card flex-grow-1 d-none" style="min-width: 350px;" id="dashboard-statistics-card">
        <div class="card-body bg-secondary rounded-top">
            <h5 class="card-title text-center">
                <span id="dashboard-statistics">{% translate "Statistics Dashboard" %}</span>
            </h5>
            <hr>
            <div>
                <table class="table table-dark table-striped w-100 d-none" 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>
    <!-- Payment System -->
    <div class="card flex-grow-1 d-none" style="min-width: 350px;" id="dashboard-psystem-card">
        <div class="card-body bg-secondary rounded-top">
            <h5 class="card-title text-center">
                <span id="dashboard-statistics">{% translate "Payment System Dashboard" %}</span>
            </h5>
            <hr>
            <div>
                <table class="table table-dark table-striped w-100 d-none" 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>