{% extends "base.html.twig" %} {% block content %}
<form>
<div class="container-fluid p-0">
  <div class="container pt-5 pb-5">
    <div class="row">
      <div class="col-lg-3 col-responsive">
        {% include 'shared/menu.html.twig' %}
      </div>
      <div class="col-lg-9 ">
        <div class="mt-3">
          <h5 class="card-header-title">Mes cours</h5>
        </div>
        {% include 'courses/filtre.html.twig' %}
        <div class="">
          <div class="col pt-3">
            {% if courses is defined and courses is not null and courses| length >0 %}

            {% else %}
            <div class="container mt-5">
              <div class="row">
                <img src="{{asset('build/images/no-courses.svg')}}" class="card-img-top rounded-img-5 img-card-size"
                  alt="no cours">
                <p class="text-center my-4 text-muted">Vous n'avez pas de cours en cours.</p>
                <p class="text-center text-muted">
                  <a class="btn btn-primary" href="{{ path('cours')}}">Explorer cours</a>
                </p>
              </div>
            </div>
            {% endif %}
          </div>
        </div>
        {% if courses is defined and courses is not null and courses| length >0 %}
        <div class="my-4">
          {% for tr in courses %}
          <div class="container mt-4 p-0">
            <div class="mx-lg-auto">
              <div class="card  p-2 mb-2">
                <div class="card-body p-0">
                  <div class="row">
                    <div class="col-md-3">
                      <a class="text-decoration-none" href="{{ path('description', {'slug': tr.formation.slug}) }}">
                        {% if tr.formation.image is null %}
                        <img src="{{asset('images/formation/defaultformation.jpg')}}"
                          class="card-img-top rounded-img-5 img-card-size" alt="course">
                        {% else %}
                        <img class="card-img radius img-card-size"
                          src="{{ asset('images/formation/'~ tr.formation.image) }}" alt="Image Description">
                        {% endif %}
                      </a>
                    </div>
                    <div class="col-md-6">
                      <a class="text-decoration-none" href="{{ path('description', {'slug': tr.formation.slug}) }}">
                        <h5 class="mt-1 fw-bold">{{tr.formation.title}}</h5>
                      </a>
                      <div class="mb-2">
                        <small class="card-subtitle subtitle-margin">{{tr.formation.category.name}}</small>
                        {% if (tr.formation.skills == "Débutant") %}
                        <span class="badge bg-success ">Débutant</span>
                        {% elseif (tr.formation.skills == "Amateur") %}
                        <span class="badge bg-warning">Amateur</span>
                        {% else %}
                        <span class="badge bg-danger">Expert</span>
                        {% endif %}
                      </div>
                      <p class="card-text ">{{tr.formation.description| u.truncate(60, '..', false) }}</p>
                      <div class="row">
                        <div class="col">
                          <p class="float-start mb-0">Avancement du cours</p>
                          {% if percents is defined and percents is not null %} {% set percentround = percents[
                          loop.index -1 ]|round %}
                          <p class="fs-7 float-end me-3 mb-0">{{ percentround~'%' }}</p>
                          {% else %}
                          <p class="fs-7 float-end me-3 mb-0">0%</p>
                          {% endif %}
                        </div>
                        <div class="col-12 pe-4 my-2">
                          <div class="progress" style="height:5px;">
                            {% if percents is defined and percents is not null %} {% set percentround = percents[
                            loop.index -1]|round %}
                            <div class="progress-bar" role="progressbar" aria-valuenow="{{ percentround }}"
                              aria-valuemin="0" aria-valuemax="100" style="width:{{percentround~'%'}}"></div>
                            {% else %}
                            <div class="progress-bar bg-primary" role="progressbar" aria-valuenow="0" aria-valuemin="0"
                              aria-valuemax="100" style="width:0%"></div>
                            {% endif %}
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="col-md-3 devider-col">
                      <div class="row mx-1 align-items-center h-100">
                        <a class="btn btn-primary" href="{{ path('cours',{'level': 0 ,'category': tr.formation.category.id}) }}">Cours</a>
                         <a class="btn btn-primary" href="{{ path('formations',{'level':0 ,'category': tr.formation.category.id}) }}  " >Formation disponibles</a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          {% endfor %}
        </div>
        <div class="d-flex justify-content-end">
          <div class="navigation">
            {% do courses.setPageRange(2) %}
            {{ knp_pagination_render(courses,'pagination.html.twig') }}
          </div>
        </div>
        {% endif %}
      </div>
    </div>
  </div>
  </form>
  {% endblock %}