{% extends "base.html" %}

<!-- {% block page_title %}.: Overview :.{% endblock %} -->

<!-- {% block title %}Overview{% endblock %} -->

{% block content %}

<div class="row">
    <div class="col-md-9">
        <div class="card">
            <div class="card-header">
                <h4>Hi {{ user.first_name }} !</h4>
            </div>
            <div class="card-body">
                {% if error %}
                    <p class="text-danger">{{ error }}</p>
                {% endif %}
                {% if number_of_courses %}
                We are in the <b>{{ week_number }}th week</b> of the season and you've {{ number_of_courses }} courses the next two days : <br />
                <ul>
                    {% for course in courses_list %}
                    <li><a href="/course/{{ course.id }}/(date)">{{ course.get_iso_day_number_display }} from {{ course.hour_begin|time:"H:i" }} to {{ course.hour_end|time:"H:i" }} ({{ course.club.acronym }})</a></li >
                    {% endfor %}
                </ul>
                {% endif %}
                {% if number_unreaded_message %}
                You have <a href="{% url 'received_messages' %}">{{ number_unreaded_message }}</a> unread messsage{% if number_unreaded_message > 1 %}s{% endif %}.
                {% endif %}
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card mb-2">
            <div class="card-body">
                <div class="w-lg m-x-auto">
                    <canvas id="chartjs_year_completude" style="width: 238px; height: 238px"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-4">
        <div class="card">
            <div class="card-header">
                <h4 class="">Next events</h4>
            </div>
            <div class="card-body">
                {% if event_list %}
                    <table class="table table-condensed table-sm table-striped">
                        <tbody>
                            {% for event in event_list %}
                            <tr>
                                <td class="text-left">
                                    <a href="{% url 'event_details' event.id %}">{{ event.name }}</a>
                                </td>
                                <td>
                                    {{ event.datebegin | date:"j M"}}
                                </td>
                                <td class="text-right"><span class="text-{% if event.number_of_week_from_today > 12 %}success{% elif event.number_of_week_from_today > 9 %}info{% elif event.number_of_week_from_today > 6 %}warning{% else %}danger{% endif %}">{{event.number_of_week_from_today}}w</span></td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                {% else %}
                    No planified event.
                {% endif %}
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <div class="card">
            <div class="card-header">
                <h4 class="">Next Unavailability</h4>
            </div>
            <div class="card-body">
            {% if unavailable_list %}
                <table class="table table-condensed table-sm table-striped">
                    <tbody>
                    {% for unavailable in unavailable_list %}
                    <tr>
                        <td class="text-left">
                            <a class="list-group-item" href="/unavailability/{{unavailable.id}}">
                                {% if unavailable.datebegin == unavailable.dateend %}
                                    {{ unavailable.datebegin | date:"j M" }}
                                {% else %}
                                    {{ unavailable.datebegin | date:"j M"}} - {{ unavailable.dateend | date:"j M"}}
                                {% endif %}
                            </a>
                        </td>
                        {% endfor %}
                    </tbody>
                </table>
                {% else %}
                    No unavailability planified.
                {% endif %}
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <div class="card">
            <div class="card-header">
                <h4 class="">Next birthdays</h4>
            </div>
            <div class="card-body">
                <table class="table table-condensed table-sm table-striped">
                    <tbody>
                        {% for gymnast in birthday_list %}
                        <tr>
                            <td class="text-left"><a href="{% url 'gymnast_details' gymnast.id %}">{{ gymnast.firstname }}</a></td>
                            <td class="">{{ gymnast.birthdate | date:"j M"}}</td>
                            <td class="text-right">{{ gymnast.nextAge }} years</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<!-- <div class="row">
    <div class="col-md-4">
        <div class="card">
            <div class="card-header">
                <h4>Courses</h4>
            </div>
            <div class="card-body">
                {% for course in course_list %}
                <a class="list-group-item" href="#">
                    <span class="list-group-progress" style="width: {% widthratio course.2 course.1 100 %}%;"></span>
                    <span class="pull-right text-muted">{{ course.2 }}/{{ course.1 }}</span>
                    {{ course.0.get_diso_day_number_display }} <span class="text-muted">({{ course.0.hour_begin}} - {{ course.0.hour_end }})</span>
                </a>
                {% endfor %}
            </div>
        </div>
    </div>
</div> -->
{% endblock %}

{% block footerscript %}
<script type="text/javascript">
    new Chart(document.getElementById("chartjs_year_completude"),{
        type: "doughnut",
        data: {
            datasets:[
                {
                    borderWidth: 1,
                    data:[
                        {{ donecourses }},
                        {{ courses_left }}
                    ],
                    backgroundColor:[
                        "#1bc98e", /*"#1ca8dd",*/
                        "#FF2F92"   /*"#1bc98e"*/
                    ]
                }
            ],
            labels: [
                'Given courses ',
                'Total courses '
            ],
        },
        options: {
            legend: {
                display: false,
            },
            cutoutPercentage: 55,
            maintainAspectRatio: false,
        },
    });
</script>
{% endblock%}