{% load has_group %}
{% load is_user_equal_to_gymnast %}

<div class="row justify-content-center ml-3 pr-0">
    <div class="col-md-12 pr-0">
        <div class="card">
            <div class="card-header">
                <h4>Mindstates</h4>
            </div>
            <div class="card-body pt-0 pb-0">
                {% if mindstate_list %}
                    <div><canvas id="chartjs_mindstate" class="chartjs" width="400" height="200"></canvas></div>

                <div class="row">
                    <div class="col-md-8 col-l-6 col-xl-4 offset-xl-4">
                        <table class="table tablesorter table-striped table-condensed" id="mindstate_table">
                            <thead>
                                <tr>
                                    <th style="width: 4%"></th>
                                    <th style="width: 48%" class="header text-center">Date</th>
                                    <th style="width: 48%" class="header text-center">Score</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for state in mindstate_list %}
                                <tr class="routine_{{ score.routine_type }}">
                                    <td>
                                        <a href="{% url 'score_update' state.id %}">
                                            <button type="button" rel="tooltip" class="btn btn-link btn-sm btn-icon">
                                                <span class="tim-icons icon-pencil text-warning"></span>
                                            </button>
                                        </a>
                                    </td>
                                    <td class="text-right">{{ state.date | date:"d-m-Y" }}</td>
                                    <td class="text-right">{{ state.score }}&nbsp;</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
                <script type="text/javascript">
                    $(document).ready(function () {
                        $('#mindstate_table').tablesorter({
                            headers: {
                                0: { sorter: false },
                            },
                            dateFormat: "uk",
                            sortList: [[1, 0],]
                        });

                    });
                </script>
                {% else %}
                    <p class="text-muted">No mindstate recorded for this gymnast.</p>
                {% endif %}
            </div>
            <div class="card-footer text-right text-muted pt-0">
                {% if request.user|has_group:"trainer" or request.user|is_user_equal_to_gymnast:gymnastid %}
                <a href="{% url 'mindstate_create_for_gymnast' gymnastid %}">
                    <button type="submit" value="add" class="btn btn-icon btn-warning ">
                        <i class="fas fa-plus"></i>
                    </button>
                </a>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    new Chart(document.getElementById("chartjs_mindstate"), {
        type: 'line',
        data: {
            datasets: [
                {% if mindstate_list %}
                {
                    label: 'Mindstate',
                    backgroundColor: 'rgb(255, 99, 132, 0.25)',
                    borderColor: 'rgb(255, 99, 132)',
                    fill: true,
                    data: [
                        {% for state in mindstate_list %}
                        {
                            x: '{{ state.date | date:"d-m-Y" }}',
                            y: '{{ state.score }}'
                        },
                        {% endfor %}
                    ]
                },
                {% endif %}
            ],
        },
        options: {
        scales: {
            xAxes: [{
                type: "time",
                time: {
                    parser: 'DD-MM-YYYY',
                    round: 'day'
                },
                scaleLabel: {
                    display: true,
                }
            },],
            yAxes: [{
                scaleLabel: {
                    display: true,
                },
                ticks: {
                    beginAtZero: true,
                    max: 10
                }
            }]
        },
        legend: {
            display: false,
        }
    },
    });
</script>