{% extends "base.html" %}
{% load get_value_at_index %}

{% block content %}
<div class="card mb-0">
    <div class="card-header">
        <h3 class="mb-0"><a href="">{{ gymnast }}</a></h3>
        <h4 class="card-title"> Chrono from {{ date_begin | date:'d-m-Y' }} to {{ date_end | date:'d-m-Y' }}</h4>
    </div>
    <div class="card-body pb-0 mb-0">
        <div class="row pb-0 mb-0">
            <div class="col-md-5">
                <table class="table table-condensed" id="chrono_values_table">
                {% for chrono in chrono_list %}
                <tr>
                    {% for detail in chrono.details.all %}
                        {% with stat_value=stat_values|get_value_at_index:forloop.counter0 %}
                            <td class="{% if stat_value.max_score == detail.value %}cell-success{% endif %}{% if stat_value.min_score == detail.value %}cell-danger{% endif %}">{{ detail.value | floatformat:2 }}</td>
                        {% endwith %}
                    {% endfor %}
                    <td class="text-right"><b>{{ chrono.score | floatformat:2 }}</b></td>
                </tr>
                {% endfor %}
                <tr>
                    {% for value in stat_values %}
                        <td><b>{{ value.avg_score | floatformat:2 }}</b></td>
                    {% endfor %}
                    <td class="text-right"><b></b></td>
                </tr>
                </table>
            </div>
            <div class="col-md-7 alert {% if request.session.template == 0 %}skill-info{% else %}alert-secondary{% endif %}">
                <canvas id="chartjs_chrono" class="chartjs"></canvas>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block footerscript %}
<script type="text/javascript">
    // $('#chrono_values_table').DataTable({
    //     paging: false,
    //     searching: false,
    //     ordering:  false,
    //     "bInfo" : false,
    // });

    var ctx = document.getElementById("chartjs_chrono").getContext("2d");
    var gradient_stroke_1 = ctx.createLinearGradient(0, 450, 0, 0);

    gradient_stroke_1.addColorStop(1, 'rgba(255, 99, 132, 0.4)');
    gradient_stroke_1.addColorStop(0.75, 'rgba(255, 99, 132, 0.3)');
    gradient_stroke_1.addColorStop(0.5, 'rgba(255, 99, 132, 0.2)');
    gradient_stroke_1.addColorStop(0.25, 'rgba(255, 99, 132, 0)');

    new Chart(document.getElementById("chartjs_chrono"), {
        type: 'line',
        data: {
            labels: [{% for value in stat_values %}{{ value.avg_score | floatformat:3 }}, {% endfor %}],
            datasets: [{ 
                data: [{% for value in stat_values %}{{ value.avg_score | floatformat:3 }}, {% endfor %}],
                pointBackgroundColor: 'rgb(255, 99, 132)',
                borderColor: 'rgb(255, 99, 132)',
                backgroundColor: gradient_stroke_1,
                fill: true,
            }]
        },
        options: {
            // scales: {
            //     yAxes: [{
            //         ticks: {
            //             suggestedMin: {{ min_value }},
            //             suggestedMax: {{ max_value }},
            //         }
            //     }]
            // },
            legend: {
                display: false,
            }
        },
    });
</script>
{% endblock %}