{% extends 'base.html' %}
{{% load i18n staticfiles tz stats %}
{% block title %}{% trans 'Mission' %} #{{ mission.id }} - {{ mission.name }} / {{ block.super }}{% endblock title %}

{% block head %}
{% endblock head %}

{% block content %}
    <section id="content">
        <div class="wrapper">
            <div class="content_head">
                <div class="content_title">
                    {% trans 'Mission' %} #{{ mission.id }} - {{ mission.name }}
{#                    <div class="content_title_sm"></div>#}
                </div>
            </div>

            <div style="margin-top: 15px;">
                {% trans 'Start Date' context 'mission' %}: {{ mission.date_start }}<br>
                {% trans 'End Date' context 'mission' %}: {{ mission.date_end }}<br>
                {% trans 'Duration' context 'mission' %}: {{ mission.duration|seconds_to_time }}<br>
                {% if mission.winning_coalition %}
                    {% trans 'Winning coalition' %}: {{ mission.get_winning_coalition_display }}
                    {% if mission.win_reason == 'task' %}
                        ({% trans 'Performed the task of the mission' %})
                    {% elif mission.win_reason == 'score' %}
                        ({% trans 'Won by score' %})
                    {% endif %}<br>
                {% endif %}
                {% trans 'Pilots total' %}: {{ mission.pilots_total }}<br>
            </div>

            <div class="dominant_bars" style="margin-top: 30px;">
                <div style="width: 755px; margin: 0 auto;">
                {% if summary_coal %}
                <div class="bar_small" style="float: left;">
                    <div class="bar_icon">
                        <img src="{% static 'img/icons/small/ak.png' %}" width="18" height="18" alt="" title="">
                    </div>
                    <div class="bar_title">
                        {% trans 'Shotdown aircraft' context 'tour' %}
                    </div>
                    <div class="bar">
                        <div class="bar_grid" style="width: 25%;"></div>
                        <div class="bar_grid" style="width: 50%;"></div>
                        <div class="bar_grid" style="width: 75%;"></div>
                        {% widthratio summary_coal.1.ak_total summary_total.ak_total 100 as width %}
                        <div class="bar_red" style="width: {{ width }}%;"></div>
                    </div>
                    <div class="bar_red_num">{{ summary_coal.1.ak_total }}</div>
                    <div class="bar_blue_num">{{ summary_coal.2.ak_total }}</div>
                </div>

                <div class="bar_small" style="float: right;">
                    <div class="bar_icon">
                        <img src="{% static 'img/icons/small/gk.png' %}" width="18" height="18" alt="" title="">
                    </div>
                    <div class="bar_title">
                        {% trans 'Ground targets destroyed' context 'tour' %}
                    </div>
                    <div class="bar">
                        <div class="bar_grid" style="width: 25%;"></div>
                        <div class="bar_grid" style="width: 50%;"></div>
                        <div class="bar_grid" style="width: 75%;"></div>
                        {% widthratio summary_coal.1.gk_total summary_total.gk_total 100 as width %}
                        <div class="bar_red" style="width: {{ width }}%;"></div>
                    </div>
                    <div class="bar_red_num">{{ summary_coal.1.gk_total }}</div>
                    <div class="bar_blue_num">{{ summary_coal.2.gk_total }}</div>
                </div>

                <div class="bar_small" style="float: left;">
                    <div class="bar_icon">
                        <img src="{% static 'img/icons/small/score.png' %}" width="18" height="18" alt="" title="">
                    </div>
                    <div class="bar_title">
                        {% trans 'Score' context 'tour' %}
                    </div>
                    <div class="bar">
                        <div class="bar_grid" style="width: 25%;"></div>
                        <div class="bar_grid" style="width: 50%;"></div>
                        <div class="bar_grid" style="width: 75%;"></div>
                        {% widthratio summary_coal.1.score summary_total.score 100 as width %}
                        <div class="bar_red" style="width: {{ width }}%;"></div>
                    </div>
                    <div class="bar_red_num">{{ summary_coal.1.score }}</div>
                    <div class="bar_blue_num">{{ summary_coal.2.score }}</div>
                </div>

                <div class="bar_small" style="float: right;">
                    <div class="bar_icon">
                        <img src="{% static 'img/icons/small/ft.png' %}" width="18" height="18" alt="" title="">
                    </div>
                    <div class="bar_title">
                        {% trans 'Flight time (hours)' context 'tour' %}
                    </div>
                    <div class="bar">
                        <div class="bar_grid" style="width: 25%;"></div>
                        <div class="bar_grid" style="width: 50%;"></div>
                        <div class="bar_grid" style="width: 75%;"></div>
                        {% widthratio summary_coal.1.flight_time summary_total.flight_time 100 as width %}
                        <div class="bar_red" style="width: {{ width }}%;"></div>
                    </div>
                    <div class="bar_red_num">
                        {{ summary_coal.1.flight_time|seconds_to_time:'h' }}
                    </div>
                    <div class="bar_blue_num">
                        {{ summary_coal.2.flight_time|seconds_to_time:'h' }}
                    </div>
                </div>
                {% endif %}
                </div>
                <div class="clearfix"></div>

            </div>

            <div class="content_head">
                <div class="content_title">
                    {% trans 'Pilot Rankings' %}
                    <div class="content_title_sm" id="sort_by_text"></div>
                </div>
            </div>
            {% if players %}
                <div class="content_table">
                    <div class="head_row">
                        <div class="cell" style="width: 60px;"></div>
                        <div class="cell"></div>
                        <div class="cell" style="width: 60px;"></div>
                        <div class="cell" style="width: 90px;">
                            <a class="sort_by" href="?sort_by=-ak_total">
                                <img src="{% static 'img/icons/small/ak.png' %}" width="18" height="18"
                                     alt="{% trans 'Air Kills' %}" title="{% trans 'Air Kills' %}">
                            </a>
                        </div>
                        <div class="cell" style="width: 90px;">
                            <a class="sort_by" href="?sort_by=-gk_total">
                                <img src="{% static 'img/icons/small/gk.png' %}" width="18" height="18"
                                     alt="{% trans 'Ground Kills' %}" title="{% trans 'Ground Kills' %}">
                            </a>
                        </div>
                        <div class="cell" style="width: 90px;">
                            <a class="sort_by" href="?sort_by=-flight_time">
                                <img src="{% static 'img/icons/small/ft.png' %}" width="18" height="18"
                                     alt="{% trans 'Flight Time (hours:minutes)' %}"
                                     title="{% trans 'Flight Time (hours:minutes)' %}">
                            </a>
                        </div>
                        <div class="cell" style="width: 90px;">
                            <a class="sort_by" href="?sort_by=-kd">
                                <img src="{% static 'img/icons/small/kd.png' %}" width="18" height="18"
                                     alt="K/D" title="K/D">
                            </a>
                        </div>
                        <div class="cell" style="width: 90px;">
                            <a class="sort_by" href="?sort_by=-khr">
                                <img src="{% static 'img/icons/small/khr.png' %}" width="18" height="18"
                                     alt="K/Hr" title="K/Hr">
                            </a>
                        </div>
                        <div class="cell" style="width: 90px;">
                            <a class="sort_by" href="?sort_by=-accuracy">
                                <img src="{% static 'img/icons/small/acc.png' %}" width="18" height="18"
                                     alt="{% trans 'Gunnery Accuracy' %}" title="{% trans 'Gunnery Accuracy' %}">
                            </a>
                        </div>
                        <div class="cell" style="width: 90px;">
                            <a class="sort_by" href="?sort_by=-score">
                                <img src="{% static 'img/icons/small/score.png' %}" width="18" height="18"
                                     alt="{% trans 'Score' %}" title="{% trans 'Score' %}">
                            </a>
                        </div>
                    </div>
                    {% for player in players %}
                        <a class="row" href="{{ player.get_profile_url }}">
                            <div class="cell">{{ forloop.counter }}</div>
                            <div class="cell" style="text-align: left;">{{ player.nickname }}</div>
                            <div class="cell img">{% include 'inline/table_coal_pref_icon.html' with coal_pref=player.coal_pref %}</div>
                            <div class="cell">{{ player.ak_total }}</div>
                            <div class="cell">{{ player.gk_total }}</div>
                            <div class="cell">{{ player.flight_time|seconds_to_time }}</div>
                            <div class="cell">{{ player.kd }}</div>
                            <div class="cell">{{ player.khr }}</div>
                            <div class="cell">{{ player.accuracy }}%</div>
                            <div class="cell">{{ player.score }}</div>
                        </a>
                    {% endfor %}
                </div>
            {% endif %}

            <div class="info">
                <div>
                    {% blocktrans trimmed %}
                        <strong>Attention!</strong> Algorithms collection statistics IL2 stats differs from statistics
                        in-game. As a consequence of these statistics will not coincide with the game.
                    {% endblocktrans %}
                </div>
            </div>
        </div>
    </section>
{% endblock content %}

{% block bottom %}
    {{ block.super }}
    <script src="{% static 'js/table.js' %}"></script>
    <script>
        var sort_by_text = {
            'ak_total': '{% trans 'on the number of air kills' %}',
            'streak_current': '{% trans 'on the current streak of kills' %}',
            'gk_total': '{% trans 'on the number of ground kills' %}',
            'flight_time': '{% trans 'on the flight time (hours:minutes)' %}',
            'kd': '{% trans 'on the average number of kill per one death (K/D)' %}',
            'khr': '{% trans 'on the average number of kill per one hour (K/Hr)' %}',
            'accuracy': '{% trans 'on the accuracy' %}',
            'rating': '',
            'score': '{% trans 'on the score' %}'
        };

        $(document).ready(function() {
            uri_sort_by('-score', sort_by_text);
        });
    </script>
{% endblock bottom %}