{% load static %}
<div class="row justify-content-center ml-1">
    <div class="col-md-6">
        <div class="card mb-4">
            <div class="card-header">
                <h4>Height/Weight</h4>
            </div>
            <div class="card-body pt-0 pb-0 pr-0 pl-0">
                {% if height_weight_list %}
                    <div><canvas id="chart_height_weight" class="chartjs" width="400" height="200"></canvas></div>
                {% else %}
                    <p class="pl-3 text-muted">No height/weight recorded for this gymnast.</p>
                {% endif %}
            </div>
            <div class="card-footer text-right text-muted pt-0">
                {% if height_weight_list %}
                <a href="{% url 'heightweight_list_for_gymnast' gymnast_id %}">
                    <button type="submit" value="add" class="btn btn-icon btn-warning ">
                        <i class="fal fa-line-height"></i>
                    </button>
                </a>
                {% endif %}

                <a href="{% url 'heightweight_create_for_gymnast' gymnast_id %}">
                    <button type="submit" value="add" class="btn btn-icon btn-warning ">
                        <i class="fas fa-plus"></i>
                    </button>
                </a>
            </div>
        </div>
    </div>

    <div class="col-md-6">
        <div class="card mb-4">
            <div class="card-header">
                <h4>Well Being</h4>
            </div>
            <div class="card-body pt-0 pb-0 pr-0 pl-0">
                {% if wellbeing_list %}
                    <div><canvas id="chart_wellbeing" class="chartjs" width="400" height="200"></canvas></div>
                {% else %}
                    <p class="pl-3 text-muted">No well being recorded for this gymnast.</p>
                {% endif %}
            </div>
            <div class="card-footer text-right text-muted pt-0">
                {% if wellbeing_list %}
                <a href="{% url 'wellbeing_list_for_gymnast' gymnast_id %}">
                    <button type="submit" value="add" class="btn btn-icon btn-warning ">
                        <i class="fal fa-file-medical-alt"></i>
                    </button>
                </a>
                {% endif %}

                <a href="{% url 'wellbeing_create_for_gymnast' gymnast_id %}">
                    <button type="submit" value="add" class="btn btn-icon btn-warning ">
                        <i class="fas fa-plus"></i>
                    </button>
                </a>
            </div>
        </div>
    </div>
