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

  1. {% extends "front/base.html.twig" %}
  3. {% block title %} - Course détails{% endblock %}
  5. {% block mainContent %}
  7.     <section class="py-0 pb-lg-5">
  8.         <div class="container">
  9.             <div class="row g-3">
  10.                 <!-- Course video START -->
  11.                 <div class="col-12">
  12.                     <div class="video-player rounded-3">
  13.                         {% if course.media.videoUrl is not same as null or course.media.mp4File is not same as null or course.media.webMFile is not same  as null or course.media.oggFile is not same as null %}
  14.                             <video style="max-height: 600px;overflow: hidden;" controls crossorigin="anonymous" playsinline poster="{{ asset('uploads/media/courses/' ~ course.media.imageFile) }}">
  15.                                 {% if course.media.videoUrl is not same as null %}
  16.                                     <source src="{{ course.media.videoUrl }}" type="video/mp4" size="720">
  17.                                 {% endif %}
  18.                                 {% if course.media.mp4File is not same as null %}
  19.                                     <source src="{{ asset('uploads/media/courses/' ~ course.media.mp4File) }}" type="video/mp4" size="720">
  20.                                 {% endif %}
  21.                                 {% if course.media.webMFile is not same as null %}
  22.                                     <source src="{{ asset('uploads/media/courses/' ~ course.media.webMFile) }}" type="video/webm" size="720">
  23.                                 {% endif %}
  24.                                 {% if course.media.oggFile is not same as null %}
  25.                                     <source src="{{ asset('uploads/media/courses/' ~ course.media.oggFile) }}" type="video/ogg" size="720">
  26.                                 {% endif %}
  27.                             </video>
  28.                         {% else %}
  29.                             <img style="width: 100%;max-height: 400px;" src="{{ asset('uploads/media/courses/' ~ course.media.imageFile) }}" alt="">
  30.                         {% endif %}
  31.                     </div>
  32.                 </div>
  33.                 <!-- Course video END -->
  35.                 <!-- Playlist responsive toggler START -->
  36.                 <div class="col-12 d-lg-none">
  37.                     <button class="btn btn-primary mb-3" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasSidebar" aria-controls="offcanvasSidebar">
  38.                         <i class="bi bi-camera-video me-1"></i> {% trans %}PLAYLIST_KEY{% endtrans %}
  39.                     </button>
  40.                 </div>
  41.                 <!-- Playlist responsive toggler END -->
  42.             </div>
  43.         </div>
  44.     </section>
  46.     <section class="pt-0">
  47.         <div class="container">
  48.             <div class="row g-lg-5">
  50.                 <!-- Main content START -->
  51.                 <div class="col-lg-8">
  52.                     <div class="row g-4">
  53.                                 
  54.                         <!-- Course title START -->
  55.                         <div class="col-12">
  56.                             <!-- Title -->
  57.                             <h1>{{ course.intitule }}</h1>
  58.                             <!-- Content -->
  59.                             <ul class="list-inline mb-0">
  60.                                 <li class="list-inline-item h6 me-3 mb-1 mb-sm-0"><i class="fas fa-star text-warning me-2"></i>{{ course.review }}/5.0</li>
  61.                                 <li class="list-inline-item h6 me-3 mb-1 mb-sm-0"><i class="fas fa-user-graduate text-orange me-2"></i>{{ course.eleves|length }} Enrolled</li>
  62.                                 <li class="list-inline-item h6 me-3 mb-1 mb-sm-0"><i class="fas fa-signal text-success me-2"></i>{{ course.niveauDifficulte }}</li>
  63.                             </ul>
  64.                         </div>
  65.                         <!-- Course title END -->
  67.                         <!-- Instructor detail START -->
  68.                         <div class="col-12">
  69.                             <div class="d-sm-flex justify-content-sm-between align-items-center">
  70.                                 <!-- Avatar detail -->
  71.                                 <div class="d-flex align-items-center">
  72.                                     <!-- Avatar image -->
  73.                                     <div class="avatar avatar-lg">
  74.                                         <img class="avatar-img rounded-circle" src="{{ asset(course.enseignant.avatar) }}" alt="avatar">
  75.                                     </div>
  76.                                     <div class="ms-3">
  77.                                         <h6 class="mb-0"><a href="#">{% trans %}BY_KEY{% endtrans %} {{ course.enseignant.utilisateur.personne.nomComplet }}</a></h6>
  78.                                         <p class="mb-0 small">{% trans %}TRAINER_KEY{% endtrans %}</p>
  79.                                     </div>
  80.                                 </div>
  82.                                 <!-- Button -->
  83.                                 <div class="d-flex mt-2 mt-sm-0">
  84.                                     <a class="btn btn-danger-soft btn-sm mb-0" href="#">Follow</a>
  85.                                     <!-- Share button with dropdown -->
  86.                                     <div class="dropdown ms-2">
  87.                                         <a href="#" class="btn btn-sm mb-0 btn-info-soft small" role="button" id="dropdownShare" data-bs-toggle="dropdown" aria-expanded="false">
  88.                                             {% trans %}SHARE_KEY{% endtrans %}
  89.                                         </a>
  90.                                         <!-- dropdown button -->
  91.                                         <ul class="dropdown-menu dropdown-w-sm dropdown-menu-end min-w-auto shadow rounded" aria-labelledby="dropdownShare">
  92.                                             <li><a  class="dropdown-item" href="#"><i class="fab fa-twitter-square me-2"></i>Twitter</a></li>
  93.                                             <li><a class="dropdown-item" href="#"><i class="fab fa-facebook-square me-2"></i>Facebook</a></li>
  94.                                             <li><a class="dropdown-item" href="#"><i class="fab fa-linkedin me-2"></i>LinkedIn</a></li>
  95.                                             <li><a class="dropdown-item" href="#"><i class="fas fa-copy me-2"></i>Copy link</a></li>
  96.                                         </ul>
  97.                                     </div>
  98.                                 </div>
  99.                             </div>
  100.                         </div>
  101.                         <!-- Instructor detail END -->
  103.                         <!-- Course detail START -->
  104.                         <div class="col-12">
  105.                             <!-- Tabs START -->
  106.                             <ul class="nav nav-pills nav-pills-bg-soft px-3" id="course-pills-tab" role="tablist">
  107.                                 <!-- Tab item -->
  108.                                 <li class="nav-item me-2 me-sm-4" role="presentation">
  109.                                     <button class="nav-link mb-0 active" id="course-pills-tab-1" data-bs-toggle="pill" data-bs-target="#course-pills-1" type="button" role="tab" aria-controls="course-pills-1" aria-selected="true">{% trans %}COURSEOVERVIEW_KEY{% endtrans %}</button>
  110.                                 </li>
  111.                                 <!-- Tab item -->
  112.                                 <li class="nav-item me-2 me-sm-4" role="presentation">
  113.                                     <button class="nav-link mb-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 %}COURSE_REVIEWS_KEY{% endtrans %}</button>
  114.                                 </li>
  115.                                 <!-- Tab item -->
  116.                                 <li class="nav-item me-2 me-sm-4" role="presentation">
  117.                                     <button class="nav-link mb-0" id="course-pills-tab-3" data-bs-toggle="pill" data-bs-target="#course-pills-3" type="button" role="tab" aria-controls="course-pills-3" aria-selected="false">FAQs </button>
  118.                                 </li>
  119.                                 <!-- Tab item -->
  120.                                 <li class="nav-item me-2 me-sm-4" role="presentation">
  121.                                     <button class="nav-link mb-0" id="course-pills-tab-4" data-bs-toggle="pill" data-bs-target="#course-pills-4" type="button" role="tab" aria-controls="course-pills-4" aria-selected="false">Forum</button>
  122.                                 </li>
  123.                             </ul>
  124.                             <!-- Tabs END -->
  126.                             <!-- Tab contents START -->
  127.                             <div class="tab-content pt-4 px-3" id="course-pills-tabContent">
  128.                                 <!-- Content START -->
  129.                                 <div class="tab-pane fade show active" id="course-pills-1" role="tabpanel" aria-labelledby="course-pills-tab-1">
  130.                                     <!-- Course detail START -->
  131.                                     <h5 class="mb-3">Course Description</h5>
  132.                                     {{ course.content|raw }}
  133.                                 </div>
  134.                                 <!-- Content END -->
  136.                                 <!-- Content START -->
  137.                                 <div class="tab-pane fade" id="course-pills-2" role="tabpanel" aria-labelledby="course-pills-tab-2">
  138.                                     {{ include('front/includes/courses/_course_reviews.html.twig') }}
  139.                                 </div>
  140.                                 <!-- Content END -->
  142.                                 <!-- Content START -->
  143.                                 <div class="tab-pane fade" id="course-pills-3" role="tabpanel" aria-labelledby="course-pills-tab-3">
  144.                                     <!-- Title -->
  145.                                     <h5 class="mb-3">Frequently Asked Questions</h5>
  146.                                     {% for faq in course.faqs %}
  147.                                         <!-- FAQ item -->
  148.                                         <div class="mt-4">
  149.                                             <h6>{{ faq.question }}</h6>
  150.                                             <p class="mb-0">{{ faq.answer }}</p>
  151.                                         </div>
  152.                                     {% endfor %}
  153.                         
  154.                                 </div>
  155.                                 <!-- Content END -->
  157.                                 <!-- Content START -->
  158.                                 <div class="tab-pane fade" id="course-pills-4" role="tabpanel" aria-labelledby="course-pills-tab-4">
  159.                                     {{ include('front/includes/courses/forum.html.twig') }}
  160.                                 </div>
  162.                                 <div class="mt-5 text-right">
  163.                                     {% if lastReadLesson is not same as null %}
  164.                                         <a class="btn btn-success-soft" href="{{ url("app_front_read_lesson", {slug: lastReadLesson.slug}) }}">Poursuivre la lecture</a>
  165.                                     {% else %}
  166.                                         <a href="{{ path('app_front_course_start', {slug: course.slug}) }}" class="btn btn-primary-soft">Commencer la lecture</a>
  167.                                     {% endif %}
  168.                                     
  169.                                     
  170.                                 </div>
  171.                                 <!-- Content END -->
  172.                             </div>
  173.                             <!-- Tab contents END -->
  174.                         </div>
  175.                         <!-- Course detail END -->
  176.                     </div>
  177.                 </div>
  178.                 <!-- Main content END -->
  180.                 <!-- Right sidebar START -->
  181.                 <div class="col-lg-4">
  182.                     <!-- Responsive offcanvas body START -->
  183.                     <div class="offcanvas-lg offcanvas-end" tabindex="-1" id="offcanvasSidebar" aria-labelledby="offcanvasSidebarLabel">
  184.                         <div class="offcanvas-header bg-dark">
  185.                             <h5 class="offcanvas-title text-white" id="offcanvasSidebarLabel">Course playlist</h5>
  186.                             <button type="button" class="btn btn-sm btn-light mb-0" data-bs-dismiss="offcanvas" data-bs-target="#offcanvasSidebar" aria-label="Close"><i class="bi bi-x-lg"></i></button>
  187.                         </div>
  188.                         <div class="offcanvas-body p-3 p-lg-0">
  189.                             <div class="col-12">
  190.                                 <!-- Accordion START -->
  191.                                 <div class="accordion accordion-icon accordion-bg-light" id="accordionExample2">
  192.                                     {% for chapter in course.chapitres %}
  193.                                         <!-- Item -->
  194.                                         <div class="accordion-item mb-3">
  195.                                             <h6 class="accordion-header font-base" id="heading-{{ chapter.id }}">
  196.                                                 <a class="accordion-button fw-bold rounded {{ loop.index > 1 ? 'collapsed' : '' }} d-block" href="#collapse-{{ chapter.id }}" data-bs-toggle="collapse" data-bs-target="#collapse-{{ chapter.id }}" aria-expanded="{{ loop.index > 1 ? 'false' : 'true' }}" aria-controls="collapse-{{ chapter.id }}">
  197.                                                     <span class="mb-0">{{ chapter.title }}</span> 
  198.                                                     <span class="small d-block mt-1">({{ chapter.lessons|length }} Lectures)</span> 
  199.                                                 </a>
  200.                                             </h6>
  201.                                             <div id="collapse-{{ chapter.id }}" class="accordion-collapse collapse {{ loop.index is same as 1 ? 'show' : '' }}" aria-labelledby="heading-{{ chapter.id }}" data-bs-parent="#accordionExample2">
  202.                                                 <div class="accordion-body mt-3">
  203.                                                     <div class="vstack gap-3">
  205.                                                         <!-- Progress bar -->
  206.                                                         <div class="overflow-hidden">
  207.                                                             <div class="d-flex justify-content-between">
  208.                                                                 <p class="mb-1 h6">0/{{ chapter.lessons|length  }} Completed</p>
  209.                                                                 <h6 class="mb-1 text-end">0%</h6>
  210.                                                             </div>
  211.                                                             <div class="progress progress-sm bg-primary bg-opacity-10">
  212.                                                                 <div class="progress-bar bg-primary aos" role="progressbar" data-aos="slide-right" data-aos-delay="200" data-aos-duration="1000" data-aos-easing="ease-in-out" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
  213.                                                                 </div>
  214.                                                             </div>
  215.                                                         </div>
  216.                                                         {% for lesson in chapter.lessons %}
  217.                                                             <!-- Course lecture -->
  218.                                                             <div class="d-flex justify-content-between align-items-center">
  219.                                                                 <div class="position-relative d-flex align-items-center">
  220.                                                                     {% if is_granted('ROLE_INSTRUCTOR') or is_granted('ROLE_ADMIN') %}
  221.                                                                         <a href="{{  not app.user and not is_granted('ROLE_INSTRUCTOR') }}" class="btn btn-danger-soft btn-round btn-sm mb-0 stretched-link position-static">
  222.                                                                             <i class="fas fa-play me-0"></i>
  223.                                                                         </a>
  224.                                                                     {% else %}
  225.                                                                         <a href="#" class="btn btn-danger-soft btn-round btn-sm mb-0 stretched-link position-static">
  226.                                                                             <i class="fas fa-play me-0"></i>
  227.                                                                         </a>    
  228.                                                                     {% endif %}
  229.                                                                     
  230.                                                                     <span class="d-inline-block text-truncate ms-2 mb-0 h6 fw-light w-200px">{{ lesson.title }}</span>
  231.                                                                 </div>
  232.                                                                 <p class="mb-0 text-truncate">2m 10s</p>
  233.                                                             </div>
  234.                                                         {% endfor %}
  236.                                                     </div>
  237.                                                 </div>
  238.                                             </div>
  239.                                         </div>
  240.                                     {% endfor %}
  241.                                 </div>
  242.                                 <!-- Accordion END -->
  243.                             </div>
  244.                         </div>
  245.                     </div>
  246.                     <!-- Responsive offcanvas body END -->
  248.                     <!-- Tags START -->
  249.                     <div class="mt-4">
  250.                         <h4 class="mb-3">Tags</h4>
  251.                         <ul class="list-inline mb-0">
  252.                             {% for tag in course.tags|split(',') %}
  253.                                 <li class="list-inline-item"> <a class="btn btn-outline-light btn-sm" href="#">{{ tag }}</a> </li>
  254.                             {% endfor %}
  255.                         </ul>
  256.                     </div>
  257.                     <!-- Tags END -->
  258.                 </div>
  259.                 <!-- Right sidebar END -->
  261.             </div><!-- Row END -->
  262.         </div>
  263.     </section>
  266.     <!-- =======================
  267.     Listed courses START -->
  268.     <section class="pt-0">
  269.         <div class="container">
  270.             <!-- Title -->
  271.             <div class="row mb-4">
  272.                 <h2 class="mb-0">Top Listed Courses</h2>
  273.             </div>
  275.             <div class="row">
  276.                 <!-- Slider START -->
  277.                 <div class="tiny-slider arrow-round arrow-blur arrow-hover">
  278.                     <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">
  279.                         {% for cours in topCourses %}
  280.                             {% if cours is not same as course %}
  281.                                 {{ include('front/includes/courses/_trending_course.html.twig', {course: cours}) }}
  282.                             {% endif %}
  283.                         {% endfor %}
  285.                     </div>
  286.                 </div>
  287.                 <!-- Slider END -->        
  288.             </div>
  289.         </div>
  290.     </section>
  291.     <!-- =======================
  292.     Listed courses END -->
  294. {% endblock %}