{% extends 'base.html' %}
{% load i18n staticfiles tz stats %}
{#{% block title %}{{ block.super }}{% endblock title %}#}

{% block content %}
    <section id="main">
        <div class="wrapper">
            <div class="dominant_coal">
                {% trans 'Current Tour' %}: {{ tour.get_title }}
            </div>

            <div class="general_block">
                <div class="dominant_bars">
                    <div class="bar_win_missions">
                        <div style="position: absolute; font-size: 13px; color: #5C5C5C;">
                            {% trans 'Dominance' context 'tour' %}
                        </div>
                        <div class="bar_title">
                            {% trans 'Won missions' context 'tour' %}
                        </div>
                        <div class="bar">
                            <div class="bar_grid" style="width: 50%;"></div>
                            {% widthratio missions_wins.1 missions_wins_total 100 as width %}
                            <div class="bar_red" style="width: {{ width }}%;"></div>
                        </div>
                        <div class="bar_red_num">{{ missions_wins.1 }}</div>
                        <div class="bar_blue_num">{{ missions_wins.2 }}</div>
                    </div>

                    <div class="clearfix"></div>

                    {% 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 %}

                    {% if summary_total_heavy and summary_total_medium and summary_total_light %}
                    <button type="button" class="collapsible"></button>

                    <div class="content">
                        <div class="bar_small" style="float: left;">
                        <div class="bar_icon">
                            <img src="{% static 'img/icons/small/ft.png' %}" width="18" height="18" alt="" title="">
                        </div>
                        <div class="bar_title">
                            {% trans 'Fighter 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_light.1.flight_time summary_total_light.flight_time 100 as width %}
                            <div class="bar_red" style="width: {{ width }}%;"></div>
                        </div>
                        <div class="bar_red_num">
                            {{ summary_coal_light.1.flight_time|seconds_to_time:'h' }}
                        </div>
                        <div class="bar_blue_num">
                            {{ summary_coal_light.2.flight_time|seconds_to_time:'h' }}
                        </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 'Attacker 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_medium.1.flight_time summary_total_medium.flight_time 100 as width %}
                            <div class="bar_red" style="width: {{ width }}%;"></div>
                        </div>
                        <div class="bar_red_num">
                            {{ summary_coal_medium.1.flight_time|seconds_to_time:'h' }}
                        </div>
                        <div class="bar_blue_num">
                            {{ summary_coal_medium.2.flight_time|seconds_to_time:'h' }}
                        </div>
                        </div>

                        <div class="bar_small" style="float: left;">
                        <div class="bar_icon">
                            <img src="{% static 'img/icons/small/ft.png' %}" width="18" height="18" alt="" title="">
                        </div>
                        <div class="bar_title">
                            {% trans 'Bomber 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_heavy.1.flight_time summary_total_heavy.flight_time 100 as width %}
                            <div class="bar_red" style="width: {{ width }}%;"></div>
                        </div>
                        <div class="bar_red_num">
                            {{ summary_coal_heavy.1.flight_time|seconds_to_time:'h' }}
                        </div>
                        <div class="bar_blue_num">
                            {{ summary_coal_heavy.2.flight_time|seconds_to_time:'h' }}
                        </div>
                        </div>
                    </div>

                    {% endif %}


                    <div class="clearfix"></div>

                </div>
                {% if top_24 %}
                <div class="top_pilots" style="float: left;">
                    <div class="top_title">
                        {% if MODULE_TOP_LAST_MISSION %}
                        {% trans 'Best pilots in the last mission' context 'tour_top' %}
                        {% else %}
                        {% trans 'Best pilots in the last 24 hours' context 'tour_top' %}
                        {% endif %}
                    </div>
                    <div class="top_table">
                        <div class="head_row">
                            <div class="cell" style="width: 30px;">#</div>
                            <div class="cell">{% trans 'pilot nickname' context 'tour_top' %}</div>
                            <div class="cell" style="width: 30px;"></div>
                            <div class="cell">{% trans 'score' context 'tour_top' %}</div>
                        </div>
                        {% for player, score in top_24 %}
                        <a class="row" href="{{ player.get_profile_url }}">
                            <div class="cell">{{ forloop.counter }}</div>
                            <div class="cell">{{ player.nickname }}</div>
                            <div class="cell img">
                                {% include 'inline/table_coal_pref_icon.html' with coal_pref=player.coal_pref %}
                            </div>
                            <div class="cell">{{ score }}</div>
                        </a>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}

                {% if top_streak %}
                <div class="top_pilots" style="float: right;">
                    <div class="top_title">
                        {% trans 'Best live pilots' context 'tour_top' %}
                    </div>
                    <div class="top_table">
                        <div class="head_row">
                            <div class="cell" style="width: 30px;">#</div>
                            <div class="cell">{% trans 'pilot nickname' context 'tour_top' %}</div>
                            <div class="cell" style="width: 30px;"></div>
                            <div class="cell">{% trans 'score' context 'tour_top' %}</div>
                        </div>
                        {% for player in top_streak %}
                        <a class="row" href="{{ player.get_profile_url }}">
                            <div class="cell">{{ forloop.counter }}</div>
                            <div class="cell">{{ 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.score_streak_current }}</div>
                        </a>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}

                <div class="clearfix"></div>

                {% if top_24_light %}
                <div class="top_pilots" style="float: left;">
                    <div class="top_title">
                        {% if MODULE_TOP_LAST_MISSION %}
                        {% trans 'Best fighter pilots in the last mission' context 'tour_top' %}
                        {% else %}
                        {% trans 'Best fighter pilots in the last 24 hours' context 'tour_top' %}
                        {% endif %}
                    </div>
                    <div class="top_table">
                        <div class="head_row">
                            <div class="cell" style="width: 30px;">#</div>
                            <div class="cell">{% trans 'pilot nickname' context 'tour_top' %}</div>
                            <div class="cell" style="width: 30px;"></div>
                            <div class="cell">{% trans 'score' context 'tour_top' %}</div>
                        </div>
                        {% for player, score in top_24_light %}
                        <a class="row" href="{{ player.get_profile_url }}">
                            <div class="cell">{{ forloop.counter }}</div>
                            <div class="cell">{{ player.nickname }}</div>
                            <div class="cell img">
                                {% include 'inline/table_coal_pref_icon.html' with coal_pref=player.coal_pref %}
                            </div>
                            <div class="cell">{{ score }}</div>
                        </a>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}

                {% if top_streak_light %}
                <div class="top_pilots" style="float: right;">
                    <div class="top_title">
                        {% trans 'Best live fighter pilots' context 'tour_top' %}
                    </div>
                    <div class="top_table">
                        <div class="head_row">
                            <div class="cell" style="width: 30px;">#</div>
                            <div class="cell">{% trans 'pilot nickname' context 'tour_top' %}</div>
                            <div class="cell" style="width: 30px;"></div>
                            <div class="cell">{% trans 'score' context 'tour_top' %}</div>
                        </div>
                        {% for player in top_streak_light %}
                        <a class="row" href="{{ player.get_profile_url }}">
                            <div class="cell">{{ forloop.counter }}</div>
                            <div class="cell">{{ 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.score_streak_current_light }}</div>
                        </a>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}

                <div class="clearfix"></div>

                {% if top_24_medium %}
                <div class="top_pilots" style="float: left;">
                    <div class="top_title">
                        {% if MODULE_TOP_LAST_MISSION %}
                        {% trans 'Best attacker pilots in the last mission' context 'tour_top' %}
                        {% else %}
                        {% trans 'Best attacker pilots in the last 24 hours' context 'tour_top' %}
                        {% endif %}
                    </div>
                    <div class="top_table">
                        <div class="head_row">
                            <div class="cell" style="width: 30px;">#</div>
                            <div class="cell">{% trans 'pilot nickname' context 'tour_top' %}</div>
                            <div class="cell" style="width: 30px;"></div>
                            <div class="cell">{% trans 'score' context 'tour_top' %}</div>
                        </div>
                        {% for player, score in top_24_medium %}
                        <a class="row" href="{{ player.get_profile_url }}">
                            <div class="cell">{{ forloop.counter }}</div>
                            <div class="cell">{{ player.nickname }}</div>
                            <div class="cell img">
                                {% include 'inline/table_coal_pref_icon.html' with coal_pref=player.coal_pref %}
                            </div>
                            <div class="cell">{{ score }}</div>
                        </a>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}

                {% if top_streak_medium %}
                <div class="top_pilots" style="float: right;">
                    <div class="top_title">
                        {% trans 'Best live attacker pilots' context 'tour_top' %}
                    </div>
                    <div class="top_table">
                        <div class="head_row">
                            <div class="cell" style="width: 30px;">#</div>
                            <div class="cell">{% trans 'pilot nickname' context 'tour_top' %}</div>
                            <div class="cell" style="width: 30px;"></div>
                            <div class="cell">{% trans 'score' context 'tour_top' %}</div>
                        </div>
                        {% for player in top_streak_medium %}
                        <a class="row" href="{{ player.get_profile_url }}">
                            <div class="cell">{{ forloop.counter }}</div>
                            <div class="cell">{{ 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.score_streak_current_medium }}</div>
                        </a>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}

                <div class="clearfix"></div>

                {% if top_24_heavy %}
                <div class="top_pilots" style="float: left;">
                    <div class="top_title">
                        {% if MODULE_TOP_LAST_MISSION %}
                        {% trans 'Best bomber pilots in the last mission' context 'tour_top' %}
                        {% else %}
                        {% trans 'Best bomber pilots in the last 24 hours' context 'tour_top' %}
                        {% endif %}
                    </div>
                    <div class="top_table">
                        <div class="head_row">
                            <div class="cell" style="width: 30px;">#</div>
                            <div class="cell">{% trans 'pilot nickname' context 'tour_top' %}</div>
                            <div class="cell" style="width: 30px;"></div>
                            <div class="cell">{% trans 'score' context 'tour_top' %}</div>
                        </div>
                        {% for player, score in top_24_heavy %}
                        <a class="row" href="{{ player.get_profile_url }}">
                            <div class="cell">{{ forloop.counter }}</div>
                            <div class="cell">{{ player.nickname }}</div>
                            <div class="cell img">
                                {% include 'inline/table_coal_pref_icon.html' with coal_pref=player.coal_pref %}
                            </div>
                            <div class="cell">{{ score }}</div>
                        </a>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}

                {% if top_streak_heavy %}
                <div class="top_pilots" style="float: right;">
                    <div class="top_title">
                        {% trans 'Best live bomber pilots' context 'tour_top' %}
                    </div>
                    <div class="top_table">
                        <div class="head_row">
                            <div class="cell" style="width: 30px;">#</div>
                            <div class="cell">{% trans 'pilot nickname' context 'tour_top' %}</div>
                            <div class="cell" style="width: 30px;"></div>
                            <div class="cell">{% trans 'score' context 'tour_top' %}</div>
                        </div>
                        {% for player in top_streak_heavy %}
                        <a class="row" href="{{ player.get_profile_url }}">
                            <div class="cell">{{ forloop.counter }}</div>
                            <div class="cell">{{ 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.score_streak_current_heavy }}</div>
                        </a>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}

                <div class="clearfix"></div>

                <div class="full_rating">
                    <a href="{% url 'stats:pilots' %}?tour={{ request.tour.id }}">
                        <span>
                            {% trans 'Overall Pilot Rankings' %}
                        </span>
                    </a>
                </div>

                <div class="clearfix"></div>
            </div>

            <div class="additional_block">

                <div class="legend">
                    <div class="title">
                        {% trans 'Coalitions' %}
                    </div>
                    <div class="legend_items">
                        <div class="legend_item">
                            <div class="square red"></div>
                            {{ COAL_1_NAME }}
                        </div>
                        <div class="legend_item">
                            <div class="square blue"></div>
                            {{ COAL_2_NAME }}
                        </div>
                    </div>
                </div>

                {% if NEW_TOUR_BY_MONTH %}
                <div class="tour">
                    <div class="title">
                        {% trans 'Tour' %}: {{ tour.get_title }}
                    </div>
                    <div class="tour_bar">
                        {% widthratio tour.days_passed tour.days_in_tour 100 as width %}
                        <div class="bar_progress" style="width: {{ width }}%;"></div>
                    </div>
                    <div class="tour_end">
                        {% blocktrans trimmed count days=tour.days_left %}
                            {{ days }} day left
                        {% plural %}
                            {{ days }} days left
                        {% endblocktrans %}
                    </div>
{#                    <a class="tours_button" href="#">#}
{#                        {% trans 'Results of other tours' %}#}
{#                    </a>#}
                </div>
                {% endif %}

                {% if total_active_players %}
                <div class="active_players">
                    <div class="title">
                        {% trans 'Active players' %}
                    </div>
                    <div class="total">
                        {% trans 'total' context 'tour_active' %}
                    </div>
                    <div class="total_num">
                        {{ total_active_players }}
                    </div>

                    <div class="bar_mini" style="float: right;">
                        <div class="bar">
                            <div class="bar_grid" style="width: 50%;"></div>
                            {% widthratio coal_active_players.1 total_active_players 100 as width %}
                            <div class="bar_red" style="width: {{ width }}%;"></div>
                            {% widthratio coal_active_players.2 total_active_players 100 as width %}
                            <div class="bar_blue" style="width: {{ width }}%;"></div>
                        </div>
                        <div class="bar_red_num">
                            {{ coal_active_players.1 }}
                        </div>
                        <div class="bar_gray_num">
                            {{ coal_active_players.0 }}
                        </div>
                        <div class="bar_blue_num">
                            {{ coal_active_players.2 }}
                        </div>
                    </div>

                    <div class="clearfix"></div>
                </div>
                {% endif %}


                {% if total_online %}
                <div class="online_widget">
                    <div class="title">
                        {% trans 'Online' %}
                    </div>
                    <div class="total">
                        {% trans 'pilots' context 'online' %}
                    </div>
                    <div class="total_num">
                        {{ total_online }}
                    </div>

                    <div class="bar_mini" style="float: right;">
                        <div class="bar">
                            <div class="bar_grid" style="width: 50%;"></div>
                            {% widthratio coal_1_online total_online 100 as width %}
                            <div class="bar_red" style="width: {{ width }}%;"></div>
                            {% widthratio coal_2_online total_online 100 as width %}
                            <div class="bar_blue" style="width: {{ width }}%;"></div>
                        </div>
                        <div class="bar_red_num">
                            {{ coal_1_online }}
                        </div>
                        <div class="bar_blue_num">
                            {{ coal_2_online }}
                        </div>
                    </div>
                    <a class="online_button" href="{% url 'stats:online' %}">
                        {% trans 'List of pilots online' %}
                    </a>

                    <div class="clearfix"></div>
                </div>
                {% endif %}


            </div>

            <div class="clearfix"></div>

            {% if previous_tour %}
            <div class="previous_tour">
                <div class="title">
                    {% trans 'Summary previous tour' %}
                </div>
                {% if previous_tour.winning_coalition %}
                <div class="winner">
                    {% if previous_tour.winning_coalition == 1 %}
                        <div class="color_line red "></div>
                    {% elif previous_tour.winning_coalition == 2 %}
                        <div class="color_line blue"></div>
                    {% endif %}
                    <div class="coalition">
                        <span>{% trans 'winner' context 'tour_winner' %}</span><br>
                        {{ previous_tour.get_winning_coalition_display }}
                    </div>
                </div>
                {% endif %}

                <div class="top_pilots">
                    <div class="title">{% trans 'Top Pilots' %}</div>
                    <div class="top_pilots_columns">
                        {% for player in previous_tour_top %}
                            <a class="pilot" href="{{ player.get_profile_url }}">
                                <div class="num">{{ forloop.counter }}</div>
                                <div class="nickname">{{ player.nickname }}</div>
                            </a>
                        {% endfor %}
                    </div>
                </div>
                {% if previous_tour_top_light %}
                <div class="top_pilots">
                    <div class="title">{% trans 'Top Fighter Pilots' %}</div>
                    <div class="top_pilots_columns">
                        {% for player in previous_tour_top_light %}
                            <a class="pilot" href="{{ player.get_profile_url }}">
                                <div class="num">{{ forloop.counter }}</div>
                                <div class="nickname">{{ player.nickname }}</div>
                            </a>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}
                {% if previous_tour_top_medium %}
                <div class="top_pilots">
                    <div class="title">{% trans 'Top Attacker Pilots' %}</div>
                    <div class="top_pilots_columns">
                        {% for player in previous_tour_top_medium %}
                            <a class="pilot" href="{{ player.get_profile_url }}">
                                <div class="num">{{ forloop.counter }}</div>
                                <div class="nickname">{{ player.nickname }}</div>
                            </a>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}
                {% if previous_tour_top_heavy %}
                <div class="top_pilots">
                    <div class="title">{% trans 'Top Bomber Pilots' %}</div>
                    <div class="top_pilots_columns">
                        {% for player in previous_tour_top_heavy %}
                            <a class="pilot" href="{{ player.get_profile_url }}">
                                <div class="num">{{ forloop.counter }}</div>
                                <div class="nickname">{{ player.nickname }}</div>
                            </a>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}
            </div>
            {% endif %}
        </div>

        <script>
        var coll = document.getElementsByClassName("collapsible");
        var i;

        for (i = 0; i < coll.length; i++) {
          coll[i].addEventListener("click", function() {
            this.classList.toggle("active");
            var content = this.nextElementSibling;
            if (content.style.maxHeight){
              content.style.maxHeight = null;
            } else {
              content.style.maxHeight = content.scrollHeight + "px";
            }
          });
        }
    </script>
    </section>
{% endblock content %}