[IMP] website_slides: Add elearning feature to slides

Purpose of this commit is to introduce a new way of displaying and managing
slides in eLearning module. Its purpose is to give a better experience to
users when going through a course. Notably a fullscreen mode allows to take
lessons one by one without going out of the elearning display. Integration
of all slide types eases taking the course step by step.

Quiz are introduced in this commit. Those are an addition to slides with
some question / answers (multiple choice). It allows customer to gain karma
and improves gamification. Certifications are still done using the survey
application. Quiz targets only small tests at the end of a given slide.

A new widget is added to display and control slide display in fullscreen
mode. Old display is still available for documentation channels or when
going out of fullscreen mode, to see details on comments / review / statistics
and have access to share options.

This commit is linked to task ID 1902304 and PR #29876. It closes the main
work on refactoring website slides into eLearning, with other tasks already
merged in current community [1][2][3][4][5].

[1] Task ID 1940360 landed at b2149bc7a274217a0b96e587abd52093bd98e5e8: certification inclusion
[2] Task ID 1936153 landed at 6c6179e57cede3d9889c33873740a7b1ddecda2e: homepage inclusion
[3] Task ID 1937160 landed at 8b7605c9e5df4a700b0139d1781db24ae5d31626: selling courses
[4] Task ID 1922159 and 1940516 landed at 5fa651cb013ac67d7ba592498c4cf2770dec2483 and 6a64c3ce821f080969e49e5e760e52ae9bfc26cc:
    new user profile and gamification of slides / forum
[5] Task ID 1938643 landed at 77b5673a0dd220b3c28e88f8acbb5274b486c5bd: upload channel/slide

1 files changed, 331 insertions, 19 deletions

diff --git a/addons/website_slides/views/website_slides_templates.xml b/addons/website_slides/views/website_slides_templates.xml
index e06e75d0b66..7bcf5bd77b7 100644
--- a/addons/website_slides/views/website_slides_templates.xml
+++ b/addons/website_slides/views/website_slides_templates.xml
@@ -108,8 +108,8 @@
             <div class="row o_wslides_course_header">
                 <div class="col-lg-12 o_wslides_container o_wslides_course_header_container">
                     <div class="row align-items-end">
-                        <div class="col o_wslides_course_header_aside">
-                            <img class="mr-3" t-att-src="'/web/image/slide.channel/%s/image' % channel.id"/>
+                        <div class="col o_wslides_course_header_aside main_image">
+                          <div t-field="channel.image" widget="image" t-options="{'widget': 'image'}"/>
                         </div>
                         <div class="col-8 o_wslides_course_header_content">
                             <h3 class="row"><span class="font-weight-bold col" t-field="channel.name"/></h3>
@@ -254,8 +254,74 @@
                                 </a>
                             </div>
                         </div>
