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

<div id="tab-members" class="tab-pane fade border-0" role="tabpanel" aria-labelledby="tab-members">
    <div class="row pt-3">
        <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">
                            <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>
