From 8993e9cfd2e2c4e527078274b82a442d7ffe9071 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thibault=20Delavall=C3=A9e?= <tde@odoo.com>
Date: Fri, 22 Feb 2019 11:27:20 +0000
Subject: [PATCH] [REF] website_slides: split course sidebar and move
 fullscreen templates

Moves

 * sidebar of course main template in its own template;
 * fullscreen templates in their own file;

It will ease future modification of this page layout.

Commit linked to task ID 1942852 and PR #31394.
---
 .../views/website_slides_templates.xml        |   2 +-
 addons/website_slides/__manifest__.py         |   1 +
 .../views/website_slides_templates_course.xml | 222 +++++++++---------
 .../views/website_slides_templates_lesson.xml | 112 ---------
 ...ite_slides_templates_lesson_fullscreen.xml | 116 +++++++++
 5 files changed, 231 insertions(+), 222 deletions(-)
 create mode 100644 addons/website_slides/views/website_slides_templates_lesson_fullscreen.xml

diff --git a/addons/website_sale_slides/views/website_slides_templates.xml b/addons/website_sale_slides/views/website_slides_templates.xml
index 9cd124da74e..ad980a29a7a 100644
--- a/addons/website_sale_slides/views/website_slides_templates.xml
+++ b/addons/website_sale_slides/views/website_slides_templates.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" ?>
 <odoo><data>
 
-<template id='course_main' inherit_id="website_slides.course_main">
+<template id='course_sidebar' inherit_id="website_slides.course_sidebar">
     <!-- Channel main template: override button to join channel -->
     <xpath expr="//div[hasclass('o_wslides_js_course_join')]" position="inside">
         <t t-if="not channel.is_member and channel.enroll == 'payment'">
diff --git a/addons/website_slides/__manifest__.py b/addons/website_slides/__manifest__.py
index 2e051152cb5..73e09b11484 100644
--- a/addons/website_slides/__manifest__.py
+++ b/addons/website_slides/__manifest__.py
@@ -35,6 +35,7 @@ Featuring
         'views/website_slides_templates_homepage.xml',
         'views/website_slides_templates_course.xml',
         'views/website_slides_templates_lesson.xml',
+        'views/website_slides_templates_lesson_fullscreen.xml',
         'views/website_slides_templates_lesson_embed.xml',
         'views/website_slides_templates_profile.xml',
         'views/website_slides_templates_utils.xml',
diff --git a/addons/website_slides/views/website_slides_templates_course.xml b/addons/website_slides/views/website_slides_templates_course.xml
index 21217d36319..6045968bf11 100644
--- a/addons/website_slides/views/website_slides_templates_course.xml
+++ b/addons/website_slides/views/website_slides_templates_course.xml
@@ -128,114 +128,9 @@
             <div class="row o_wslides_course_main">
                 <div class="col-lg-12 o_wslides_container">
                     <div class="row o_wslides_course_content_main">