+                        <!-- training mode ==============================================-->
+                        <div t-if="channel.channel_type == 'training'" style="width:70%;" class="d-flex align-items-center ml-4 justify-content-center">
+                            <div class="course-content oe_js_course_slides_list" style="width: 100%">
+                                <ul>
+                                    <t t-set="i" t-value="1"/>
+                                    <t t-set="j" t-value="0"/>
+                                    <t t-foreach="channel.category_ids" t-as="category">
+                                        <li t-attf-class="#{'section-draggable' if user == user_id else ''}" t-attf-category_id="#{category.id}">
+                                            <div t-attf-category_id="#{category.id}" class="course-section text-muted font-weight-bold pt-0 pb-0 pl-2 pr-2 d-flex justify-content-between align-items-center">
+                                                <div style="width:50%;" class="d-flex align-items-center">
+                                                    <i t-if="channel.user_id == user" class="fa fa-arrows mr-3 text-muted"></i>
+                                                    <div class="mr-2">Section <span class="section-index" t-esc="i"/>:</div>
+                                                    <span t-field="category.name"/>
+                                                </div>
+                                                <!-- <a t-if="channel.user_id == user" title="Add content to this section" class="mr-2 p-0 oe_slide_js_add_slide"  href="#" t-attf-channel_id="#{channel.id}" t-attf-category_id="#{category.id}">+</a> -->
+                                                <a  class="mr-2 oe_slide_js_upload"
+                                                    role="button"
+                                                    aria-label="Upload Presentation"
+                                                    href="#"
+                                                    style="font-size: 1.5rem;text-decoration: none;"
+                                                    t-att-data-channel-id="channel.id"
+                                                    t-att-data-category-id="category.id"
+                                                    t-att-data-can-upload="channel.can_upload"
+                                                    t-att-data-can-publish="channel.can_publish">+</a>
+                                                <t t-set="i" t-value="i+1"/>
+                                            </div>
+                                            <ul t-attf-category_id="#{category.id}" >
+                                                <t t-foreach="category.slide_ids" t-as="slide">
+                                                    <li t-att-index="j" t-attf-slide_id="#{slide.id}" t-attf-category_id="#{category.id}" t-attf-class="#{'content-slide slide-draggable d-flex justify-content-between align-items-center p-2' if channel.user_id == user else 'content-slide d-flex justify-content-between align-items-center p-2'}">
+                                                        <div class="content-slide-infos ml-2">
+                                                            <i t-if="channel.user_id == user" class="fa fa-arrows mr-2 text-muted"></i>
+                                                            <i t-if="slide.slide_type == 'document'" class="fa fa-file-pdf-o mr-2 text-muted"></i>
+                                                            <i t-if="slide.slide_type == 'infographic'" class="fa fa-file-picture-o mr-2 text-muted"></i>
+                                                            <i t-if="slide.slide_type == 'video'" class="fa fa-play-circle mr-2 text-muted"></i>
+                                                            <i t-if="slide.slide_type == 'link'" class="fa fa-file-code-o mr-2 text-muted"></i>
+                                                            <i t-if="slide.slide_type == 'webpage'" class="fa fa-file-text mr-2 text-muted"></i>
+                                                            <i t-if="slide.slide_type == 'quiz'" class="fa fa-question-circle mr-2 text-muted"></i>
+                                                            <i t-if="slide.slide_type == 'certification'" class="fa fa-trophy mr-2 text-muted"></i>
+                                                            <a class="link-to-slide" t-attf-href="/slides/slide/#{slug(slide)}"><span t-field="slide.name"/></a>
+                                                        </div>
+                                                        <div class="content-slide-controls mr-2">
+                                                            <i t-if="not slide.id in user_progress or not user_progress[slide.id].completed" class="check-done fa fa-check-circle text-muted mr-1"></i>
+                                                            <i t-if="slide.id in user_progress and user_progress[slide.id].completed" class="check-done text-primary fa fa-check-circle mr-1"></i>
+                                                            <a t-if="channel.user_id == user and not slide.slide_type == 'webpage'" t-attf-href="/web#id=#{slide.id}&amp;action=#{slide_action}&amp;model=slide.slide&amp;view_type=form"><i class="fa fa-pencil text-muted mr-1"></i></a>
+                                                            <a t-if="channel.user_id == user and slide.slide_type == 'webpage'" t-attf-href="/slides/slide/#{slug(slide)}?enable_editor=1"><i class="fa fa-pencil text-muted mr-1"></i></a>
+                                                            <i t-if="channel.user_id == user" t-attf-slide_id="#{slide.id}" class="fa fa-trash text-muted oe_slide_js_delete_slide"></i>
+                                                        </div>
+                                                    </li>
+                                                    <t t-set="j" t-value="j+1"/>
+                                                </t>
+                                            </ul>
+                                        </li>
+                                    </t>
+                                </ul>
+                                <div t-if="channel.user_id == user" class="content-actions">
+                                    <a  class="mr-2 oe_slide_js_upload"
+                                        role="button"
+                                        aria-label="Upload Presentation"
+                                        href="#"
+                                        t-att-data-channel-id="channel.id"
+                                        t-att-data-can-upload="channel.can_upload"
+                                        t-att-data-can-publish="channel.can_publish">Add Content</a>
+                                    <a class="oe_slide_js_add_section" t-attf-channel_id="#{channel.id}" href="#">Add Section</a>
+                                </div>
+                            </div>
+                        </div>
                         <!-- Channel content, aka slides (lessons in documentation mode) -->
