<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Player: {{ player.name }}</title>
        <meta name="Description" content="Player: {{ player.name }}">
        {% include "default_head_content.html" %}
    </head>
    <body class="bg-special">
        {% include 'navbar.html' %}
        <div class="container mt-3 mb-3" role="main">
            <div class="player-headline">
                <h1> 
                    {{ player.name }}
                </h1>
                <h3>
                    Rating: <i>{{ player.rating }}</i> <br>
                    Rank: {{ player.rank }}
                </h3>
            </div>
            <div class="plot-container">
                <canvas id="lineChart">
                </canvas>
            </div>
            <p class="mt-5 mb-3">
            </p>
        </div>
        {% include 'footer.html' %}
        <script defer>
            var canvas = document.getElementById("lineChart")
            var ctx = canvas.getContext('2d');
            var historicalRank = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: [ {{ CSV_MONTH_YEAR_OF_RATINGS | safe }} ],
                    datasets: [{
                        label: "Rating",
                        data: [ {{ CSV_RATINGS | safe }} ],
                        backgroundColor: [ 'rgba(105, 0, 132, .2)' ],
                        borderColor: [ 'rgba(200, 99, 132, .7)' ],
                        borderWidth: 2
                    }],
		        },
                options: {
                    scales: {
                        yAxes: [{
                            ticks : {
                                suggestedMin : {{ Y_MIN }},
                                suggestedMax : {{ Y_MAX }},
                                min : {{ Y_MIN }},
                                max : {{ Y_MAX }}
                            }
                        }],
                        xAxes: [{
                            type: 'time',
                            distribution: 'series',
                            time: {
                                round : false,
                                unit: "day"
                            },
                            ticks : {
                                autoSkip : true,
                                source : "labels"
                            },
                            gridLines: {
                                display: false,
                                offsetGridLines: true
                            }
                        }]
                    },
                    responsive: true
                }
            });
            var datasetHelper = {{ CSV_TIMESTAMPS | safe }}
            canvas.onclick = function (evt) {
                var points = historicalRank.getElementsAtEvent(evt);
                if(points.length != 1){
                    return
                }
                var timestampMs = datasetHelper[points[0]._index] / 1000
                var idString = timestampMs.toString()
                window.location.href = "/round-info?id=" + idString
            };
        </script>
    </body>
</html>
