{% load afat %}
{% load evelinks %}
{% load i18n %}

<div id="tab-mine" class="tab-pane fade show active card card-default border-0" role="tabpanel" aria-labelledby="tab-mine">
    <div class="card-body">
        <h4>
            {% blocktranslate %}Your monthly stats for {{ year }}{% endblocktranslate %}
        </h4>

        <p>
            {% translate "Only months with FAT data for the selected year are shown." %}<br>
            {% translate "Only characters that have FATs for the selected year are shown." %}
        </p>

        {% if charstats.total|length > 0 %}
            <div class="row">
                <div class="col-md-4 col-lg-3">
                    <header class="mb-3">
                        <h5>{% translate "Total monthly FATs" %}</h5>
                    </header>

                    <p>
                        {% translate "This is the monthly total FAT count for all your characters combined." %}
                    </p>

                    <table class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th>{% translate "Month" %}</th>
                                <th class="text-end">{% translate "FAT count" %}</th>
                            </tr>
                        </thead>

                        <tbody>
                            {% for month, fatcount in charstats.total.items %}
                                <tr>
                                    <td>{{ month|month_name }}</td>
                                    <td class="text-end">{{ fatcount }}</td>
                                </tr>
                            {% endfor %}
                        </tbody>

                        <tfoot>
                            <tr>
                                <td>
                                    <strong>
                                        {% blocktranslate %}Total FATs for {{ year }}{% endblocktranslate %}
                                    </strong>
                                </td>
                                <td class="text-end">
                                    <strong>{{ charstats.total|sum_values }}</strong>
                                </td>
                            </tr>
                    </table>
                </div>

                <div class="col-md-8 col-lg-9">
                    <header class="mb-3">
                        <h5>{% translate "Monthly FATs by character" %}</h5>
                    </header>

                    <ul class="nav nav-pills">
                        {% for character in charstats.characters %}
                            {% include "afat/partials/common/navigation/tab-character.html" with forloop=forloop character_id=character.2 character_name=character.0 %}
                        {% endfor %}
                    </ul>

                    <div class="tab-content">
                        {% for character in charstats.characters %}
                            <div id="content-{{ character.2 }}" class="tab-pane fade card-default{% if forloop.first %} show active{% endif %}">
                                <div class="mt-3">
                                    <table class="table table-striped table-hover">
                                        <thead>
                                            <tr>
                                                <th>{% translate "Month" %}</th>
                                                <th class="text-end">{% translate "FAT count" %}</th>
                                                <th></th>
                                            </tr>
                                        </thead>

                                        <tbody>
                                            {% for month, fatcount in character.1.items %}
                                                <tr>
                                                    <td>{{ month|month_name }}</td>
                                                    <td class="text-end">{{ fatcount }}</td>
                                                    <td class="text-end">
                                                        <a
                                                            href="{% url 'afat:statistics_character' character.2 year month %}"
                                                            class="btn btn-primary btn-sm"
                                                            data-bs-toggle="tooltip"
                                                            data-bs-html="true"
                                                            data-bs-title="{% translate 'Statistics for' %}:<br>{{ character.0 }} ({{ month|month_name }} {{ year }})"
                                                        >
                                                            <i class="fa-solid fa-eye"></i>
                                                        </a>
                                                    </td>
                                                </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        {% else %}
            <div class="aa-callout aa-callout-warning">
                <p>
                    {% blocktranslate %}No FATs for {{ year }} for any of your characters …{% endblocktranslate %}
                </p>
            </div>
        {% endif %}
    </div>
</div>