-                        <div class="col-8 mt24 ml32 o_wslides_channel_content_promoted">
+                        <div t-if="channel.channel_type == 'documentation'" class="col-8 mt24 ml32 o_wslides_channel_content_promoted">
                             <div class="row mt16 align-items-center">
                                 <div class="col">
                                     <h3><i class="fa fa-plus-square"/> Featured lesson</h3>
@@ -284,7 +350,7 @@
                             </div>
                         </div>
                         <!-- Channel content, aka slides (lessons in documentation mode) -->
-                        <div class="col-12">
+                        <div t-if="channel.channel_type == 'documentation'" class="col-12">
                             <div class="tab-content mt16" id="slideChannelContent">
                                 <div class="tab-pane active" role="tabpanel" aria-labelledby="profile-tab" id="slideChannelContentAbout">
                                     <t t-foreach="category_data" t-as="category">
@@ -363,14 +429,14 @@
                             <i class="fa fa-thumbs-down fa-1x" role="img" aria-label="Dislikes" title="Dislikes"></i>
                             <span t-esc="slide.dislikes"/>
                         </span>
-                    </div>    
+                    </div>
                     <small class="text-muted">
                         <t t-call="website_slides.slides_misc_float_time">
                             <t t-set="value" t-value="slide.completion_time"/>
                         </t>
 <!--                         <t t-esc="slide.total_views"/> Views
                         <timeago class="timeago" t-att-datetime="slide.create_date"></timeago> -->
-                    </small>                
+                    </small>
                 </div>
             </div>
         </div>
@@ -386,14 +452,100 @@
 <template id="slide_detail_view" name="Slide Detailed View">
     <t t-call="website.layout">
         <t t-set="main_object" t-value="slide"/>
