{% extends "layout.html" %}

{% 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.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 %}
            </ul>
        </div>
    </div>
</nav>
{% endblock %}

{% block content %}
<div class="tab-content" id="myTabContent">
    {% for num_players, stats in variant_stats.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>
            {% include "stats_table.html" %}
            <h4>
                List of Played Games
            </h4>
            {% if stats.games_played == 0 %}
            There have been no games played on this variant with {{num_players}} players so far.
            {% else %}
            <div id="table-{{num_players}}p"></div>
            {% endif %}
        </div>
    </div>
    {% endfor %}
</div>

<!-- JavaScript part for the interactive tables -->
<script>
    {% for num_players, games in variant_games.items() %}
        let tabledata_{{num_players}} = [
            {% for game in games %}
                {{game }},
            {% endfor %}
        ];

        var table_{{num_players}} = new Tabulator("#table-{{num_players}}p", {
            height: 400,
            data:tabledata_{{num_players}},
            layout:"fitDataStretch",
            columns: [
                {title: "id", field: "league_id"},
                {title: "Game", field: "game_id", formatter: "link", formatterParams:{
                    urlPrefix: "https://hanab.live/replay/",
                    target:"_blank"
                    }},
                {title: "Rating Change", field: "variant_rating_change"},
                {title: "Rating After", field: "variant_rating_after"},
                {title: "Players", field: "users"},
                {title: "Seed", field: "seed", formatter: "link", formatterParams: {
                    urlPrefix: "https://hanab.live/seed/",
                        target:"_blank"
                    }},
                {title: "Score", field: "score"},
                {title: "BDR", field: "num_bdrs"},
                {title: "Turns", field: "num_turns"},
                {title: "Result", field: "game_outcomes"}
        ],
        });
    {% endfor %}
</script>
{% endblock %}