{% 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' wellbeing.gymnast.id 'physiological' %}">{{ wellbeing.gymnast }}</a>'s well being on {{ wellbeing.date | date:"j F Y" }}</h4>
            </div>
            <div class="card-body text-center">
                {% if wellbeing.to_markdown %}
                    {{ wellbeing.to_markdown | safe }}
                {% else %}
                    <p class="text-muted">No additionnal details.</p>
                {% endif %}

                <canvas id="chart_radar_wellbeing" class="chartjs" width="400" height="400"></canvas>
                <p class="text-muted">Mindstate : {{ wellbeing.mindstate }}&nbsp;&nbsp;|&nbsp;&nbsp;Sleep : {{ wellbeing.sleep }}&nbsp;&nbsp;|&nbsp;&nbsp;Stress : {{ wellbeing.stress }}&nbsp;&nbsp;|&nbsp;&nbsp;Fatigue : {{ wellbeing.fatigue }}&nbsp;&nbsp;|&nbsp;&nbsp;Muscle soreness : {{ wellbeing.muscle_soreness }}</p>
            </div>
            <div class="card-footer">
                <a href="{% url 'wellbeing_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 %}