{% extends 'base.html.twig' %}

{% block head %}
    {{ parent() }}
{% endblock %}

{% block header %}
    {{ parent() }}
{% endblock %}
{% block body %}
    <div class="bg-dash-dark-2 py-4">
        <div class="container-fluid">
            <h2 class="h5 mb-0">Dashboard</h2>
        </div>
    </div>
    {% if app.user.username|default('non connecté') in ['gestionnaire', 'admin'] %}
        <section>
            <div class="container-fluid">
                <div class="row gy-4">
                    <div class="col-md-3 col-sm-6">
                        <div class="card mb-0">
                            <a href="{{ path('coursLister') }}">
                                <div class="card-body">
                                    <div class="d-flex align-items-end justify-content-between mb-2">
                                        <div class="me-2">
                                            <svg class="svg-icon svg-icon-sm svg-icon-heavy text-gray-600 mb-2">
                                                <use xlink:href="#user-1"> </use>
                                            </svg>
                                            <p class="text-sm text-uppercase text-gray-600 lh-1 mb-0">Nombre de cours</p>
                                        </div>
                                        <p class="text-xxl lh-1 mb-0 text-dash-color-1">{{ cours|length }}</p>
                                    </div>
                                    <div class="progress" style="height: 3px">
                                        <div class="progress-bar bg-dash-color-1" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="card mb-0">
                            <a href="{{ path('eleveLister') }}">
                                <div class="card-body">
                                    <div class="d-flex align-items-end justify-content-between mb-2">
                                        <div class="me-2">
                                            <svg class="svg-icon svg-icon-sm svg-icon-heavy text-gray-600 mb-2">
                                                <use xlink:href="#stack-1"> </use>
                                            </svg>
                                            <p class="text-sm text-uppercase text-gray-600 lh-1 mb-0">Nombre d'élèves</p>
                                        </div>
                                        <p class="text-xxl lh-1 mb-0 text-dash-color-2">{{ eleves|length }}</p>
                                    </div>
                                    <div class="progress" style="height: 3px">
                                        <div class="progress-bar bg-dash-color-2" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="card mb-0">
                            <a href="{{ path('instrumentLister') }}">
                                <div class="card-body">
                                    <div class="d-flex align-items-end justify-content-between mb-2">
                                        <div class="me-2">
                                            <svg class="svg-icon svg-icon-sm svg-icon-heavy text-gray-600 mb-2">
                                                <use xlink:href="#survey-1"> </use>
                                            </svg>
                                            <p class="text-sm text-gray-600 lh-1 mb-0">Nombre d'instruments</p>
                                        </div>
                                        <p class="text-xxl lh-1 mb-0 text-dash-color-3">{{ instruments|length }}</p>
                                    </div>
                                    <div class="progress" style="height: 3px">
                                        <div class="progress-bar bg-dash-color-3" role="progressbar" style="width: 55%" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="card mb-0">
                            <a href="{{ path('contratPretLister') }}">
                                <div class="card-body">
                                    <div class="d-flex align-items-end justify-content-between mb-2">
                                        <div class="me-2">
                                            <svg class="svg-icon svg-icon-sm svg-icon-heavy text-gray-600 mb-2">
                                                <use xlink:href="#paper-stack-1"> </use>
                                            </svg>
                                            <p class="text-sm text-uppercase text-gray-600 lh-1 mb-0">Nombre de prêts</p>
                                        </div>
                                        <p class="text-xxl lh-1 mb-0 text-dash-color-4">{{ contratsPret|length }}</p>
                                    </div>
                                    <div class="progress" style="height: 3px">
                                        <div class="progress-bar bg-dash-color-4" role="progressbar" style="width: 35%" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    {% else %}
        <section>
            <div class="container-fluid">
                <div class="row gy-4">
                    <div class="col-md-3 col-sm-6">
                        <div class="card mb-0">
                            <a href="#">
                                <div class="card-body">
                                    <div class="d-flex align-items-end justify-content-between mb-2">
                                        <div class="me-2">
                                            <svg class="svg-icon svg-icon-sm svg-icon-heavy text-gray-600 mb-2">
                                                <use xlink:href="#user-1"> </use>
                                            </svg>
                                            <p class="text-sm text-uppercase text-gray-600 lh-1 mb-0">Nombre de cours</p>
                                        </div>
                                        <p class="text-xxl lh-1 mb-0 text-dash-color-1">{{ cours|length }}</p>
                                    </div>
                                    <div class="progress" style="height: 3px">
                                        <div class="progress-bar bg-dash-color-1" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="card mb-0">
                            <a href="#">
                                <div class="card-body">
                                    <div class="d-flex align-items-end justify-content-between mb-2">
                                        <div class="me-2">
                                            <svg class="svg-icon svg-icon-sm svg-icon-heavy text-gray-600 mb-2">
                                                <use xlink:href="#stack-1"> </use>
                                            </svg>
                                            <p class="text-sm text-uppercase text-gray-600 lh-1 mb-0">Nombre d'élèves</p>
                                        </div>
                                        <p class="text-xxl lh-1 mb-0 text-dash-color-2">{{ eleves|length }}</p>
                                    </div>
                                    <div class="progress" style="height: 3px">
                                        <div class="progress-bar bg-dash-color-2" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="card mb-0">
                            <a href="#">
                                <div class="card-body">
                                    <div class="d-flex align-items-end justify-content-between mb-2">
                                        <div class="me-2">
                                            <svg class="svg-icon svg-icon-sm svg-icon-heavy text-gray-600 mb-2">
                                                <use xlink:href="#survey-1"> </use>
                                            </svg>
                                            <p class="text-sm text-gray-600 lh-1 mb-0">Nombre d'instruments</p>
                                        </div>
                                        <p class="text-xxl lh-1 mb-0 text-dash-color-3">{{ instruments|length }}</p>
                                    </div>
                                    <div class="progress" style="height: 3px">
                                        <div class="progress-bar bg-dash-color-3" role="progressbar" style="width: 55%" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="card mb-0">
                            <a href="#">
                                <div class="card-body">
                                    <div class="d-flex align-items-end justify-content-between mb-2">
                                        <div class="me-2">
                                            <svg class="svg-icon svg-icon-sm svg-icon-heavy text-gray-600 mb-2">
                                                <use xlink:href="#paper-stack-1"> </use>
                                            </svg>
                                            <p class="text-sm text-uppercase text-gray-600 lh-1 mb-0">Nombre de prêts</p>
                                        </div>
                                        <p class="text-xxl lh-1 mb-0 text-dash-color-4">{{ contratsPret|length }}</p>
                                    </div>
                                    <div class="progress" style="height: 3px">
                                        <div class="progress-bar bg-dash-color-4" role="progressbar" style="width: 35%" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    {% endif %}
    <section class="pt-0">
        <div class="container-fluid">
            <div class="row gy-4">
                <div class="col-lg-4">
                    <div class="card">
                        <div class="card-body">
                            <canvas id="barChartExample1"></canvas>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-body">
                            <canvas id="barChartExample2"></canvas>
                        </div>
                    </div>
                </div>
                <div class="col-lg-8">
                    <div class="card">
                        <div class="card-body">
                            <canvas id="lineChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
{% endblock %}
{% block footer %}
    {{ parent() }}
{% endblock %}