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

<script>
    const characters = [];
</script>

<div id="tab-fats" class="tab-pane fade show active card card-default border-0" role="tabpanel" aria-labelledby="tab-fats">
    <div class="card-body">
        <h4>
            {% translate "Your most recent FATs" %}
        </h4>

        <p>{% translate "Only characters that have recent FATs are shown. <small>(latest 10 FATs per character)</small>" %}</p>

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

                    <script>
                        characters.push({
                            charId: {{ character.character_id }},
                            charName: '{{ character.character_name }}'
                        });
                    </script>
                {% endfor %}
            </ul>

            <div class="tab-content border-top">
                {% for character in characters %}
                    <div id="content-{{ character.character_id }}" class="tab-pane fade card-default{% if forloop.first %} show active{% endif %}">
                        <div class="card-body">
                            <table class="table table-striped table-hover w-100" id="recent-fats-character-{{ character.character_id }}">
                                <thead>
                                    <tr>
                                        <th>{% translate "Fleet name" %}</th>
                                        <th>{% translate "Fleet type" %}</th>
                                        <th>{% translate "Doctrine" %}</th>
                                        <th>{% translate "Location" %}</th>
                                        <th>{% translate "Ship" %}</th>
                                        <th>{% translate "EVE time" %}</th>
                                    </tr>
                                </thead>

                                <tbody></tbody>

                                <tfoot>
                                    <tr>
                                        <td colspan="6">
                                            {% include "afat/partials/fatlinks/fatlink-list-legend.html" %}
                                        </td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                {% endfor %}
            </div>
        {% else %}
            <div class="aa-callout aa-callout-warning" role="alert">
                <p>
                    {% translate "No recent FAT activity registered for any of your characters." %}
                </p>
            </div>
        {% endif %}
    </div>
</div>
