{% 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">- Player Statistics for {{player_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" 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>
                Player Statistics for {{player_name}}
            </h3>
            {% for rating_type, player_row in player_stat.items() %}
            <h4>
                {% if rating_type == 0 %}
                No Variant
                {% else %}
                Clue Starved
                {% endif %}
            </h4>
            {{ stats_list(player_row.stats, True, True) }}
            <div id="table-{{rating_type}}"></div>
            <canvas id="chart-{{rating_type}}"></canvas>
            {% endfor %}
        </div>
    </div>
</div>

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

    {% for rating_type in player_stat.keys() %}
        {{ games_table_js("tabledata", rating_type, True, False, True, "Teammates") }}
        // Filter table on corresponding rating type
        table_{{rating_type}}.setFilter("rating_type", "=", {{rating_type}});
    {% endfor %}
</script>
<!-- JavaScript part for the rating chart -->
<script>
    {% for rating_type, progression in player_rating_progression.items() %}
        rating_progression_{{rating_type}} = {{progression}};
        const config_{{rating_type}} = {
            type: 'line',
            data: {
                labels: Array.from({length: rating_progression_{{rating_type}}.length}, (_, i) => i),
                datasets: [{
                    label: 'Rating progression over #games',
                    data: rating_progression_{{rating_type}}
                }]
            }
        };
        const ctx_{{rating_type}} = document.getElementById('chart-{{rating_type}}');
        new Chart(ctx_{{rating_type}}, config_{{rating_type}});
    {% endfor %}
</script>

{% endblock %}