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

{% 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<small class="text-muted"> - Season One</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="summary-tab" data-toggle="tab" href="#summary">Summary</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="leaderboards-0-tab" data-toggle="tab" href="#leaderboards-0">No Variant</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="leaderboards-1-tab" data-toggle="tab" href="#leaderboards-1">Clue Starved</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="players-tab" data-toggle="tab" href="#players">Players</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="variants-dropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Variants
                    </a>
                    <div class="dropdown-menu" aria-labelledby="variants-dropdown">
                        <a class="dropdown-item" id="variant-tab" data-toggle="tab" href="#variants">Overview</a>
                        <div class="dropdown-divider"></div>
                        {% for variant in unique_variants %}
                        <a class="dropdown-item" href="/variant/{{variant.variant_id}}">{{variant.name}}</a>
                        {% endfor %}
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="info-tab" data-toggle="tab" href="#info">Info</a>
                </li>
            </ul>
        </div>
    </div>
</nav>
{% endblock %}

{% block content %}
<div class="tab-content" id="myTabContent">
    <div class="tab-pane fade active show" id="summary">
        <div class="container my-5">
            <!-- Leader Cards -->
            {% for rating_type, leaders in leaders.items() %}
            <div class="card-deck mb-5">
                {% for category, leaders in leaders.items() %}
                {% for data in leaders %}
                <div class="card text-center">
                    <div class="card-body">
                        <h5 class="card-title mb-2">{{ data.title }}</h5>
                        <p class="leaderboard-category">({{data.category}})</p>
                        <p class="mb-0 player-name">
                            <a href="/player/{{data.entry.player_name_encoded}}">{{ data.entry.player_name }}</a>
                        </p>
                        <p class="mt-1 alt-name">{{ data.entry.user_accounts }}</p>
                        <p class="score-large">{{ data.entry.score }}</p>
                    </div>
                </div>
                {% endfor %}
                {% endfor %}
            </div>
            {% endfor %}
        </div>
    </div>

    <script>
        let tabledata = [
            {% for game in games %}
            {{- game -}},
            {% endfor %}
        ];
    </script>

    {% for rating_type, leaders in leaders.items() %}
    <div class="tab-pane fade" id="leaderboards-{{rating_type}}">
        <div class="container my-5">
            <h3>Global Statistics</h3>
            {{ stats_list(variant_stats[rating_type], False, False, "{3p,4p,5p}x{5s,6s}") }}

            <!-- Leaderboards -->
            <h3>Leaderboards</h3>
            <div id="leaderboards-{{rating_type}}-data" class="accordion">
                {% for category, leaderboard in leaderboards.items() %}
                <div class="card">
                    <div class="card-header">
                        <button class="btn btn-link btn-block text-left" data-toggle="collapse" data-target="#{{ category|lower|replace(' ', '-')|replace('(', '-')|replace(')', '-') }}">
                            {{ category }}
                        </button>
                    </div>
                    <div id="{{ category|lower|replace(' ', '-')|replace('(', '-')|replace(')', '-') }}" class="collapse" data-parent="#leaderboards-{{rating_type}}-data">
                        <div class="card-body">
                            <table class="table table-striped">
                                {% for entry in leaderboard[rating_type] %}
                                <tr>
                                    <td>
                                        <div class="player-name">
                                            <a href="/player/{{entry.player_name_encoded}}">{{ entry.player_name }}</a>
                                        </div>
                                        <div class="alt-name">{{ entry.user_accounts }}</div>
                                    </td>
                                    <td class="score">{{ entry.score }}</td>
                                    {% if entry.current_streak is defined %}
                                    <td class="current-streak">({{ entry.current_streak }})</td>
                                    {% endif %}
                                </tr>
                                {% endfor %}
                            </table>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>

            <br>

            <!-- List of games -->
            <h3>List of played games</h3>
            <div id="table-{{rating_type}}"></div>

            <h3>ELO progression</h3>
            <canvas id="chart-{{rating_type}}"></canvas>

        </div>
    </div>
    {% endfor %}


    <div class="tab-pane fade" id="players">
        <div class="container my-5">
            <div id="table-players"></div>
        </div>
    </div>

    <script>
        let player_tabledata = [
            {% for player_row in players %}
                {{- player_row -}},
            {% endfor %}
        ];

        {{ player_table_js("player_tabledata", "players") }}
    </script>


    <!-- Variants -->
    <div class="tab-pane fade" id="variants">
        <div class="container my-5">
            <table class="table table-hover table-striped">
                <thead>
                <tr>
                    <th scope="col" class="text-center">Variant</th>
                    <th scope="col" class="text-center">Player count</th>
                    <th scope="col" class="text-center">Rating</th>
                    <th scope="col" class="text-center">Games Played</th>
                    <th scope="col" class="text-center">Max Scores</th>
                </tr>
                </thead>
                <tbody>
                {% for variant in variants_with_player_nums %}
                <tr>
                    <td class="text-center"><strong><a href="/variant/{{variant.variant_id}}">{{ variant.name }}</a></strong></td>
                    <td class="text-center">{{ variant.num_players }}</td>
                    <td class="text-center variant-rating">{{ variant.stats.rating | int }}</td>
                    <td class="text-center">{{ variant.stats.games_played }}</td>
                    <td class="text-center">{{ variant.stats.games_won }}</td>
                </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <div class="tab-pane fade" id="info">
        <div class="container my-5">
            {% include "info.html" %}
        </div>
    </div>

</div>

<script>
    {% for rating_type in leaders %}
    {{ games_table_js("tabledata", rating_type, True, False, False) }}
    table_{{rating_type}}.setFilter("rating_type", "=", {{rating_type}});
    {% endfor %}
</script>

<!-- Tables for rating progression-->
<script>
    let chart_data = {{ variant_ratings }};

    {% for rating_type, r_data in variant_ratings.items() %}
        let datasets_{{rating_type}} = [];
        {% for name, n_data in r_data.items() %}
            {% for num_players, data in n_data.items() %}
                datasets_{{rating_type}}.push({
                    data: chart_data[{{rating_type}}]["{{name}}"][{{num_players}}],
                    label: "{{name}} - {{num_players}} players"
                });
            {% endfor %}
        {% endfor %}

        const config_{{rating_type}} = {
            type: 'line',
            data: {
                    datasets: datasets_{{rating_type}}
            },
            options: {
                parsing: {
                    xAxisKey: "datetime_finished",
                    yAxisKey: "value_after"
                },
                scales: {
                    x: {
                        type: 'time'
                    }
                }
            }
        };
        const ctx_{{rating_type}} = document.getElementById('chart-{{rating_type}}');
        new Chart(ctx_{{rating_type}}, config_{{rating_type}});
    {% endfor %}

</script>

{% endblock %}