{% load i18n %}
{% load memberaudit %}


<div id="memberaudit-dashboard" class="mb-3">
    <div class="card">
        <div class="card-header">
            {% translate 'Dashboard' %}
        </div>

        <div class="card-body">
            <div class="d-flex flex-wrap justify-content-center align-items-center">
                <!-- Online Players -->
                <div class="card mx-2 mb-3" style="width: 300px;">
                    <div class="card-body d-flex flex-row align-items-center">
                        <span class="me-3">
                            <i class="fa-solid fa-server fa-3x"></i>
                        </span>

                        <span class="d-flex flex-column">
                            <span class="h6 fw-bold">
                                {% translate "Online Players" %}
                            </span>

                            <span
                                id="dashboard-player-count"
                                data-url="{% url 'memberaudit:player_count_data' %}">
                                ?
                            </span>
                        </span>
                    </div>
                </div>

                <!-- Registered characters -->
                <div class="card mx-2 mb-3" style="width: 300px;">
                    <div class="card-body d-flex flex-row align-items-center">
                        <span class="me-3">
                            <i class="fa-solid fa-user-group fa-3x"></i>
                        </span>

                        <span class="d-flex flex-column">
                            <span class="h6 fw-bold">
                                {% translate "Registered Characters" %}
                            </span>

                            <span>
                                {{ registered_count }} ({{ registered_percent|default_if_none:"?" }}%)
                            </span>
                        </span>
                    </div>
                </div>

                <!-- Total character ISK -->
                <div class="card mx-2 mb-3" style="width: 300px;">
                    <div class="card-body d-flex flex-row align-items-center">
                        <span class="me-3">
                            <i class="fa-solid fa-wallet fa-3x"></i>
                        </span>

                        <span class="d-flex flex-column">
                            <span class="h6 fw-bold">
                                {% translate "Total Wallet ISK" %}
                            </span>

                            <span>
                                {% natural_number total_wallet_isk %}
                            </span>
                        </span>
                    </div>
                </div>

                <!-- Total Mining ISK -->
                <div class="card mx-2 mb-3" style="width: 300px;">
                    <div class="card-body d-flex flex-row align-items-center">
                        <span class="me-3">
                            <i class="fa-regular fa-gem fa-3x"></i>
                        </span>

                        <span class="d-flex flex-column">
                            <span class="h6 fw-bold">
                                {% translate "Total Mined ISK" %} <small>{% translate "(this month)" %}</small>
                            </span>

                            <span>
                                {% natural_number total_mined_isk %}
                            </span>
                        </span>
                    </div>
                </div>

                <!-- Total Ratted ISK -->
                <div class="card mx-2 mb-3" style="width: 300px;">
                    <div class="card-body d-flex flex-row align-items-center">
                        <span class="me-3">
                            <i class="fa-regular fa-money-bill-1 fa-3x"></i>
                        </span>

                        <span class="d-flex flex-column">
                            <span class="h6 fw-bold">
                                {% translate "Total Ratted ISK" %} <small>{% translate "(this month)" %}</small>
                            </span>

                            <span>
                                {% natural_number total_ratted_isk %}
                            </span>
                        </span>
                    </div>
                </div>

                <!-- Total Character Skillpoints -->
                <div class="card mx-2 mb-3" style="width: 300px;">
                    <div class="card-body d-flex flex-row align-items-center">
                        <span class="me-3">
                            <i class="fa-solid fa-graduation-cap fa-3x"></i>
                        </span>

                        <span class="d-flex flex-column">
                            <span class="h6 fw-bold">
                                {% translate "Total Character Skillpoints" %}
                            </span>

                            <span>
                                {% natural_number total_character_skillpoints %}
                            </span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
