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

{% block title %}Liste de tous les élèves{% endblock %}

{% block body %}
<div class="row">
    <div class="col-md-12 grid-margin">
        <div class="d-flex justify-content-between flex-wrap">
            <div class="d-flex align-items-end flex-wrap">
                <div class="d-flex">
                    <i class="mdi mdi-home text-muted hover-cursor"></i>
                    <p class="text-muted mb-0 hover-cursor">
                        &nbsp;/&nbsp;
                            {% if is_granted('ROLE_SUPER_ADMIN') == true %}
                                <a class="student-dashbord-service" href="{{ path('home') }}">Tableau de bord</a>
                            {% else %}
                                Tableau de bord
                            {% endif %}
                        &nbsp;/&nbsp;
                    </p>
                    {% if (is_granted('ROLE_SUPER_ADMIN') == true or is_granted('ROLE_ADMIN') == true or is_granted('ROLE_MANAGER') == true or is_granted('ROLE_ADMINISTRATIVE') == true) %}
                        <p class="mb-0">séries de questions</p>
                        <p class="text-primary mb-0 hover-cursor">
                            &nbsp;/&nbsp; {{student}}
                        </p>
                    {% else %}
                        <p class="text-primary mb-0 hover-cursor">séries de questions</p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
  {# common flash messages bloc #}
  {{ include('common/flash_messages_bloc.html.twig') }}
  <div class="col-md-12 grid-margin stretch-card">
    <div class="card">
      <div class="card-body bloc-radius bloc-border bloc-box-shadow">
        {# Note bloc #}
        <div class="row">
            <div class="alert alert-info alert-dismissible fade show" role="alert">
                La récupération des statistiques peut prendre un peu de temps, veuillez patienter s'il vos plaît. Si ceci arrive.
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        </div>
        {# three blocs #}
        <div id="content-table" class="row">
            {# first bloc#}
            <div class="col-xs-6 col-sm-6 col-md-4 mb-3" onclick="window.location.href='{% if is_granted('ROLE_MANAGER') == true %} {{path('student_traffic_laws_general_progress', {'id' : idStudent})}} {% else %} {{path('student_traffic_laws_general_progress')}} {% endif %}';">
                <div class="shadow bloc-wraper-theme border bloc-radius">
                    <div class="bloc-theme-content" >
                        <div class="p-3 w-100 ">
                            <h3 class="py-3 mb-2 bloc-title-ellipsis" style="height:40px">Les fiches de code</h3>
                            <div class="progress">
                                <div class="progress-bar bg-danger" role="progressbar" style="width: {{generalProgressPercent}}%;" aria-valuenow="{{generalProgressPercent}}" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <div class="d-flex flex-wrap justify-content-center">
                                <p>{{generalProgressPercent}}% terminé</p>
                            </div>
                        </div>
                    </div>
                </div>                
            </div>
            {# second bloc#}
            <div class="col-xs-6 col-sm-6 col-md-4 mb-3" onclick="window.location.href='{% if is_granted('ROLE_MANAGER') == true %} {{path('student_live_general_progress', {'id' : idStudent})}} {% else %} {{path('student_live_general_progress')}} {% endif %}';">
                <div class="shadow bloc-wraper-theme border bloc-radius active-bg">
                    <div class="bloc-theme-content" >
                        <div class="p-3 w-100 ">
                            <h3 class="text-danger py-3 mb-2 bloc-title-ellipsis" style="height:40px">Suivi de Live</h3>
                        </div>
                    </div>
                </div>                
            </div>
            {# second bloc#}
            <div class="col-xs-6 col-sm-6 col-md-4 mb-3" onclick="window.location.href='{% if is_granted('ROLE_MANAGER') == true %} {{path('student_series_questions_general_progress', {'id' : idStudent})}} {% else %} {{path('student_series_questions_general_progress')}} {% endif %}';">
                <div class="shadow bloc-wraper-theme border bloc-radius">
                    <div class="bloc-theme-content" >
                        <div class="p-3 w-100 ">
                            <h3 class="py-3 mb-2 bloc-title-ellipsis" style="height:40px">Les séries de questions</h3>
                            <div class="progress">
                                <div class="progress-bar bg-danger" role="progressbar" style="width: {{questionSeriesPercent}}%;" aria-valuenow="{{questionSeriesPercent}}" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <div class="d-flex flex-wrap justify-content-center">
                                <p>{{questionSeriesPercent}}% terminé</p>
                            </div>
                        </div>
                    </div>
                </div>                
            </div>
        </div>
        <div class="row text-center mx-2 border-bottom">
            <div class="col-sm-4 py-3">
                <b>Les fiches de code</b>
            </div>
            <div class="col-sm-4 py-3 border-bottom border-danger border-3 text-danger">
                <b>Suivi de Live</b>
            </div>
            <div class="col-sm-4 py-3">
                <b>Les séries de questions</b>
            </div>
        </div>
        {# includes #}
		{{ include('student/includes/progress/live.html.twig') }}                            
      </div>
    </div>
  </div>
</div>
{% endblock %}