{% extends "layout.html" %}
{% from "stats_table.html" import stats_list, games_table_js %}

{% block navbar %}
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
        <a class="navbar-brand" href="/">The Hanabi Pro Hunting League</a><a class="navbar-brand" href="#"><small class="text-muted">- Variant Statistics for {{variant_name}}</small></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link active" id="overview-tab" data-toggle="tab" href="#overview">Overview</a>
                </li>
                {% for num_players in variant_stats_by_player.keys() %}
                <li class="nav-item">
                    <a class="nav-link" id="stats-{{num_players}}p-tab" data-toggle="tab" href="#stats-{{num_players}}p">{{num_players}} Players</a>
                </li>
                {% endfor %}
                <li class="nav-item">
                    <a class="nav-link" id="Back" href="/">Back</a>
                </li>
            </ul>
        </div>
    </div>
</nav>
{% endblock %}

{% block content %}
<div class="tab-content" id="myTabContent">

    <div class="tab-pane fade show active" id="overview">
        <div class="container my-5">
            <h3>
                League Statistics for {{variant_name}}
            </h3>
            {{ stats_list(variant_stats, False, False, "(3p/4p/5p)") }}
            <h4>
                List of Played Games
            </h4>
            {% if variant_stats.games_played == 0 %}
            There have been no games played on this variant so far.
            {% else %}
            <div id="table-overview"></div>
            {% endif %}
            <h3>Chart</h3>
            <canvas id="chart"></canvas>
        </div>
    </div>

    {% for num_players, num_player_stats in variant_stats_by_player.items() %}
    <div class="tab-pane fade" id="stats-{{num_players}}p">
        <div class="container my-5">
            <h3>
                League Statistics for {{variant_name}} - {{num_players}} Players
            </h3>
            {{ stats_list(num_player_stats, True, False) }}
            <h4>
                List of Played Games
            </h4>
            {% if num_player_stats.games_played == 0 %}
            There have been no games played on this variant with {{num_players}} players so far.
            {% endif %}
            <div id="table-{{num_players}}"></div>
        </div>
    </div>
    {% endfor %}
</div>

<!-- JavaScript part for the interactive tables -->
<script>
    // Tabledata
    let tabledata = [
        {% for game in variant_games %}
    {{- game -}},
    {% endfor %}
    ];

    // Main table
    {{ games_table_js("tabledata", "overview", True, False, False, "Players") }}

    {% for num_players in variant_stats_by_player.keys() %}
        {{ games_table_js("tabledata", num_players, False, True, False, "Players") }}
        // Filter table on corresponding page to only display games with corresponding player number
        table_{{num_players}}.setFilter("num_players", "=", {{num_players}});
    {% endfor %}
</script>
{% endblock %}