{% extends "base.html" %}

{% block page_title %}{{ jumper.first_name }} {{ jumper.last_name }}{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12 col-sm-4 col-md-4 col-lg-4 m-b-md">
        <div class="card card-user">
            <div class="card-body">
                <p class="card-text">
                    <div class="author">
                        <div class="block block-one"></div>
                        <div class="block block-two"></div>
                        <div class="block block-three"></div>
                        <div class="block block-four"></div>
                        <a href="javascript:void(0)">
                            {% if jumper.picture %}
                                <img src="{{ jumper.picture.url }}" alt="{{ jumper }}" class="avatar">
                            {% endif %}
                            <h4 class="title">{{ jumper.first_name }} {{ jumper.last_name }}</h4>
                        </a>
                    </div>
                </p>
                <div class="card-description">
                    {{ jumper.age }} years ({{ jumper.birthdate | date:"d F Y" }})<span class="text-info"><b>{{ jumper.get_orientation_display }}</b></span><br/>
                    <br \>
                    {% if jumper.address %}
                        {{ jumper.address }} - {{ jumper.postal }} {{ jumper.city }}<br \>
                    {% endif %}
                </div>
                <a href="{% url 'chrono_create' jumper.id %}" class="nav-item dropdown-item">New <i class="far fa-stopwatch"></i></a>
            </div>
        </div>
    </div>

    <div class="col-12 col-sm-4 col-md-4 col-lg-4">
        <div class="table-responsive pb-0"></div>
        {% if learnedskills_list %}
            <table class="table tablesorter table-striped table-condensed" data-sort="table" id="skilltable">
                <thead>
                    <tr>
                        <th class="header text-left" style="width: 25%">Date</th>
                        <th class="header text-left" style="width: 50%">Skill</th>
                        <th class="header text-left" style="width: 30%">Type</th>
                    </tr>
                </thead>
                <tbody>
                {% for learnedskill in learnedskills_list %}
                    <tr>
                        <td class="text-left">{{ learnedskill.date | date:"d-m-Y" }}</a></td>
                        <td class="text-left"><a href="{% url 'skill_details' learnedskill.skill.id %}">{{ learnedskill.skill.name }}</a></td>
                        <td class="text-left">{{ learnedskill.get_cando_display }}</a></td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        {% else %}
        <table class="table">
            <tr>
                <td>No information found</td>
            </tr>
        </table>
        {% endif %}
    </div>

    <div class="col-12 col-sm-4 col-md-4 card">
        <div class="table-responsive pb-0">
            {% if chronos_list %}
                <table class="table tablesorter table-striped table-condensed" data-sort="table" id="chronotable">
                    <thead>
                        <tr>
                            <th class="header text-left" style="width: 35%">Date</th>
                            <th class="header text-left" style="width: 35%">Type</th>
                            <th class="header text-left" style="width: 30%">Tof</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for chrono in chronos_list %}
                            <tr>
                                <td class="text-left">{{ chrono.date | date:"d-m-Y"  }}</a></td>
                                <td class="text-left">{{ chrono.get_type_display }}</a></td>
                                <td class="text-right">{{ chrono.tof }}</a></td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            {% else %}
            <table class="table">
                <tr>
                    <td>No information found</td>
                </tr>
            </table>
            {% endif %}
        </div>
    </div>
</div>

<div class="row">
    <div class="col-12 col-sm-12 col-md-12 col-lg-12 card">
        <div class="card-body pb-0">
            <canvas id="chartjs_routine" class="chartjs" width="350" height="150"></canvas>
        </div>
    </div>
</div>
{% endblock %}

{% block footerscript %}
<script type="text/javascript">
    $(function(){
        $('#skilltable').tablesorter({
            dateFormat: "uk",
        })

        $('#chronotable').tablesorter({
            dateFormat: "uk",
        })
    });

    new Chart(document.getElementById("chartjs_routine"),{
        type: 'line',
        data:{
            datasets:[
                {% if straightjump_score %}
                {
                    label: '10|',
                    backgroundColor: 'rgb(255, 99, 132, 0.25)',
                    borderColor: 'rgb(255, 99, 132)',
                    fill: true,
                    data: [
                        {% for chrono in straightjump_score %}
                            {
                                x: '{{ chrono.date | date:"d-m-Y" }}',
                                y: '{{ chrono.tof }}'
                            },
                        {% endfor %}
                    ]
                },
                {% endif %}

                {% if routine_score %}
                {
                    label: 'L2',
                    backgroundColor: 'rgb(255, 159, 64, 0.25)',
                    borderColor: 'rgb(255, 159, 64)',
                    fill: true,
                    data: [
                        {% for chrono in routine_score %}
                            {
                                x: '{{ chrono.date | date:"d-m-Y" }}',
                                y: '{{ chrono.tof }}'
                            },
                        {% endfor %}
                    ]
                },
                {% endif %}
            ],
        },
        options: {
            scales: {
                xAxes: [{
                    type: "time",
                    time: {
                        format: 'DD-MM-YYYY',
                        round: 'day'
                    },
                    scaleLabel: {
                        display: true,
                    }
                }, ],
                yAxes: [{
                    scaleLabel: {
                        display: true,
                    }
                }]
            },
            legend: {
                display: true,
                position: 'bottom',
            }
        },
    });
</script>

{% endblock %}