templates/front/courses/course_details_text.html.twig line 1

  1. {% extends "front/base.html.twig" %}
  3. {% block title %} - Course détails{% endblock %}
  5. {% block mainContent %}
  7.     <section class="bg-blue py-7">
  8.         <div class="container">
  9.             <div class="row justify-content-lg-between">
  11.                 <div class="col-lg-8">
  12.                     <!-- Title -->
  13.                     <h1 class="text-white">{{ course.intitule }}</h1>
  14.                     <!-- p class="text-white">{{ course.description }}</p -->
  15.                     <!-- Content -->
  16.                     <ul class="list-inline mb-5">
  17.                         <li class="list-inline-item h6 me-4 mb-1 mb-sm-0 text-white"><span class="fw-light">{% trans %}BY_KEY{% endtrans %}</span> {{ course.enseignant.utilisateur.personne.nomComplet }}</li>
  18.                         <li class="list-inline-item me-4 mb-1 mb-sm-0">
  19.                             <!-- ul class="list-inline mb-0">
  20.                                 <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
  21.                                 <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
  22.                                 <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
  23.                                 <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
  24.                                 <li class="list-inline-item me-0 small"><i class="fas fa-star-half-alt text-warning"></i></li>
  25.                                 <li class="list-inline-item ms-2 h6 text-white">4.5/5.0</li>
  26.                                 <!-- li class="list-inline-item text-white">(1,586 reviews)</li -->
  27.                             </ul -->
  28.                         </li>
  29.                         <!-- li class="list-inline-item h6 mb-0 text-white"><i class="fas fa-globe text-info me-2"></i>{{ course.language }}</li -->
  30.                     </ul>
  31.                 </div>
  33.                 <div class="col-lg-3">
  34.                     <!-- h6 class="text-white lead fw-light mb-3"><i class="fas fa-user-graduate text-orange me-2"></i>{{ course.eleves|length }} {% trans %}ALLREADYENROLLED_KEY{% endtrans %}</h6 -->
  35.                     
  36.                     <!-- Button -->
  37.                     <a href="{{ url("app_front_course_start", {slug: course.slug}, "http", false) }}" class="btn btn-warning mb-3 w-100">
  38.                         {% if not exist %}
  39.                             {% trans %}ENROLLANDSTART_KEY{% endtrans %}
  40.                         {% else %}
  41.                             {% trans %}CONTINUE_READING_KEY{% endtrans %} 
  42.                         {% endif %} 
  43.                     </a>
  44.                     {% if not app.user or (app.user.eleve and not app.user.eleve.isPremium) %}
  45.                          <a href="{{ path('app_plan') }}" class="btn btn-warning mb-3 w-100">S'abonner et accéder à tous les cours</a>
  46.                     {% endif %}
  47.                     
  48.                     <!-- Progress item -->
  49.                     <div class="overflow-hidden mb-4">
  50.                         <h6 class="text-white">{% trans %}YOURPROGRESS_KEY{% endtrans %}</h6>
  51.                         {% set percent = lessons|length > 0 ? 100 * lectures|length / lessons|length : 0 %}
  52.                         <div class="progress progress-sm bg-white bg-opacity-10 mb-1">
  53.                             <div class="progress-bar bg-white aos" role="progressbar" data-aos="slide-right" data-aos-delay="200" data-aos-duration="1000" data-aos-easing="ease-in-out" style="width: {{ percent }}%;" aria-valuenow="{{ percent }}" aria-valuemin="0" aria-valuemax="100"></div>
  54.                         </div>
  55.                         <small class="text-white">{{ lectures|length }} sur {{ lessons|length }} {% trans %}COMPLETED_KEY{% endtrans %}</small>
  56.                     </div>
  57.                 </div>
  59.             </div>
  60.         </div>
  61.     </section>
  63.     <!-- =======================
  64.     Page content START -->
  65.     <section class="pt-0">
  66.         <div class="container">
  67.             <div class="row">
  68.                 <!-- Main content START -->
  69.                 <div class="col-12">
  70.                     <div class="card shadow rounded-2 p-0 mt-n5">
  71.                         <!-- Tabs START -->
  72.                         <div class="card-header border-bottom px-4 pt-3 pb-0">
  73.                             <ul class="nav nav-bottom-line py-0" id="course-pills-tab" role="tablist">
  74.                                 <!-- Tab item -->
  75.                                 <li class="nav-item me-2 me-sm-4" role="presentation">
  76.                                     <button class="nav-link mb-2 mb-md-0" id="course-pills-tab-2" data-bs-toggle="pill" data-bs-target="#course-pills-2" type="button" role="tab" aria-controls="course-pills-2" aria-selected="false">{% trans %}CHAPTERS_KEY{% endtrans %}</button>
  77.                                 </li>
  78.                             </ul>
  79.                         </div>
  80.                         <!-- Tabs END -->
  82.                         <!-- Tab contents START -->
  83.                         <div class="card-body p-sm-4">
  84.                             <div class="tab-content" id="course-pills-tabContent">
  85.                                 <!-- Content START -->
  86.                                 <div class="tab-pane fade show active" id="course-pills-1" role="tabpanel" aria-labelledby="course-pills-tab-1">
  87.                                     <div class="card">
  88.                                         <!-- Card header -->
  89.                                         <div class="card-header border-bottom p-0 pb-3">
  90.                                             <!-- Title and select -->
  91.                                             <div class="d-sm-flex justify-content-between align-items-center">
  92.                                                 <h4 class="mb-0">{% trans %}ALLCHAPTERS_KEY{% endtrans %}</h4>
  93.                                             </div>
  94.                                         </div>
  96.                                         <!-- Card body -->
  97.                                         <div class="card-body p-0 pt-3">
  98.                                             {% for chap in course.chapitres|sort((a, b) => a.numero <=> b.numero) %}
  99.                                                 <!-- Note item -->
  100.                                                 <div class="row g-4">
  101.                                                     <!-- Content -->
  102.                                                     <div class="col-sm-12 col-xl-12">
  103.                                                         <h5>{{ chap.title }}</h5>
  104.                                                         <p>{{ chap.description|raw }}</p>
  105.                                                         <!-- Buttons -->
  106.                                                         <div class="hstack gap-3 flex-wrap">
  107.                                                             <a href="{{ url("app_front_course_start", {slug: course.slug}, "http", false) }}" class="btn btn-sm btn-primary mb-0"><i class="bi bi-play-fill me-2"></i> 
  108.                                                             {% if not exist %}
  109.                                                                 {% trans %}STARTREADING_KEY{% endtrans %}
  110.                                                             {% else %}
  111.                                                                 {% trans %}CONTINUE_KEY{% endtrans %}
  112.                                                             {% endif %}
  113.                                                         </a>
  114.                                                         </div>
  115.                                                     </div>
  116.                                                 </div>
  118.                                                 {% if not loop.last %}
  119.                                                     <hr> <!-- Divider -->
  120.                                                 {% endif %}
  121.                                             {% endfor %}
  122.                                         </div>
  123.                                     </div>
  124.                                 </div>
  125.                                 <!-- Content END -->
  127.                                 
  129.                             </div>
  130.                         </div>
  131.                         <!-- Tab contents END -->
  132.                     </div>
  133.                 </div>
  134.                 <!-- Main content END -->
  135.             </div><!-- Row END -->
  136.         </div>
  137.     </section>
  138.     <!-- =======================
  139.     Page content END -->
  142.     <!-- =======================
  143.     Listed courses START -->
  144.     <section class="pt-0 mt-5 mb-3">
  145.         <div class="container">
  146.             <!-- Title -->
  147.             <div class="row mb-4">
  148.                 <h2 class="mb-0">{% trans %}TOPLISTED_KEY{% endtrans %}</h2>
  149.             </div>
  151.             <div class="row">
  152.                 <!-- Slider START -->
  153.                 <div class="tiny-slider arrow-round arrow-blur arrow-hover">
  154.                     <div class="tiny-slider-inner" data-autoplay="false" data-arrow="true" data-edge="2" data-dots="false" data-items="3" data-items-lg="2" data-items-sm="1">
  155.                         {% for cours in topCourses %}
  156.                             {% if cours is not same as course %}
  157.                                 {{ include('front/includes/courses/_trending_course.html.twig', {course: cours}) }}
  158.                             {% endif %}
  159.                         {% endfor %}
  161.                     </div>
  162.                 </div>
  163.                 <!-- Slider END -->        
  164.             </div>
  165.         </div>
  166.     </section>
  167.     <!-- =======================
  168.     Listed courses END -->
  170. {% endblock %}