-        <div class="container mt16">
+            <t t-call="website_slides.course_nav">
+                <t t-set="channel" t-value="slide.channel_id"/>
+            </t>
+            <div class="slide-header">
+                <div class="slide-header-container">
+                    <div class="slide-header-box">
+                        <a t-attf-href="/slides/#{slug(slide.channel_id)}" t-field="slide.channel_id.name"/>
+                        <div t-if="slide.channel_id.channel_type == 'training'" class="d-flex align-items-end">
+                            <div class="course-progress-bar">
+                                <div class="progress-gauge m-0 oe_slide_js_progress_bar" t-attf-channel_completion="#{slide.channel_id.completion}"/>
+                            </div>
+                            <i class="fa fa-trophy ml-2 mb-0 p-0" style="font-size:1.8rem; color: #cdcdcd;"></i>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div t-if="slide.channel_id.channel_type == 'training'" class="sidebar-list oe_js_side_bar_list slide-content-list">
+                <ul class="slide-list">
+                    <li>
+                        <div class="slide-content-list-header">
+                            Course content
+                        </div>
+                    </li>
+                    <t t-set="i" t-value="0"/>
+                    <t t-foreach="slide.channel_id.category_ids" t-as="category">
+                        <a data-toggle="collapse" t-attf-href="#collapse-#{category.id}" role="button" aria-expanded="false" t-attf-aria-controls="collapse-#{category.id}">
+                            <li class="slide-content-list-section">
+                                <span t-field="category.name"/>
+                            </li>
+                        </a>
+                        <ul class="collapse p-0 m-0" t-attf-id="collapse-#{category.id}" >
+                            <t t-foreach="category.slide_ids" t-as="course_slide">
+                                <li class="slide-content-list-slide">
+                                    <a t-attf-href="/slides/slide/#{slug(course_slide)}" t-att-index="i" t-att-slide_id="course_slide.id">
+                                        <div  t-attf-index="#{i}" t-attf-slide_id="#{course_slide.id}"  t-attf-class="#{'active' if slide.id == course_slide.id else ''} d-flex justify-content-between">
+                                            <div>
+                                                <i t-if="course_slide.slide_type == 'presentation'" class="fa fa-file-pdf-o mr-2 text-muted"></i>
+                                                <i t-if="course_slide.slide_type == 'infographic'" class="fa fa-file-picture-o mr-2 text-muted"></i>
+                                                <i t-if="course_slide.slide_type == 'video'" class="fa fa-play-circle mr-2 text-muted"></i>
+                                                <i t-if="course_slide.slide_type == 'link'" class="fa fa-file-code-o mr-2 text-muted"></i>
+                                                <i t-if="course_slide.slide_type == 'webpage'" class="fa fa-file-text mr-2 text-muted"></i>
+                                                <i t-if="course_slide.slide_type == 'quiz'" class="fa fa-question-circle mr-2 text-muted"></i>
+                                                <t t-esc="course_slide.name"/>
+                                            </div>
+                                            <div class="content-slide-controls mr-2">
+                                                <i t-attf-id="check-#{course_slide.id}" t-if="course_slide.id in user_progress and not user_progress[course_slide.id].completed" class="check-done fa fa-check-circle text-muted mr-1"></i>
+                                                <i t-attf-id="check-#{course_slide.id}" t-if="course_slide.id in user_progress and user_progress[course_slide.id].completed" class="check-done text-primary fa fa-check-circle mr-1"></i>
+                                            </div>
+                                        </div>
+                                    </a>
+                                    <ul t-if="course_slide.link_ids" class="list-group slide-resources">
+                                        <t t-foreach="course_slide.link_ids" t-as="resource">
+                                            <a t-attf-href="#{resource.link}" target="new">
+                                                <li><div class="slide-resource"><i class="fa fa-link"></i><span t-field="resource.link"/></div></li>
+                                            </a>
+                                        </t>
+                                    </ul>
+                                </li>
+                                <t t-set="i" t-value="i+1"/>
+                            </t>
+                        </ul>
+                    </t>
+                </ul>
+            </div>
+            <div class="slide-header-container d-flex justify-content-between mt-4 mb-3">
+                <div class="slide-title">
+                    <h1 t-field="slide.name"/>
+                    <span t-if="slide.question_ids" t-attf-class="slide-points ml-2 #{'quiz-points-won' if slide.id in user_progress and user_progress[slide.id].completed else ''}">
+                        <span t-if="slide.id in user_progress and user_progress[slide.id].quiz_attempts_count == 0" id="quiz-points" t-esc="slide.quiz_first_attempt_reward"/>
+                        <span t-if="slide.id in user_progress and user_progress[slide.id].quiz_attempts_count == 1" id="quiz-points" t-esc="slide.quiz_second_attempt_reward"/>
+                        <span t-if="slide.id in user_progress and user_progress[slide.id].quiz_attempts_count == 2" id="quiz-points" t-esc="slide.quiz_third_attempt_reward"/>
+                        <span t-if="slide.id in user_progress and user_progress[slide.id].quiz_attempts_count > 2" id="quiz-points" t-esc="slide.quiz_fourth_attempt_reward"/>
+                        points
+                    </span>
+                </div>
+                <div class="course-nav-links">
+                    <t t-if="previous_slide">
+                        <a class="slide-button" t-attf-href="/slides/slide/#{previous_slide}">Prev</a>
+                    </t>
+                    <a t-if="slide.slide_type in ('webpage', 'video', 'document', 'iconographic') and not slide.question_ids and (slide.id in user_progress and  not user_progress[slide.id].completed)" t-attf-href="/slide/completed/#{slide.id}?next_slide=#{next_slide}&amp;course=#{slug(slide.channel_id)}" class="slide-button-done">Set Done</a>
+                    <t t-if="next_slide">
+                        <a class="slide-button" t-attf-href="/slides/slide/#{next_slide}">Next</a>
+                    </t>
+                    <a t-if="slide.channel_id.channel_type == 'training'" t-attf-href="/slides/slide/#{slug(slide)}?fullscreen=1" class="slide-button-fullscreen ml-2"><i class="fa fa-desktop mr-2"></i>fullscreen</a>
+                </div>
+            </div>
+        <div class="slide-header-container mt16">
             <div class="row">
-                <div class="col-xl-8 col-lg-8 col-md-12 col-12">
-                    <div class="o_w_slides_slide_detail_container">
+                <div style="width:100%;">
+                    <div class="o_w_slides_slide_detail_container" style="width: 100%;">
                             <t t-if="slide.datas and slide.slide_type == 'infographic'">
                                 <img t-attf-src="/web/image/slide.slide/#{slide.id}/datas" class="img-fluid" style="width:100%" alt="Slide image"/>
                             </t>
