{% extends "base.html" %}

{% block content %}
<div class="card mb-0">
    <div class="card-header">
        <h3 class="mb-0"><a href="{% url 'gymnast_details_tab' chrono.gymnast.id 'scores' %}">{{ chrono.gymnast }}</a></h3>
        <h4 class="card-title"> Chrono of {{ chrono.date | date:'d N Y' }}</h4>
    </div>
    <div class="card-body pb-0 mb-0">
        <div class="row mr-1 ml-1 pb-0 mb-0">
            <div class="col-md-2 offset-md-1">
                <table class="table tablesorter table-striped" data-sort="table" id="chrono_values_table">
                {% for detail in chrono.details.all %}
                <tr>
                    <td>{{ detail.order }}</td>
                    <td class="text-right">{{ detail.value }}</td>
                </tr>
                {% endfor %}
                <tr>
                    <td></td>
                    <td class="text-right"><b>{{ chrono.score }}</b></td>
                </tr>
                </table>
                <a href="{% url 'chrono_list_for_gymnast' chrono.gymnast.id %}">
                    <button type="submit" value="add" class="btn btn-icon btn-warning mr-2">
                        <i class="fal fa-stopwatch"></i>
                    </button>
                </a>
            </div>
            <div class="col-md-8 offset-md-1 alert {% if request.session.template == 0 %}skill-info{% else %}alert-secondary{% endif %} mr-0 pb-0 pl-1 pr-1">
                <canvas id="chartjs_chrono_details" class="chartjs" width="800" height="400"></canvas>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block footerscript %}
<script type="text/javascript">
    var ctx = document.getElementById("chartjs_chrono_details").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_details"), {
        type: 'line',
        data: {
            labels: [
                {% for detail in chrono.details.all %}
                    {{ detail.order }},
                {% endfor %}
            ],
            datasets: [{
                fill: true,
                borderColor: 'rgb(255, 99, 132)',
                cubicInterpolationMode: 'monotone',
                backgroundColor: gradient_stroke_1,
                pointBackgroundColor: 'rgb(255, 99, 132)',

                data: [
                    {% for detail in chrono.details.all %}
                        {{ detail.value }},
                    {% endfor %}
                ],
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        suggestedMin: {{ chart_min_value }},
                        suggestedMax: {{ chart_max_value }},
                    }
                }]
            },
            plugins: {
                legend: {
                    display: false,
                }
            }
        },
    });
</script>
{% endblock %}