-                        <!-- Channel presentation, aka general information + CTAs -->
-                        <div class="col-md-4 col-xs-12 o_wslides_course_content_aside">
-                            <div class="bg-white">
-                                <div class="row justify-content-center o_wslides_js_course_join">
-                                    <a t-if="not channel.is_member and channel.enroll == 'public'" role="button"
-                                        class="col-10 mt8 btn btn-primary o_wslides_js_course_join_link"
-                                        title="Start Course" aria-label="Start Course Channel"
-                                        t-att-href="'#'"
-                                        t-att-data-channel-id="channel.id">
-                                        <span class="cta-title text_small_caps">
-                                            <t t-if="channel.channel_type == 'documentation'">Start Course</t>
-                                            <t t-else="">Join Course</t>
-                                        </span>
-                                    </a>
-                                    <t t-if="not channel.is_member and channel.enroll == 'invite'">
-                                        <a role="button" class="col-10 mt8 btn btn-light" t-att-href="'#'">
-                                            <span class="cta-title text_small_caps">Private Course</span>
-                                        </a>
-                                        <div t-if="channel.enroll_msg" t-field="channel.enroll_msg"/>
-                                        <span t-if="not channel.enroll_msg">Contact website administrator.</span>
-                                    </t>
-                                    <span t-if="channel.is_member" class="col-10 mt8 btn btn-primary">
-                                        <i class="fa fa-chevron-right"></i>
-                                        <span class="cta-title text_small_caps">Already member</span>
-                                    </span>
-                                </div>
-                                <div class="row mt8">
-                                    <span class="col-5">Last Update</span>
-                                    <span class="col"><t t-esc="channel.slide_last_update" t-options="{'widget': 'date'}"/></span>
-                                </div>
-                                <div class="row mt8">
-                                    <span class="col-5">Members</span>
-                                    <span class="col" t-esc="channel.members_count"/>
-                                </div>
-                                <t t-if="channel.channel_type == 'documentation'">
-                                    <div class="row mt8"><div class="col"><hr/></div></div>
-                                    <t t-set="slide_type_keys" t-value="slide_types.keys()"/>
-                                    <t t-foreach="slide_type_keys" t-as="slide_type_key">
-                                        <div class="row mt8 align-items-center">
-                                            <span class="col-5">
-                                                <t t-if="search_category">
-                                                    <a t-att-href="'/slides/%s/category/%s?%s' % (slug(channel), slug(search_category), keep_query('debug', slide_type=slide_type_key))"
-                                                        t-att-class="'%s' % ('active' if search_slide_type == slide_type_key else '')">
-                                                        <t t-esc="slide_types[slide_type_key]"/>
-                                                    </a>
-                                                </t>
-                                                <t t-else="">
-                                                    <a t-att-href="'/slides/%s?%s' % (slug(channel), keep_query('debug', slide_type=slide_type_key))"
-                                                        t-att-class="'%s' % ('active' if search_slide_type == slide_type_key else '')">
-                                                        <t t-esc="slide_types[slide_type_key]"/>
-                                                    </a>
-                                                </t>
-                                            </span>
-                                            <span class="col">
-                                                <t t-if="search_category">
-                                                    <span class="badge badge-pill badge-info" t-esc="search_category['nbr_%s' % slide_type_key]"/>
-                                                </t>
-                                                <t t-else="">
-                                                    <span class="badge badge-pill badge-info" t-esc="channel['nbr_%s' % slide_type_key]"/>
-                                                </t>
-                                            </span>
-                                        </div>
-                                    </t>
-                                </t>
-                                <div class="row mt8"><div class="col"><hr/></div></div>
-                                <div class="row justify-content-center mt8">
-                                    <button role="button" class="btn btn-primary col-10" title="Share Channel"
-                                        aria-label="Share Channel"
-                                        data-toggle="modal" data-target="#slideChannelShareModal">
-                                        <i class="fa fa-share-square"></i> Share
-                                    </button>
-                                    <div class="modal fade" id="slideChannelShareModal" tabindex="-1" role="dialog" aria-labelledby="slideChannelShareModalLabel" aria-hidden="true">
-                                        <div class="modal-dialog" role="document">
-                                            <div class="modal-content">
-                                                <div class="modal-header">
-                                                    <h5 class="modal-title" id="slideChannelShareModalLabel">
-                                                        Share
-                                                    </h5>
-                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                                                        <span>&amp;times;</span>
-                                                    </button>
-                                                </div>
-                                                <div class="modal-body">
-                                                    <h5>Share on Social Networks</h5>
-                                                    <t t-call="website_slides.slides_share">
-                                                        <t t-set="record" t-value="channel"/>
-                                                    </t>
-                                                    <h5 class="mt16">Share Link</h5>
-                                                    <input type="text" class="form-control" readonly="readonly" onclick="this.select();"
-                                                        t-att-value="channel.website_url"/>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div t-if="channel.can_upload" class="row justify-content-center mt8">
-                                    <a role="button" class="btn btn-primary oe_slide_js_upload col-10" title="Upload Presentation"
-                                        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">
-                                        <i class="fa fa-cloud-upload"></i> Upload
-                                    </a>
-                                </div>
-                            </div>
-                        </div>
+                        <t t-call="website_slides.course_sidebar"/>
                         <t t-if="channel.channel_type == 'training'" t-call="website_slides.course_slides_list"/>