-                        <div t-if="slide.slide_type in ('presentation', 'document')" class="embed-responsive embed-responsive-4by3 embed-responsive-item mb8">
+                        <div style="height: 600px;" t-if="slide.slide_type in ('presentation', 'document')" class="embed-responsive embed-responsive-4by3 embed-responsive-item mb8">
                             <t t-raw="slide.embed_code"/>
                         </div>
                         <div t-if="slide.slide_type == 'video' and slide.document_id" class="embed-responsive embed-responsive-16by9 embed-responsive-item mb8">
@@ -402,8 +554,50 @@
                         <div t-if="slide.slide_type == 'webpage'" class="border border-light rounded">
                             <div t-field="slide.html_content"/>
                         </div>
+                        <div t-if="slide.question_ids">
+                            <div class=".o_wslides_fullscreen_quiz o_w_slides_quiz_no_fullscreen mt-2"
+                                t-attf-slide_id="#{slide.id}"
+                                t-attf-slide_done="#{slide.id in user_progress and user_progress[slide.id].completed}"
+                                t-attf-nb_attempts="#{user_progress[slide.id].quiz_attempts_count if slide.id in user_progress else ''}"
+                                t-attf-first_reward="#{slide.quiz_first_attempt_reward}"
+                                t-attf-second_reward="#{slide.quiz_second_attempt_reward}"
+                                t-attf-third_reward="#{slide.quiz_third_attempt_reward}"
+                                t-attf-fourth_reward="#{slide.quiz_fourth_attempt_reward}"
+                                t-if="slide.question_ids">
+                            <div>
+                                <t t-set="i" t-value="1"/>
+                                <t t-foreach="slide.question_ids" t-as="question">
+                                    <t t-set="j" t-value="0"/>
+                                    <div class="o_wslides_quiz_question" t-attf-id="#{question.id}" t-attf-title="#{question.question}">
+                                        <div>
+                                            <div class="o_wslides_quiz_question_title">
+                                                <span class="o_wslides_quiz_question_title_number"><span t-esc="i"/>. </span>
+                                                <span class="o_wslides_quiz_question_title_text"  t-esc="question.question"/>
+                                            </div>
+                                            <ul class="o_wslides_quiz_question_answers">
+                                                <t t-foreach="question.answer_ids" t-as="answer">
+                                                    <li t-attf-id="answer#{answer.id}" t-att-question_id="question.id" t-attf-text_value="#{answer.text_value}" t-attf-class="#{'o_wslides_quiz_answer o_wslides_quiz_good_answer' if slide.id in user_progress and user_progress[slide.id].completed and answer.is_correct else 'o_wslides_quiz_answer o_wslides_quiz_ignored_answer' if slide.id in user_progress and user_progress[slide.id].completed else 'o_wslides_quiz_answer'}">
+                                                        <label class="o_wslides_quiz_radio_box">
+                                                            <input t-att-answer_id="answer.id" type="radio" t-att-name="question.id" t-att-question_id="question.id" t-att-value="answer.id" t-att-checked="'checked' if slide.id in user_progress and user_progress[slide.id].completed and answer.is_correct else False" t-att-disabled="slide.id in user_progress and user_progress[slide.id].completed"/>
+                                                            <span t-if="not slide.id in user_progress or not (user_progress[slide.id].completed and answer.is_correct)"/>
+                                                            <i t-if="slide.id in user_progress and user_progress[slide.id].completed and answer.is_correct" class="fa fa-check-circle"></i>
+                                                        </label>
+                                                            <span t-esc="answer.text_value"/>
+                                                    </li>
+                                                    <t t-set="j" t-value="j+1"/>
+                                                </t>
+                                            </ul>
+                                        </div>
+                                    </div>
+                                    <t t-set="i" t-value="i+1"/>
+                                </t>
+                                <button t-if="not slide.id in user_progress or not user_progress[slide.id].completed" class="btn btn-primary submit-quiz" >Check your answers</button>
+                                <a t-if="next_slide" t-attf-style="#{'display: none' if not slide.id in user_progress or not user_progress[slide.id].completed else ''}" class="btn btn-primary next-slide" t-attf-href="/slides/slide/#{next_slide}">Continue</a>
+                            </div>
+
+                        </div>
+                        </div>
                         <div class="row mt-3">
