templates/front/includes/courses/_trending_course.html.twig line 1

  1. <!-- Card item START -->
  2. <div>
  3.     <div class="card action-trigger-hover border bg-transparent">
  4.         <!-- Image -->
  5.         <img src="{{ asset('uploads/media/courses/' ~ course.media.imageFile) }}" class="card-img-top" alt="{{ course.intitule }}">
  6.         <!-- Ribbon -->
  7.         <div class="ribbon mt-3"><span>{{ course.isFree ? 'Free' : 'Premium' }}</span></div>
  8.         <!-- Card body -->
  9.         <div class="card-body pb-0">
  10.             <!-- Badge and favorite -->
  11.             <div class="d-flex justify-content-between mb-3">
  12.                 <span class="hstack gap-2">
  13.                     <span class="badge bg-primary bg-opacity-10 text-primary">{{ course.niveauDifficulte }}</span>
  14.                 </span>
  15.                 <a href="#" class="h6 fw-light mb-0"><i class="far fa-bookmark"></i></a>
  16.             </div>
  17.             <!-- Title -->
  18.             <h5 class="card-title"><a href="{{ url("app_front_course_details", {slug: course.slug}) }}">{{ course.intitule|u.truncate(60, '...') }}</a></h5>
  19.             <!-- Rating -->
  20.             <div class="d-flex justify-content-between mb-2">
  21.                 <div class="hstack gap-2">
  22.                     <p class="text-warning m-0">{{ course.review }}<i class="fas fa-star text-warning ms-1"></i></p>
  23.                     <span class="small">({{ course.reviews|length }})</span>
  24.                 </div>
  25.                 <div class="hstack gap-2">
  26.                     <p class="h6 fw-light mb-0 m-0">{{ course.eleves|length }}</p>
  27.                     <span class="small">({% trans %}STUDENT_KEY{% endtrans %})</span>
  28.                 </div>
  29.             </div>
  30.             <!-- Time -->
  31.             <div class="hstack gap-3">
  32.                 <span class="h6 fw-light mb-0"><i class="far fa-clock text-danger me-2"></i>{{ course.dureeApprentissage }}</span>
  33.                 <span class="h6 fw-light mb-0"><i class="fas fa-table text-orange me-2"></i>{{ course.numberOfLessons }} {% trans %}LESSONS_KEY{% endtrans %}</span>
  34.             </div>
  35.         </div>
  36.         <!-- Card footer -->
  37.         <div class="card-footer pt-0 bg-transparent">
  38.             <hr>
  39.             <!-- Avatar and Price -->
  40.             <div class="d-flex justify-content-between align-items-center">
  41.                 <!-- Avatar -->
  42.                 <div class="d-flex align-items-center">
  43.                     <div class="avatar avatar-sm">
  44.                         <img class="avatar-img rounded-1" src="{{ asset(course.enseignant.utilisateur.personne.avatarPath) }}" alt="avatar">
  45.                     </div>
  46.                     <p class="mb-0 ms-2"><a href="#" class="h6 fw-light mb-0">{{ course.enseignant.utilisateur.personne.firstName }}</a></p>
  47.                 </div>
  48.                 <!-- Price -->
  49.                 <div>
  50.                     <h4 class="text-success mb-0 item-show">{{ course.isFree ? 'Free' : course.montantAbonnement ~ 'XAF' }}</h4>
  51.                     <a href="{{ url("app_front_course_details", {slug: course.slug}) }}" class="btn btn-sm btn-success-soft item-show-hover"><i class="fas fa-eye me-2"></i>{% trans %}DETAILS_KEY{% endtrans %}</a>
  52.                 </div>
  53.             </div>
  54.         </div>
  55.     </div>
  56. </div>
  57. <!-- Card item END -->