-                        <t t-if="channel.channel_type == 'documentation'" t-call="website_slides.course_content_documentation"/>
+                        <t t-if="channel.channel_type == 'documentation'" t-call="website_slides.course_slides_cards"/>
                     </div>
                 </div>
             </div>
@@ -243,7 +138,116 @@
     </t>
 </template>
 
-<template id="course_slides_list" name="Content of a training channel">
+<template id="course_sidebar" name="Course Sidebar (infos, CTA)">
+    <!-- Channel presentation, aka general information + CTAs -->
+    <div class="col-md-4 col-xs-12 o_wslides_course_content_aside">
+        <div class="bg-white">
+            <div class="row justify-content-center o_wslides_js_course_join">
+                <a t-if="not channel.is_member and channel.enroll == 'public'" role="button"
+                    class="col-10 mt8 btn btn-primary o_wslides_js_course_join_link"
+                    title="Start Course" aria-label="Start Course Channel"
+                    t-att-href="'#'"
+                    t-att-data-channel-id="channel.id">
+                    <span class="cta-title text_small_caps">
+                        <t t-if="channel.channel_type == 'documentation'">Start Course</t>
+                        <t t-else="">Join Course</t>
+                    </span>
+                </a>
+                <t t-if="not channel.is_member and channel.enroll == 'invite'">
+                    <a role="button" class="col-10 mt8 btn btn-light" t-att-href="'#'">
+                        <span class="cta-title text_small_caps">Private Course</span>
+                    </a>
+                    <div t-if="channel.enroll_msg" t-field="channel.enroll_msg"/>
+                    <span t-if="not channel.enroll_msg">Contact website administrator.</span>
+                </t>
+                <span t-if="channel.is_member" class="col-10 mt8 btn btn-primary">
+                    <i class="fa fa-chevron-right"></i>
+                    <span class="cta-title text_small_caps">Already member</span>
+                </span>
+            </div>
+            <div class="row mt8">
+                <span class="col-5">Last Update</span>
+                <span class="col"><t t-esc="channel.slide_last_update" t-options="{'widget': 'date'}"/></span>
+            </div>
+            <div class="row mt8">
+                <span class="col-5">Members</span>
+                <span class="col" t-esc="channel.members_count"/>
+            </div>
+            <t t-if="channel.channel_type == 'documentation'">
+                <div class="row mt8"><div class="col"><hr/></div></div>
+                <t t-set="slide_type_keys" t-value="slide_types.keys()"/>
+                <t t-foreach="slide_type_keys" t-as="slide_type_key">
+                    <div class="row mt8 align-items-center">
+                        <span class="col-5">
+                            <t t-if="search_category">
+                                <a t-att-href="'/slides/%s/category/%s?%s' % (slug(channel), slug(search_category), keep_query('debug', slide_type=slide_type_key))"
+                                    t-att-class="'%s' % ('active' if search_slide_type == slide_type_key else '')">
+                                    <t t-esc="slide_types[slide_type_key]"/>
+                                </a>
+                            </t>
+                            <t t-else="">
+                                <a t-att-href="'/slides/%s?%s' % (slug(channel), keep_query('debug', slide_type=slide_type_key))"
+                                    t-att-class="'%s' % ('active' if search_slide_type == slide_type_key else '')">
+                                    <t t-esc="slide_types[slide_type_key]"/>
+                                </a>
+                            </t>
+                        </span>
+                        <span class="col">
+                            <t t-if="search_category">
+                                <span class="badge badge-pill badge-info" t-esc="search_category['nbr_%s' % slide_type_key]"/>
+                            </t>
+                            <t t-else="">
+                                <span class="badge badge-pill badge-info" t-esc="channel['nbr_%s' % slide_type_key]"/>
+                            </t>
+                        </span>
+                    </div>
+                </t>
+            </t>
+            <div class="row mt8"><div class="col"><hr/></div></div>
+            <div class="row justify-content-center mt8">
+                <button role="button" class="btn btn-primary col-10" title="Share Channel"
+                    aria-label="Share Channel"
+                    data-toggle="modal" data-target="#slideChannelShareModal">
+                    <i class="fa fa-share-square"></i> Share
+                </button>
+                <div class="modal fade" id="slideChannelShareModal" tabindex="-1" role="dialog" aria-labelledby="slideChannelShareModalLabel" aria-hidden="true">
+                    <div class="modal-dialog" role="document">
+                        <div class="modal-content">
+                            <div class="modal-header">
+                                <h5 class="modal-title" id="slideChannelShareModalLabel">
+                                    Share
+                                </h5>
+                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                                    <span>&amp;times;</span>
+                                </button>
+                            </div>
+                            <div class="modal-body">
+                                <h5>Share on Social Networks</h5>
+                                <t t-call="website_slides.slides_share">
+                                    <t t-set="record" t-value="channel"/>
+                                </t>
+                                <h5 class="mt16">Share Link</h5>
+                                <input type="text" class="form-control" readonly="readonly" onclick="this.select();"
+                                    t-att-value="channel.website_url"/>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div t-if="channel.can_upload" class="row justify-content-center mt8">
+                <a role="button" class="btn btn-primary oe_slide_js_upload col-10" title="Upload Presentation"
+                    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">
+                    <i class="fa fa-cloud-upload"></i> Upload
+                </a>
+            </div>
+        </div>
+    </div>
+</template>
+
+<template id="course_slides_list" name="Training Course content: list">
     <div class="col-8 d-flex flex-column ml-4">
         <div class="o_wslides_slides_list w-100 mt8" t-att-data-channel-id="channel.id">
             <ul class="o_wslides_slides_list_container">