-                            <h4 t-field="slide.name" class="col-lg-6"/>
                             <div class="col-lg-6">
                                 <div clas="row">
                                     <div class="col-lg-8" t-if="slide.tag_ids">
@@ -454,6 +648,21 @@
                                         <span class="sr-only"><t t-esc="slide.likes"/> Likes</span>
                                     </div>
                                 </div>
+
+                                <div class="mt8">
+                                    <t t-call="website_rating.rating_stars_static_popup_composer">
+                                        <t t-set="rating_avg" t-value="rating_avg"/>
+                                        <t t-set="rating_total" t-value="rating_count"/>
+                                        <t t-set="object" t-value="slide"/>
+                                        <t t-set="hash" t-value="message_post_hash"/>
+                                        <t t-set="pid" t-value="message_post_pid"/>
+                                        <t t-set="default_message_id" t-value="last_message_id"/>
+                                        <t t-set="default_message" t-value="last_message"/>
+                                        <t t-set="default_rating_value" t-value="last_rating_value"/>
+                                        <t t-set="force_submit_url" t-value="'/slides/mail/update_comment' if last_message_id else False"/>
+                                    </t>
+                                </div>
+
                                 <!-- LikeButton widget -->
                                 <div t-if="slide.channel_id.channel_type == 'documentation' and slide.channel_id.allow_comment" class="text-muted mt4">
                                     <div class="float-right mb16 text-right o_wslides_like">
@@ -494,6 +703,11 @@
                                         <i class="fa fa-comments-o"></i> Comments
                                     </a>
                                 </li>
+                                <li t-if="not slide.channel_id.allow_comment" class="nav-item">
+                                    <a href="#discuss" aria-controls="discuss" t-attf-class="nav-link#{comments and ' active' or ''}" role="tab" data-toggle="tab">
+                                        <i class="fa fa-star"></i> Ratings
+                                    </a>
+                                </li>
                                 <li class="nav-item">
                                     <a href="#transcript" aria-controls="transcript" class="nav-link" role="tab" data-toggle="tab">
                                         <i class="fa fa-align-justify"></i> Transcript
@@ -532,7 +746,7 @@
                                         The social sharing module will be unlocked when a moderator will allow your publication.
                                     </h4>
                                 </div>
-                                <div t-if="slide.channel_id.allow_comment" role="tabpanel" t-att-class="comments and 'tab-pane fade in show active' or 'tab-pane fade'" id="discuss">
+                                <div role="tabpanel" t-att-class="comments and 'tab-pane fade in show active' or 'tab-pane fade'" id="discuss">
                                     <t t-call="portal.message_thread">
                                         <t t-set="object" t-value="slide"/>
                                         <t t-set="hash" t-value="message_post_hash"/>
@@ -638,7 +852,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="col-xl-4 col-lg-4 col-md-12 col-12">
+                <div t-if="slide.channel_id.channel_type == 'documentation'" class="col-xl-4 col-lg-4 col-md-12 col-12">
                     <ul class="nav nav-tabs" role="tablist">
                         <li class="nav-item"><a aria-controls="related" href="#related" class="nav-link active" data-toggle="tab">Related</a></li>
                         <li class="nav-item"><a aria-controls="most_viewed" href="#most_viewed" class="nav-link" data-toggle="tab">Most Viewed</a></li>
@@ -651,7 +865,7 @@
                                     <t t-if="not related_slides_list">
                                         No presentation available.
                                     </t>
-                                    <t t-foreach="related_slides_list" t-as="slide">
+                                    <t t-else="" t-foreach="related_slides_list" t-as="related_slide">
                                         <t t-call="website_slides.related_slides"/>
                                     </t>
                                 </ul>
@@ -664,7 +878,7 @@
                                     <t t-if="not list(most_viewed_slides_list)">
                                         No presentation available.
                                     </t>