</div>
<div class="row justify-content-center ml-1">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h4>Injuries</h4>
            </div>
            <div class="card-body pt-0 pb-0">
                {% if injuries_list %}
                <table class="table tablesorter table-striped table-condensed" id="injury_table">
                    <thead>
                        <tr>
                            <th style="width: 3%"></th>
                            <th class="header text-center" style="width: 10%">Date</th>
                            <th class="header text-left" style="width: 10%">Mechanism</th>
                            <th class="header text-left" style="width: 10%">Type</th>
                            <th class="header text-left" style="width: 25%">Location</th>
                            <th class="header text-left" style="width: 10%">Side</th>
                            <th class="header text-left" style="width: 25%">Skill</th>
                            <th class="header text-center" style="width: 10%"># Week Off</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for injury in injuries_list %}
                        <tr>
                            <td class="text-left">
                                <a href="{% url 'injury_update' injury.id %}">
                                    &nbsp;<span class="tim-icons icon-pencil text-warning"></span>
                                </a>
                            </td>
                            <td class="text-center"><a href="{% url 'injury_details' injury.id %}">{{ injury.date | date:"d-m-Y" }}</a></td>
                            <td class="text-left">{{ injury.get_mechanism_display }}</td>
                            <td class="text-left">{{ injury.get_injury_type_display }}</td>
                            <td class="text-left">{{ injury.location }}</td>
                            <td class="text-left">{{ injury.get_body_side_display }}</td>
                            <td class="text-left">{% if injury.skill %}<a href="{% url 'skill_details' injury.skill.id %}">{{ injury.skill }}</a>{% else %}-{% endif %}</td>
                            <td class="text-center">{{ injury.nb_week_off }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
                {% else %}
                    <p class="text-muted">No injury known for this gymnast.</p>
                {% endif %}
            </div>
            <div class="card-footer text-right text-muted pt-0">
                <a href="{% url 'injury_create_for_gymnast' gymnast_id %}">
                    <button type="submit" value="add" class="btn btn-icon btn-warning ">
                        <i class="fas fa-plus"></i>
                    </button>
                </a>
            </div>
        </div>
    </div>
</div>

<script src="{% static "js/template_users/chart_gradient_color.js" %}"></script>
<script type="text/javascript">

    var timeFormat = 'DD-MM-YYYY';

    {% if height_weight_list %}
    var ctx = document.getElementById("chart_height_weight").getContext("2d");

    var border_color_pink = 'rgb(255, 99, 132)';
    var gradient_stroke_pink = ctx.createLinearGradient(0, 230, 0, 50);
    gradient_stroke_pink.addColorStop(1, 'rgba(255, 99, 132, 0.4)');
    gradient_stroke_pink.addColorStop(0.75, 'rgba(255, 99, 132, 0.3)');
    gradient_stroke_pink.addColorStop(0.5, 'rgba(255, 99, 132, 0.2)');
    gradient_stroke_pink.addColorStop(0.25, 'rgba(255, 99, 132, 0)');

    var border_color_orange = 'rgb(255, 159, 64)';
    var gradient_stroke_orange = ctx.createLinearGradient(0, 230, 0, 50);
    gradient_stroke_orange.addColorStop(1, 'rgba(255, 159, 64, 0.4)');
    gradient_stroke_orange.addColorStop(0.75, 'rgba(255, 159, 64, 0.3)');
    gradient_stroke_orange.addColorStop(0.5, 'rgba(255, 159, 64, 0.2)');
    gradient_stroke_orange.addColorStop(0.25, 'rgba(255, 159, 64, 0)');

    var height_values = [
        {% for height_weight in height_weight_list %}
            {
                x: '{{ height_weight.date | date:"d-m-Y" }}',
                y: '{{ height_weight.weight }}'
            },
        {% endfor %}
    ]

    var weight_values = [
        {% for height_weight in height_weight_list %}
        {
            x: '{{ height_weight.date | date:"d-m-Y" }}',
            y: '{{ height_weight.height | add:"-100" }}'
        },
        {% endfor %}
    ]

    var height_weight_data = {
        datasets: [
            {
                label: 'Weight',
                cubicInterpolationMode: 'monotone',
                backgroundColor: gradient_stroke_pink,
                borderColor: border_color_pink,
                pointBackgroundColor: border_color_pink,
                fill: true,
                data: height_values,
            },
            {
                label: 'Height',
                cubicInterpolationMode: 'monotone',
                backgroundColor: gradient_stroke_orange,
                borderColor: border_color_orange,
                pointBackgroundColor: border_color_orange,
                fill: true,
                data: weight_values
            },
        ],
    };

    new Chart(ctx, {
        responsive: true,
        type: 'line',
        data: height_weight_data,
        options: {
            scales: {
                x: {
                    type: 'time',
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'Date',
                        ticks: {
                            autoSkip: true,
                            source: 'data',
                        },
                    },
                    time: {
                        parser: timeFormat,
                        tooltipFormat: 'LL',
                        round: 'day',
                    },
                },
            },
            plugins: {
                legend: {
                    display: true,
                    position: 'bottom',
                }
            }
        },
    });
    {% endif %}

    {% if wellbeing_list %}
    var ctx = document.getElementById("chart_wellbeing").getContext("2d");

    var border_color_pink = 'rgb(255, 99, 132)';
    var gradient_stroke_pink = ctx.createLinearGradient(0, 230, 0, 50);
    gradient_stroke_pink.addColorStop(1, 'rgba(255, 99, 132, 0.4)');
    gradient_stroke_pink.addColorStop(0.75, 'rgba(255, 99, 132, 0.3)');
    gradient_stroke_pink.addColorStop(0.5, 'rgba(255, 99, 132, 0.2)');
    gradient_stroke_pink.addColorStop(0.25, 'rgba(255, 99, 132, 0)');

    var border_color_orange = 'rgb(255, 159, 64)';
    var gradient_stroke_orange = ctx.createLinearGradient(0, 230, 0, 50);
    gradient_stroke_orange.addColorStop(1, 'rgba(255, 159, 64, 0.4)');
    gradient_stroke_orange.addColorStop(0.75, 'rgba(255, 159, 64, 0.3)');
    gradient_stroke_orange.addColorStop(0.5, 'rgba(255, 159, 64, 0.2)');
    gradient_stroke_orange.addColorStop(0.25, 'rgba(255, 159, 64, 0)');

    var border_color_green = 'rgb(75, 192, 192)';
    var gradient_stroke_green = ctx.createLinearGradient(0, 230, 0, 50);
    gradient_stroke_green.addColorStop(1, 'rgba(75, 192, 192, 0.4)');
    gradient_stroke_green.addColorStop(0.75, 'rgba(75, 192, 192, 0.3)');
    gradient_stroke_green.addColorStop(0.5, 'rgba(75, 192, 192, 0.2)');
    gradient_stroke_green.addColorStop(0.25, 'rgba(75, 192, 192, 0)');

    var border_color_blue = 'rgb(54, 162, 235)';
    var gradient_stroke_blue = ctx.createLinearGradient(0, 230, 0, 50);
    gradient_stroke_blue.addColorStop(1, 'rgba(54, 162, 235, 0.4)');
    gradient_stroke_blue.addColorStop(0.75, 'rgba(54, 162, 235, 0.3)');
    gradient_stroke_blue.addColorStop(0.5, 'rgba(54, 162, 235, 0.2)');
    gradient_stroke_blue.addColorStop(0.25, 'rgba(54, 162, 235, 0)');

    var border_color_yellow = 'rgb(255, 205, 86)';
    var gradient_stroke_yellow = ctx.createLinearGradient(0, 230, 0, 50);
    gradient_stroke_yellow.addColorStop(1, 'rgba(255, 205, 86, 0.4)');
    gradient_stroke_yellow.addColorStop(0.75, 'rgba(255, 205, 86, 0.3)');
    gradient_stroke_yellow.addColorStop(0.5, 'rgba(255, 205, 86, 0.2)');
    gradient_stroke_yellow.addColorStop(0.25, 'rgba(255, 205, 86, 0)');

    var mindstate_values = [
        {% for wellbeing in wellbeing_list %}
            {
                x: '{{ wellbeing.date | date:"d-m-Y" }}',
                y: '{{ wellbeing.mind_state }}'
            },
        {% endfor %}
    ];

    var sleep_values = [
        {% for wellbeing in wellbeing_list %}
            {
                x: '{{ wellbeing.date | date:"d-m-Y" }}',
                y: '{{ wellbeing.sleep }}'
            },
        {% endfor %}
    ];

    var stress_values = [
        {% for wellbeing in wellbeing_list %}
            {
                x: '{{ wellbeing.date | date:"d-m-Y" }}',
                y: '{{ wellbeing.stress }}'
            },
        {% endfor %}
    ];

    var fatigue_values = [
        {% for wellbeing in wellbeing_list %}
            {
                x: '{{ wellbeing.date | date:"d-m-Y" }}',
                y: '{{ wellbeing.fatigue }}'
            },
        {% endfor %}
    ];

    var muscle_soreness_values = [
        {% for wellbeing in wellbeing_list %}
            {
                x: '{{ wellbeing.date | date:"d-m-Y" }}',
                y: '{{ wellbeing.muscle_soreness }}'
            },
        {% endfor %}
    ];

    var wellbeing_data = {
        datasets: [
            {
                label: 'Mindstate',
                cubicInterpolationMode: 'monotone',
                backgroundColor: gradient_stroke_pink,
                borderColor: border_color_pink,
                pointBackgroundColor: border_color_pink,
                fill: true,
                data: mindstate_values,
            },
            {
                label: 'Sleep',
                cubicInterpolationMode: 'monotone',
                backgroundColor: gradient_stroke_orange,
                borderColor: border_color_orange,
                pointBackgroundColor: border_color_orange,
                fill: true,
                data: sleep_values,
            },
            {
                label: 'Stress',
                cubicInterpolationMode: 'monotone',
                backgroundColor: gradient_stroke_green,
                borderColor: border_color_green,
                pointBackgroundColor: border_color_green,
                fill: true,
                data: stress_values,
            },
            {
                label: 'Fatigue',
                cubicInterpolationMode: 'monotone',
                backgroundColor: gradient_stroke_blue,
                borderColor: border_color_blue,
                pointBackgroundColor: border_color_blue,
                fill: true,
                data: fatigue_values,
            },
            {
                label: 'Muscle',
                cubicInterpolationMode: 'monotone',
                backgroundColor: gradient_stroke_yellow,
                borderColor: border_color_yellow,
                pointBackgroundColor: border_color_yellow,
                fill: true,
                data: muscle_soreness_values,
            },
        ],
    };

    new Chart(ctx, {
        type: 'line',
        data: wellbeing_data,
        options: {
            scales: {
                x: {
                    type: 'time',
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'Date',
                        ticks: {
                            autoSkip: true,
                            source: 'data',
                        },
                    },
                    time: {
                        parser: timeFormat,
                        tooltipFormat: 'LL',
                        round: 'day',
                    },
                },
            },
            plugins: {
                legend: {
                    display: true,
                    position: 'bottom',
                }
            }
        },
    });
    {% endif %}
</script>