@@ -345,7 +349,7 @@
         t-att-data-can-publish="channel.can_publish">+</a>
 </template>
 
-<template id="course_content_documentation" name="Content of a training channel">
+<template id="course_slides_cards" name="Documentation Course content: cards / categories">
     <div t-if="not search" class="col-md-8 col-xs-12 mt16 o_wslides_channel_content_promoted">
          <div class="row align-items-center">
             <div class="col">
diff --git a/addons/website_slides/views/website_slides_templates_lesson.xml b/addons/website_slides/views/website_slides_templates_lesson.xml
index 22f5882ce40..e58935d34b2 100644
--- a/addons/website_slides/views/website_slides_templates_lesson.xml
+++ b/addons/website_slides/views/website_slides_templates_lesson.xml
@@ -457,118 +457,6 @@
     </ul>
 </template>
 
-<!-- Slide template for the fullscreen mode -->
-<template id="slide_fullscreen" name="Fullscreen">
-    <t t-call="website.layout">
-        <div class="o_wslides_fs_main"
-            t-att-data-user-id="user.id"
-            t-att-data-course-name="slide.channel_id.name"
-            t-att-data-course-id="slide.channel_id.id"
-            t-att-data-course-slug="slug(slide.channel_id)"
-            t-att-data-slide-id="slide.id">
-            <div class="o_wslides_slide_fs_header">
-                <div>
-                    <a id="fullscreen_sidebar_button" href="#" class="active o_wslides_fs_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_fs_slide_title"/>
-                </div>
-                <div>
-                    <a t-attf-href="/slides/">back to courses</a>
-                </div>
-            </div>
-            <div class="o_wslides_fs_container">
-                <div class="o_wslides_fs_sidebar">
-                    <ul>
-                        <li>
-                            <div class="o_wslides_fs_sidebar_header">
-                                <a t-attf-href="/slides/#{slug(slide.channel_id)}">
-                                    <span t-field="slide.channel_id.name"/>
-                                </a>
-                                <div class="o_wslides_slide_fs_progress_box">
-                                    <div class="o_wslides_fs_sidebar_progressbar">
-                                        <div class="o_wslides_fs_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-if="uncategorized_slides" t-call="website_slides.slide_fullscreen_sidebar_category">
-                            <t t-set="category_slide_ids" t-value="uncategorized_slides" />
-                        </t>
-                        <t t-foreach="slide.channel_id.category_ids" t-as="category">
-                            <t t-call="website_slides.slide_fullscreen_sidebar_category">
-                                <t t-set="category_slide_ids" t-value="category.slide_ids" />
-                            </t>
-                        </t>
-                    </ul>
-                </div>
-                <div class="o_wslides_fs_player"/>
-            </div>
-        </div>
-    </t>
-</template>
-
-<template id="slide_fullscreen_sidebar_category" name="Slides category template for fullscreen view side bar">
-    <div class="o_wslides_fs_sidebar_section">
-        <a data-toggle="collapse" t-att-href="('#collapse-%s') % (category.id if category else 0)" role="button" aria-expanded="true" t-att-aria-controls="('collapse-%s') % (category.id if category else 0)">
-            <li>
-                <t t-if="category">
-                    <span t-field="category.name"/>
-                </t>
-                <t t-else="">
-                    <span>Uncategorized</span>
-                </t>
-            </li>
-        </a>
-        <ul class="o_wslides_fs_sidebar_section_slides collapse show p-0 m-0" t-att-id="('collapse-%s') % (category.id if category else 0)" >
-            <t t-foreach="category_slide_ids" t-as="course_slide">
-                <!-- AWA FIXME: remove that index crap but right now fullscreen JS uses it too much -->
-                <t t-set="i" t-value="list(slide.channel_id.slide_ids).index(course_slide)"/>
-                <li t-att-index="i" t-att-data-slide-id="course_slide.id" t-attf-class="#{'active' if slide.id == course_slide.id else ''}">
-                    <span>
-                        <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-data-slide-id="course_slide.id">
-                        <div t-attf-index="#{i}"
-                            t-att-data-slug="slug(course_slide)"
-                            t-att-data-done="course_slide.id in user_progress and user_progress[course_slide.id].completed"
-                            t-att-data-id="course_slide.id"
-                            t-att-data-name="course_slide.name"
-                            t-attf-data-has_quiz="#{True if course_slide.question_ids else False}"
-                            t-att-data-slide_type="course_slide.slide_type"
-                            t-att-data-embed_code="course_slide.embed_code"
-                            t-attf-class="o_wslides_fs_sidebar_slide_tab #{'active' if slide.id == course_slide.id else ''} d-flex justify-content-between">
-                            <div>
-                                <t t-call="website_slides.slide_icon">
-                                    <t t-set="slide" t-value="course_slide" />
-                                </t>
-                                <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>
-                            <span class="o_wslides_fs_full_line"/>
-                        </span>
-                        <a class="o_wslides_fs_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>
-                        <span class="o_wslides_fs_full_line"/>
-                    </span>
-                    <span class="o_wslides_fs_slide_quiz" t-att-index="i"><i class="fa fa-flag-checkered"></i>Quiz: <span t-esc="course_slide.name"/></span>
-                </li>
-            </t>
-        </ul>
-    </div>
-</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">
diff --git a/addons/website_slides/views/website_slides_templates_lesson_fullscreen.xml b/addons/website_slides/views/website_slides_templates_lesson_fullscreen.xml
new file mode 100644
index 00000000000..8a20c4b2d5a
--- /dev/null
+++ b/addons/website_slides/views/website_slides_templates_lesson_fullscreen.xml
@@ -0,0 +1,116 @@
+<?xml version="1.0" ?>
+<odoo><data>
+
+<!-- Slide template for the fullscreen mode -->
+<template id="slide_fullscreen" name="Fullscreen">
+    <t t-call="website.layout">
+        <div class="o_wslides_fs_main"
+            t-att-data-user-id="user.id"
+            t-att-data-course-name="slide.channel_id.name"
+            t-att-data-course-id="slide.channel_id.id"
+            t-att-data-course-slug="slug(slide.channel_id)"
+            t-att-data-slide-id="slide.id">
+            <div class="o_wslides_slide_fs_header">
+                <div>
+                    <a id="fullscreen_sidebar_button" href="#" class="active o_wslides_fs_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_fs_slide_title"/>
+                </div>
+                <div>
+                    <a t-attf-href="/slides/">back to courses</a>
+                </div>
+            </div>
+            <div class="o_wslides_fs_container">
+                <div class="o_wslides_fs_sidebar">
+                    <ul>
+                        <li>
+                            <div class="o_wslides_fs_sidebar_header">
+                                <a t-attf-href="/slides/#{slug(slide.channel_id)}">
+                                    <span t-field="slide.channel_id.name"/>
+                                </a>
+                                <div class="o_wslides_slide_fs_progress_box">
+                                    <div class="o_wslides_fs_sidebar_progressbar">
+                                        <div class="o_wslides_fs_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-if="uncategorized_slides" t-call="website_slides.slide_fullscreen_sidebar_category">
+                            <t t-set="category_slide_ids" t-value="uncategorized_slides" />
+                        </t>
+                        <t t-foreach="slide.channel_id.category_ids" t-as="category">
+                            <t t-call="website_slides.slide_fullscreen_sidebar_category">
+                                <t t-set="category_slide_ids" t-value="category.slide_ids" />
+                            </t>
+                        </t>
+                    </ul>
+                </div>
+                <div class="o_wslides_fs_player"/>
+            </div>
+        </div>
+    </t>
+</template>
+
+<template id="slide_fullscreen_sidebar_category" name="Slides category template for fullscreen view side bar">
+    <div class="o_wslides_fs_sidebar_section">
+        <a data-toggle="collapse" t-att-href="('#collapse-%s') % (category.id if category else 0)" role="button" aria-expanded="true" t-att-aria-controls="('collapse-%s') % (category.id if category else 0)">
+            <li>
+                <t t-if="category">
+                    <span t-field="category.name"/>
+                </t>
+                <t t-else="">
+                    <span>Uncategorized</span>
+                </t>
+            </li>
+        </a>
+        <ul class="o_wslides_fs_sidebar_section_slides collapse show p-0 m-0" t-att-id="('collapse-%s') % (category.id if category else 0)" >
+            <t t-foreach="category_slide_ids" t-as="course_slide">
+                <!-- AWA FIXME: remove that index crap but right now fullscreen JS uses it too much -->
+                <t t-set="i" t-value="list(slide.channel_id.slide_ids).index(course_slide)"/>
+                <li t-att-index="i" t-att-data-slide-id="course_slide.id" t-attf-class="#{'active' if slide.id == course_slide.id else ''}">
+                    <span>
+                        <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-data-slide-id="course_slide.id">
+                        <div t-attf-index="#{i}"
+                            t-att-data-slug="slug(course_slide)"
+                            t-att-data-done="course_slide.id in user_progress and user_progress[course_slide.id].completed"
+                            t-att-data-id="course_slide.id"
+                            t-att-data-name="course_slide.name"
+                            t-attf-data-has_quiz="#{True if course_slide.question_ids else False}"
+                            t-att-data-slide_type="course_slide.slide_type"
+                            t-att-data-embed_code="course_slide.embed_code"
+                            t-attf-class="o_wslides_fs_sidebar_slide_tab #{'active' if slide.id == course_slide.id else ''} d-flex justify-content-between">
+                            <div>
+                                <t t-call="website_slides.slide_icon">
+                                    <t t-set="slide" t-value="course_slide" />
+                                </t>
+                                <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>
+                            <span class="o_wslides_fs_full_line"/>
+                        </span>
+                        <a class="o_wslides_fs_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>
+                        <span class="o_wslides_fs_full_line"/>
+                    </span>
+                    <span class="o_wslides_fs_slide_quiz" t-att-index="i"><i class="fa fa-flag-checkered"></i>Quiz: <span t-esc="course_slide.name"/></span>
+                </li>
+            </t>
+        </ul>
+    </div>
+</template>
+
+</data></odoo>