-                                    <t t-foreach="most_viewed_slides_list" t-as="slide">
+                                    <t t-else="" t-foreach="most_viewed_slides_list" t-as="related_slide">
                                         <t t-call="website_slides.related_slides"/>
                                     </t>
                                 </ul>
@@ -677,16 +891,114 @@
     </t>
 </template>
 
+<!-- Slide template for the fullscreen mode -->
+<template id="slide_fullscreen" name="Fullscreen">
+    <t t-call="website.layout">
+        <div class="o_wslides">
+            <div class="o_wslides_slide_fullscreen_header">
+                <div>
+                    <a id="fullscreen_sidebar_button" href="#" class="active o_wslides_fullscreen_toggle_sidebar"><i class="fa fa-bars"></i>Lessons</a>
+                    <a class="o_wslides_small_screen" t-attf-href="/slides/slide/#{slug(slide)}" target="new"><i class="fa fa-pencil"></i>write a review</a>
+                    <div class="o_wslides_fullscreen_slide_title"/>
+                </div>
+                <div>
+                    <a t-attf-href="/slides/">back to courses</a>
+                </div>
+            </div>
+            <div class="o_wslides_fullscreen_container">
+                <div class="oe_js_side_bar_list o_wslides_fullscreen_sidebar">
+                    <ul>
+                        <li>
+                            <div class="o_wslides_fullscreen_sidebar_header">
+                                <a t-attf-href="/slides/#{slug(slide.channel_id)}">
+                                    <span t-field="slide.channel_id.name"/>
+                                </a>
+                                <div class="o_wslides_slide_fullscreen_progress_box">
+                                    <div class="o_wslides_fullscreen_sidebar_progressbar">
+                                        <div class="o_wslides_fullscreen_sidebar_progress_gauge oe_slide_js_progress_bar" t-attf-channel_completion="#{slide.channel_id.completion}"/>
+                                    </div>
+                                    <span><span class="o_wslides_progress_percentage" t-esc="slide.channel_id.completion"/>%</span>
+                                </div>
+                            </div>
+                        </li>
+                        <t t-set="i" t-value="0"/>
+                        <t t-foreach="slide.channel_id.category_ids" t-as="category">
+                            <div class="o_wslides_fullscreen_sidebar_section">
+                                <a data-toggle="collapse" t-attf-href="#collapse-#{category.id}" role="button" aria-expanded="true" t-attf-aria-controls="collapse-#{category.id}">
+                                    <li class="o_wslides_fullscreen_sidebar_section_tab">
+                                        <span t-field="category.name"/>
+                                    </li>
+                                </a>
+                                <ul class="o_wslides_fullscreen_sidebar_section_slides collapsed p-0 m-0" t-attf-id="collapse-#{category.id}" >
+                                    <t t-foreach="category.slide_ids" t-as="course_slide">
+                                        <li t-att-index="i" t-att-slide_id="course_slide.id" t-attf-class="#{'active' if slide.id == course_slide.id else ''}">
+                                            <span class="o_wslides_fullscreen_slide_tab_line">
+                                                <span class="o_wslides_top_line"></span>
+                                                <i t-attf-id="check-#{course_slide.id}" t-if="not course_slide.id in user_progress or not user_progress[course_slide.id].completed" class="check-done fa fa-circle-thin"></i>
+                                                <i t-attf-id="check-#{course_slide.id}" t-if="course_slide.id in user_progress and user_progress[course_slide.id].completed" class="check-done o_wslides_slide_completed fa fa-check-circle"></i>
+                                                <span class="o_wslides_bottom_line"></span>
+                                            </span>
+                                            <a t-att-index="i" t-att-slide_id="course_slide.id">
+                                                <div t-attf-index="#{i}"
+                                                    t-attf-slide_slug="#{slug(course_slide)}"
+                                                    t-attf-done="#{course_slide.id in user_progress and user_progress[course_slide.id].completed}"
+                                                    t-attf-slide_id="#{course_slide.id}"
+                                                    t-attf-slide_name="#{course_slide.name}"
+                                                    t-attf-quiz="#{True if course_slide.question_ids else False}"
+                                                    t-attf-slide_type="#{course_slide.slide_type}"
+                                                    t-attf-slide_embed_code="#{course_slide.embed_code}"
+                                                    t-attf-class="o_wslides_fullscreen_sidebar_slide_tab #{'active' if slide.id == course_slide.id else ''} d-flex justify-content-between">
+                                                    <div>
+                                                        <i t-if="course_slide.slide_type == 'document'" class="fa fa-file-pdf-o mr-2 text-muted"></i>
+                                                        <i t-if="course_slide.slide_type == 'infographic'" class="fa fa-file-picture-o mr-2 text-muted"></i>
+                                                        <i t-if="course_slide.slide_type == 'video'" class="fa fa-play-circle mr-2 text-muted"></i>
+                                                        <i t-if="course_slide.slide_type == 'link'" class="fa fa-file-code-o mr-2 text-muted"></i>
+                                                        <i t-if="course_slide.slide_type == 'webpage'" class="fa fa-file-text mr-2 text-muted"></i>
+                                                        <i t-if="course_slide.slide_type == 'quiz'" class="fa fa-question-circle mr-2 text-muted"></i>
+                                                        <i t-if="course_slide.slide_type == 'certification'" class="fa fa-trophy mr-2 text-muted"></i>
+                                                        <t t-esc="course_slide.name"/>
+                                                    </div>
+                                                </div>
+                                            </a>
+                                        </li>
+                                        <t t-if="course_slide.link_ids" t-foreach="course_slide.link_ids" t-as="link">
+                                            <li>
+                                                <span class="o_wslides_fullscreen_slide_tab_line">
+                                                    <span class="o_wslides_full_line"/>
+                                                </span>
+                                                <a class="o_wslides_slide_link" t-att-href="link.link" target="new"><i class="fa fa-link"></i><span t-esc="link.name"/></a>
+                                            </li>
+                                        </t>
+                                        <li t-att-index="i" t-if="course_slide.question_ids and not course_slide.slide_type =='quiz'">
+                                            <span class="o_wslides_fullscreen_slide_tab_line">
+                                                <span class="o_wslides_full_line"/>
+                                            </span>
+                                            <span class="o_wslides_slide_quiz" t-att-index="i"><i class="fa fa-flag-checkered"></i>Quiz: <span t-esc="course_slide.name"/></span>
+                                        </li>
+                                        <t t-set="i" t-value="i+1"/>
+                                    </t>
+                                </ul>
+                            </div>
+                        </t>
+                    </ul>
+                </div>
+                <div class="oe_js_course_slide" t-attf-user_id="#{user.id}" t-attf-course_name="#{slide.channel_id.name}" t-attf-course_id="#{slide.channel_id.id}" t-attf-course_slug="#{slug(slide.channel_id)}" t-attf-slide_id="#{slide.id}"/>
+                <div class="o_wslides_fullscreen_player"/>
+            </div>
+        </div>
+    </t>
+</template>
+
 <!-- Slide sub-template: display an item in a list of related slides (Related, Most Viewed, ...) -->
 <template id="related_slides" name="Related Slide">
     <li class="media mt-3">
-        <a t-attf-href="/slides/slide/#{slug(slide)}" class="mr-3">
-            <img class="oe_slides_apart_small" t-attf-src="/web/image/slide.slide/#{slide.id}/image_small" alt="slide.name"/>
+        <a t-attf-href="/slides/slide/#{slug(related_slide)}" class="mr-3">
+            <img class="oe_slides_apart_small" t-attf-src="/web/image/slide.slide/#{related_slide.id}/image_small" alt="related_slide.name"/>
         </a>
         <div class="media-body">
-            <a t-attf-href="/slides/slide/#{slug(slide)}"><h6 t-esc="slide.name" class="mb-1"/></a>
+            <a t-attf-href="/slides/slide/#{slug(related_slide)}"><h6 t-esc="related_slide.name" class="mb-1"/></a>
             <small class="text-muted">
-                <t t-esc="slide.total_views"/> Views . <timeago class="timeago" t-att-datetime="slide.create_date"></timeago>
+                <t t-esc="related_slide.total_views"/> Views . <timeago class="timeago" t-att-datetime="related_slide.create_date"></timeago>
             </small>
         </div>
     </li>