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

<div id="tab-members" class="tab-pane active card card-default fade border-0" role="tabpanel" aria-labelledby="tab-members">
    <div class="card-body">
        <ul class="nav nav-pills">
            {% translate "By main character" as tab_title %}
            {% include "afat/partials/common/navigation/tab.html" with is_active_tab=True tab_id="fatsbymaincharacter" tab_title=tab_title %}

            {% translate "All characters" as tab_title %}
            {% include "afat/partials/common/navigation/tab.html" with is_active_tab=False tab_id="fatsallcharacters" tab_title=tab_title %}
        </ul>

        <div class="tab-content pt-3">
            <div id="tab-fatsbymaincharacter" class="tab-pane fade show active card card-default border-0" role="tabpanel" aria-labelledby="tab-fatsbymaincharacter">
                <div class="card-body">
                    <div class="row">
                        <div id="col-corp-main-characters" class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <span class="card-title">{% translate "Main characters" %}</span>
                                </div>

                                <div class="card-body">
                                    <p>
                                        {% blocktranslate with month_name=month|month_name %}
                                            {{ corp }} main characters and their accumulated FATs for {{ month_name }} {{ year }}.
                                        {% endblocktranslate %}
                                    </p>
                                    {% if main_chars %}
                                        <table class="table table-striped table-hover w-100" id="corp-main-characters">
                                            <thead>
                                                <tr>
                                                    <th>{% translate "Character" %}</th>
                                                    <th class="text-end">{% translate "FATs" %}</th>
                                                    <th><!-- {% translate "Character statistics" %} --></th>
                                                </tr>
                                            </thead>

                                            <tbody>
                                                {% for main_char in main_chars.items %}
                                                    {% for main in main_char %}
                                                        {% if main.name %}
                                                            <tr>
                                                                <td>{{ main.name }}</td>
                                                                <td class="text-end">{{ main.fats }}</td>
                                                                <td class="text-end">
                                                                    <button
                                                                        class="btn btn-primary btn-sm btn-afat-corp-stats-view-character"
                                                                        data-character-name="{{ main.name }}"
                                                                        data-character-id="{{ main.id }}"
                                                                        data-year="{{ year }}"
                                                                        data-month="{{ month }}"
                                                                        data-url="{% url 'afat:statistics_ajax_get_monthly_fats_for_main_character' main.id year month %}"
                                                                    >
                                                                        <i class="fa-solid fa-eye"></i>
                                                                    </button>
                                                                </td>
                                                            </tr>
                                                        {% endif %}
                                                    {% endfor %}
                                                {% endfor %}
                                            </tbody>
                                        </table>
                                    {% endif %}
                                </div>
                            </div>
                        </div>

                        <div id="col-character-alt-characters" class="col-md-6 d-none">
                            <div class="card card-default">
                                <div class="card-header">
                                    <span class="card-title">
                                        <span id="afat-corp-stats-main-character-name"></span>
                                        »
                                        {% translate "All characters" %}
                                    </span>
                                </div>

                                <div class="card-body">
                                    <div class="afat-character-alt-characters">
                                        {% include "afat/partials/common/spinner.html" %}

                                        <div class="afat-no-data aa-callout aa-callout-warning d-none">
                                            <p>{% translate "This pilot does not seem to have any FATs on any associated character." %}</p>
                                        </div>

                                        <div class="afat-character-alt-characters-table d-none">
                                            <p>{% translate "All characters associated with this main character." %}</p>

                                            <table class="table table-striped table-hover w-100" id="character-alt-characters">
                                                <thead>
                                                    <tr>
                                                        <th>{% translate "Character" %}</th>
                                                        <th class="text-end">{% translate "FATs" %}</th>
                                                    </tr>
                                                </thead>

                                                <tbody>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div id="tab-fatsallcharacters" class="tab-pane fade card card-default border-0" role="tabpanel" aria-labelledby="tab-fatsallcharacters">
                <div class="card-body">
                    <table class="table table-striped table-hover w-100" id="corp-members">
                        <thead>
                        <tr>
                            <th>{% translate "Character" %}</th>
                            <th>{% translate "FATs" %}</th>
                            <th><!-- {% translate "Character statistics" %} --></th>
                        </tr>
                        </thead>

                        <tbody>
                        {% for key, value in chars.items %}
                            <tr>
                                <td>{{ key }}</td>
                                <td>{{ value.0 }}</td>
                                <td class="text-end">
                                    <a class="btn btn-primary btn-sm" href="{% url 'afat:statistics_character' value.1 year month %}">
                                        <i class="fa-solid fa-eye"></i>
                                    </a>
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
