{% extends "base.html" %}
{% load static %}

{% block page_title %}Dashboard{% endblock %}

{% block content %}

<div class="row">
    <div class="col-md-3">
        <div class="card">
            <div class="card-header">
                <h4><i class="fal fa-quote-left text-danger"></i> Quote</h4>
            </div>
            <div class="card-body text-justify">
                {{ quote.to_markdown | safe }}
            </div>
            {% if quote.author %}
                <div class="card-footer text-right text-muted">
                    <i>{{ quote.author }}</i>
                </div>
            {% endif %}
        </div>
    </div>
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h4 class=""><i class="text-primary fal fa-laugh-wink"></i> Hi {{ user.username }} !</h4>
            </div>
            <div class="card-body text-justify">
                <p>Welcome to Jarvi v0.80 <span class="text-muted">(last update : 29-01-2023)</span></p>
                <p>This application is here to help coaches to manage the gymnasts (evolution, evaluation, routines, scores, …). This tool is not perfect so feel free to make improvement proposals, bug reports, … by sending me an <a href="mailto:gregory@flyingacrobaticstrampoline.be">email</a>.</p>
                <p>You can find the user manuel <a href="{% static "files/Manuel_Utilisateur.pdf" %}" download>here (in french)</a>.</p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card">
            <div class="card-header">
                <h4><i class="fal fa-chart-area text-warning"></i> Statistics</h4>
            </div>
            <div class="card-body">
                <div class="w-lg m-x-auto">
                    <div class="progress-container progress-primary">
                        <div class="progress">
                            <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60"
                                aria-valuemin="0" aria-valuemax="100" style="width: {{ percentage_week }}%;"></div>
                        </div>
                    </div>
                    {% if nb_active_gymnast or nb_event or nb_skill or nb_routine or nb_score or nb_club %}
                    <div class="row">
                        <div class="col-md-7">
                            <ul class="list-unstyled mb-0">
                                {% if nb_active_gymnast %}<li>{{ nb_active_gymnast }} active gymnasts</li>{% endif %}
                                {% if nb_event %}<li>{{ nb_event }} events</li>{% endif %}
                                {% if nb_score %}<li>{{ nb_score }} scores</li>{% endif %}
                            </ul>
                        </div>
                        <div class="col-md-5">
                            <ul class="list-unstyled mb-0">
                                {% if nb_skill %}<li>{{ nb_skill }} skills</li>{% endif %}
                                {% if nb_routine %}<li>{{ nb_routine }} routines</li>{% endif %}
                                {% if nb_club %}<li>{{ nb_club }} clubs</li>{% endif %}
                            </ul>
                        </div>
                    </div>
                    {% else %}
                    <br />
                    No statistics to display.
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">

    <div class="col-md-3">
        <div class="card">
            <div class="card-header">
                <h4><i class="fal fa-calendar-alt text-warning"></i> Next Events</h4>
            </div>
            <div class="card-body">
                {% if event_list %}
                <table class="table tablesorter table-striped table-condensed" data-sort="table" id="event_table">
                    {% for event in event_list %}
                    <tr>
                        <td class="text-left"><a href="{% url 'event_details' event.id %}">{{ event.name }}</a></td>
                        <td>
                            {% if event.number_of_week_from_today < 0 %}
                                {{event.number_of_week_from_today}}
                            {% else %}
                                <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 %}">
                                <b>{{event.number_of_week_from_today}}</b></span>
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </table>
                {% else %}
                No future event defined
                {% endif %}
            </div>
        </div>
    </div>

    <div class="col-md-3">
        <div class="card">
            <div class="card-header">
                <h4><i class="fal fa-exclamation-triangle text-danger"></i> Updated needed</h4>
            </div>
            <div class="card-body">
                {% if waiting_update_gymnast %}
                <table class="table tablesorter table-striped table-condensed" data-sort="table" id="gymnast_table">
                    {% for gymnast in waiting_update_gymnast %}
                    <tr>
                        <td class="text-left"><a href="{% url 'gymnast_details' gymnast.id %}">{{ gymnast }}</a></td>
                        <td class="text-right">{{ gymnast.club.acronym }}</td>
                    </tr>
                    {% endfor %}
                </table>
                {% else %}
                    No update needed.
                {% endif %}
            </div>
        </div>
    </div>

    <div class="col-md-3">
        <div class="card">
            <div class="card-header">
                <h4><i class="fal fa-highlighter text-success"></i> Last updated gymnasts</h4>
            </div>
            <div class="card-body">
                {% if last_updated_gymnast %}
                <table class="table tablesorter table-striped table-condensed" data-sort="table" id="gymnast_table">
                    {% for gymnast in last_updated_gymnast %}
                    <tr>
                        <td class="text-left"><a href="{% url 'gymnast_details' gymnast.id %}">{{ gymnast }}</a></td>
                        <td class="text-right">{{ gymnast.club.acronym }}</td>
                    </tr>
                    {% endfor %}
                </table>
                {% else %}
                    No update since your last visit
                {% endif %}
            </div>
        </div>
    </div>

    <div class="col-md-3">
        <div class="card">
            <div class="card-header">
                <h4><i class="fal fa-birthday-cake text-info"></i> Next birthday</h4>
            </div>
            <div class="card-body">
                {% if birthday_list %}
                <table class="table tablesorter table-striped table-condensed" data-sort="table" id="gymnast_table">
                    {% for gymnast in birthday_list %}
                    <tr>
                        <td class="text-left"><a href="{% url 'gymnast_details' gymnast.id %}">{{ gymnast.first_name }}</a></td>
                        <td class="">{{ gymnast.birthdate | date:"j M"}}</td>
                        <td class="text-right">{{ gymnast.next_age }} years</td>
                    </tr>
                    {% endfor %}
                </table>
                {% else %}
                    No next birtday (it's a bug).
                {% endif %}
            </div>
        </div>
    </div>

</div>

{% endblock %}

{% block footerscript %}

{% endblock%}