{% extends "base.html" %}

{% block content %}

<div class="row justify-content-center">
    <div class="col-12 col-sm-8 col-md-6">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title mb-0"><a href="{% url 'gymnast_details_tab' intensity.gymnast.id 'routine' %}">{{ intensity.gymnast }}</a>'s training intensity for the {{ intensity.date | date:"j F Y" }}</h4>
            </div>
            <div class="card-body row">
                <div class="col-3">Time</div>
                <div class="col-3 text-right">{{ intensity.time }}</div>
                <div class="col-4"><b>Average Diff/passe</b></div>
                <div class="col-2 text-right"><b>{{ intensity.mean_difficulty_by_passe_in_unit | floatformat:3 }}</b></div>

                <div class="col-3">Difficulty</div>
                <div class="col-3 text-right">{{ intensity.difficulty }}</div>
                <div class="col-4"><b>Average Diff/Skill</b></div>
                <div class="col-2 text-right"><b>{{ intensity.mean_difficulty_by_skill_in_unit | floatformat:3 }}</b></div>

                <div class="col-3">Skill quantity</div>
                <div class="col-3 text-right">{{ intensity.quantity_of_skill }}</div>
                <div class="col-4"><b>Average Skill/passe</b></div>
                <div class="col-2 text-right"><b>{{ intensity.quantity_of_skill_by_passe | floatformat:3 }}</b></div>

                <div class="col-3"># Passes</div>
                <div class="col-3 text-right">{{ intensity.number_of_passes }}</div>
                <div class="col-4"><b>Average Skill/time</b></div>
                <div class="col-2 text-right"><b>{{ intensity.mean_quantity_of_skill | floatformat:3 }}</b></div>

                <div class="col-12 mt-3">
                    {% if intensity.to_markdown %}
                        <h5>More details :</h5>
                        {{ intensity.to_markdown | safe }}
                    {% else %}
                        <p class="text-muted">No additionnal details.</p>
                    {% endif %}
                </div>

            </div>
            <div class="card-footer">
                <a href="{% url 'intensity_list' %}">
                    <button type="submit" value="add" class="btn btn-icon btn-warning ">
                        <i class="tim-icons icon-double-left"></i>
                    </button>
                </a>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block footerscript %}
<script type="text/javascript">
    var ctx = document.getElementById("chart_radar_wellbeing").getContext("2d");

    const data = {
        labels: [
            'Mind State',
            'Sleep',
            'Zen',
            'Rest',
            'Muscle',
        ],
        datasets: [{
            data: [{{ wellbeing.mindstate }}, {{ wellbeing.sleep }}, {{ wellbeing.get_inversed_stress }}, {{ wellbeing.get_inversed_fatigue }}, {{ wellbeing.get_inversed_muscle_soreness }}],
            fill: true,
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
            borderColor: 'rgb(255, 99, 132)',
            pointBackgroundColor: 'rgb(255, 99, 132)',
            pointBorderColor: '#fff',
            pointHoverBackgroundColor: '#fff',
            pointHoverBorderColor: 'rgb(255, 99, 132)'
        }]
    };

    new Chart(ctx, {
        responsive: true,
        type: 'radar',
        data: data,
        options: {
            elements: {
                line: {
                    borderWidth: 3
                }
            },
            scales: {
                r: {
                    // angleLines: {
                    //     display: false
                    // },
                    suggestedMin: 0,
                    suggestedMax: 10,
                }
            },
            plugins: {
                legend: {
                    display: false,
                }
            }
        },
    });
</script>
{% endblock %}