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

<div id="mine" class="tab-pane fade in active panel panel-default">
    <div class="panel-body">
        <h4>{% translate "Your monthly stats" %}</h4>

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

        <ul class="nav nav-pills">
            {% for char in charstats %}
                <li class="afat-stats-character-tab{% if forloop.first %} active{% endif %}">
                    <a data-toggle="tab" href="#{{ char.2 }}">
                        <img class="img-circle" src="{{ char.2|character_portrait_url:32 }}" alt="{{ char.0 }}" style="margin-right: 0.25rem;">
                        {{ char.0 }}
                    </a>
                </li>
            {% endfor %}
        </ul>

        <div class="tab-content">
            {% if charstats %}
                {% for char in charstats %}
                    <div id="{{ char.2 }}" class="tab-pane panel-default fade{% if forloop.first %} in active{% endif %}">
                        <div class="panel-body">
                            {% if char.1|length > 0 %}
                                <table class="table table-striped table-hover">
                                    <thead>
                                        <tr>
                                            <th>{% translate "Month" %}</th>
                                            <th>{% translate "FAT Count" %}</th>
                                            <th></th>
                                        </tr>
                                    </thead>

                                    <tbody>
                                        {% for month, fatcount in char.1.items %}
                                            <tr>
                                                <td>{{ month|month_name }}</td>
                                                <td>{{ fatcount }}</td>
                                                <td class="text-right">
                                                    <a href="{% url 'afat:statistics_character' char.2 year month %}" class="btn btn-primary btn-sm">
                                                        <span class="glyphicon glyphicon-eye-open"></span>
                                                    </a>
                                                </td>
                                            </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            {% else %}
                                <div class="alert alert-warning" role="alert">
                                    <p>{% translate "No FATs for" %} {{ char.0 }}</p>
                                </div>
                            {% endif %}
                        </div>
                    </div>
                {% endfor %}
            {% else %}
                <div class="alert alert-warning" role="alert">
                    <p>{% translate "No FATs for this year at all" %}</p>
                </div>
            {% endif %}
        </div>
    </div>
</div>
