{% 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 %}
                                        {% include "afat/partials/statistics/character/tables/character-fats.html" with id="corp-main-characters" character_data_template="corp-main-characters" characters=main_chars %}
                                    {% else %}
                                        <div class="afat-no-data aa-callout aa-callout-info">
                                            <p>{% translate "This corporation doesn't seem to have any main characters registered." %}</p>
                                        </div>
                                    {% 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">
                                        <div class="afat-loading-character-data text-center">
                                            {% include "afat/partials/common/spinner.html" %}
                                        </div>

                                        <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>

                                            {% include "afat/partials/statistics/character/tables/character-fats.html" with id="character-alt-characters" %}
                                        </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">
                    {% include "afat/partials/statistics/character/tables/character-fats.html" with id="corp-members" character_data_template="fats-all-characters" characters=chars %}
                </div>
            </div>
        </div>
    </div>
</div>
