Files
odoo_source/addons/website_slides/views/website_slides_templates_lesson.xml
T
Nikunj Ladava 7d66dcbf54 [IMP] website_slides: improve design of share pages in elearning
PURPOSE

Globally improve user experience when sharing content from the e-learning app.
This includes new sharing options, allowing to share to multiple emails, split
the sharing template from slide and course, etc...

SPECIFICATION

- added two more options 'WhatsApp' and 'Pinterest' to share snippets.
- we converted the email type of input for 'Share by email' to text,
  so we can enter multiple emails to share and also add validation
  in the controller for this input text input.
- We improved the design of the share modal by making sure that the full URL
  for sharing link is visible and rearranged the UI fields of
  'Share' nav-tab on non-fullscreen content (if there is
  embed code, the sharing by email and embed code will still be on
  the single row).
- Improved the share modal of the channel by adding an email field in it to
  Share the channel through the mail.
- New field name 'share_channel_template_id' for channel template
  in 'slide.channel' modal and also added _send_share_email method
  in it and email template for sharing channel through the mail, and
  also added the dedicated route for sharing the channel.
- New share button is added on the top of documents in the slide (which
  previously was in the tab below the content).

task- 2627364

Part-of: odoo/odoo#78139
2022-09-02 14:17:40 +02:00

560 lines
34 KiB
XML

<?xml version="1.0" ?>
<odoo><data>
<!-- Slide: main template: detailed view -->
<template id="slide_main" name="Slide Detailed View" track="1">
<t t-set="body_classname" t-value="'o_wslides_body'"/>
<t t-call="website.layout">
<div id="wrap" class="wrap o_wslides_wrap">
<t t-call="website.record_cover">
<t t-set="_record" t-value="slide.channel_id"/>
<t t-set="use_filters" t-value="True"/>
<t t-set="use_size" t-value="True"/>
<t t-set="use_text_align" t-value="True"/>
<div class="o_wslides_lesson_header position-relative pb-0 pt-2 pt-md-5">
<t t-call="website_slides.course_nav">
<t t-set="channel" t-value="slide.channel_id"/>
</t>
<div class="container o_wslides_lesson_header_container mt-5 mt-md-3 mt-xl-4">
<div class="row align-items-md-stretch">
<div t-attf-class="col-12 col-sm-9 d-flex flex-column #{'col-lg-6 offset-lg-3' if slide.channel_id.channel_type == 'training' else ''}">
<h2 class="fw-medium w-100">
<a t-att-href="'/slides/%s' % (slug(slide.channel_id))" class="text-white text-decoration-none" t-field="slide.channel_id.name"/>
</h2>
<div t-if="slide.channel_id.channel_type == 'documentation'" class="mb-3 small">
<span class="fw-normal">Last update:</span>
<t t-esc="slide.date_published" t-options="{'widget': 'date'}"/>
</div>
<div t-else="" t-attf-class="o_wslides_channel_completion_progressbar #{'d-none' if slide.channel_id.completed else 'd-flex'} align-items-center pb-3">
<div class="progress w-50 bg-black-25" style="height: 10px;">
<div class="progress-bar rounded-start" role="progressbar"
t-att-aria-valuenow="slide.channel_id.completion" aria-valuemin="0" aria-valuemax="100"
t-attf-style="width: #{slide.channel_id.completion}%;">
</div>
</div>
<i class="fa fa-trophy m-0 ms-2 p-0 text-black-50"></i>
<small class="ms-2 text-white-50"><span class="o_wslides_progress_percentage" t-esc="slide.channel_id.completion"/> %</small>
</div>
</div>
<div t-attf-class="o_wslides_channel_completion_completed col-12 col-sm-3 #{'d-none' if not slide.channel_id.completed else ''}">
<h2>
<small><span class="badge rounded-pill text-bg-success fw-normal"><i class="fa fa-check"/> Completed</span></small>
</h2>
</div>
</div>
</div>
</div>
</t>
<div class="container o_wslides_lesson_main">
<div class="row">
<t t-set="can_access_channel" t-value="slide.channel_id.is_member or slide.channel_id.can_publish"/>
<div t-attf-class="o_wslides_lesson_aside col-lg-3 #{'order-2' if slide.channel_id.channel_type == 'documentation' else ''}">
<t t-if="slide.channel_id.channel_type == 'training'" t-call="website_slides.slide_aside_training"/>
<t t-if="slide.channel_id.channel_type == 'documentation'" t-call="website_slides.slide_aside_documentation"/>
</div>
<div t-attf-class="o_wslides_lesson_content col-lg-9 #{'order-1' if slide.channel_id.channel_type == 'documentation' else ''}">
<t t-call="website_slides.slide_content_detailed"/>
</div>
</div>
</div>
</div>
</t>
</template>
<!-- Slide: sidebar documentation mode -->
<template id="slide_aside_documentation" name="Slide: Sidebar in Documentation">
<div class="o_wslides_lesson_aside_doc position-relative bg-white pb-1 my-3 border-bottom">
<ul class="nav nav-tabs nav-fill" role="tablist">
<li class="nav-item"><a aria-controls="related" href="#related" class="nav-link rounded-0 border-top-0 border-start-0 py-2 active" data-bs-toggle="tab">Related</a></li>
<li class="nav-item"><a aria-controls="most_viewed" href="#most_viewed" class="nav-link rounded-0 border-top-0 border-end-0 py-2" data-bs-toggle="tab">Most Viewed</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" id="related" class="tab-pane active bg-100">
<ul class="list-group list-group-flush">
<t t-set="related_slides_list" t-value="list(related_slides)"/>
<t t-if="not related_slides_list">
No presentation available.
</t>
<t t-else="" t-foreach="related_slides_list" t-as="aside_slide">
<t t-call="website_slides.slide_aside_card"/>
</t>
</ul>
</div>
<div role="tabpanel" id="most_viewed" class="tab-pane bg-100">
<ul class="list-group list-group-flush">
<t t-set="most_viewed_slides_list" t-value="list(most_viewed_slides)"/>
<t t-if="not list(most_viewed_slides_list)">
No presentation available.
</t>
<t t-else="" t-foreach="most_viewed_slides_list" t-as="aside_slide">
<t t-call="website_slides.slide_aside_card"/>
</t>
</ul>
</div>
</div>
</div>
</template>
<!-- Slide sub-template: display an item in a list of related slides (Related, Most Viewed, ...) -->
<template id="slide_aside_card" name="Related Slide">
<a class="list-group-item list-group-item-action d-flex align-items-start px-2" t-att-href="'/slides/slide/%s' % (slug(aside_slide))">
<t t-set="slide_image" t-value="website.image_url(aside_slide, 'image_256') if can_access_channel or aside_slide.is_preview else slide.channel_id.website_background_image_url"/>
<div class="me-1 border o_wslides_background_image_aside_card" t-attf-style="background-image: url(#{slide_image});"/>
<div class="overflow-hidden d-flex flex-column justify-content-start">
<h6 t-esc="aside_slide.name" class="o_wslides_desc_truncate_2 mb-1" style="line-height: 1.15"/>
<small class="text-600">
<t t-esc="aside_slide.total_views"/> Views &#8226; <timeago class="timeago" t-att-datetime="aside_slide.create_date"></timeago>
</small>
</div>
</a>
</template>
<!-- Slide: sidebar training mode -->
<template id="slide_aside_training" name="Slide: Sidebar in Training">
<div class="o_wslides_lesson_aside_list position-relative bg-white border-bottom mt-4">
<div class="bg-100 text-1000 h6 my-0 text-decoration-none border-bottom d-flex align-items-center justify-content-between">
<span class="p-2">Course content</span>
<a href="#collapse_slide_aside" data-bs-toggle="collapse" class="d-lg-none p-2 text-decoration-none o_wslides_lesson_aside_collapse">
<i class="fa fa-chevron-down d-lg-none"/>
</a>
</div>
<ul id="collapse_slide_aside" class="list-unstyled my-0 pb-3 collapse d-lg-block">
<t t-set="i" t-value="0"/>
<t t-if="category.get('slides')" t-foreach="category_data" t-as="category">
<t t-call="website_slides.slide_aside_training_category">
<t t-set="category_slide_ids" t-value="category['slides']"/>
</t>
</t>
</ul>
</div>
</template>
<template id="slide_aside_training_category" name="Category item for the slide detailed view list">
<t t-if="category" t-set="category" t-value="category.get('category')"/>
<li class="o_wslides_fs_sidebar_section mt-2">
<a t-att-href="('#collapse-%s') % (category.id if category else 0)" data-bs-toggle="collapse" role="button" aria-expanded="true"
class="o_wslides_lesson_aside_list_link ps-2 text-600 text-uppercase text-decoration-none p-1 small d-block"
t-att-aria-controls="('collapse-%s') % (category.id if category else 0)">
<t t-if="category">
<b t-field="category.name"/>
</t>
<t t-else="">
<b>Uncategorized</b>
</t>
</a>
<ul class="collapse show p-0 m-0 list-unstyled" t-att-id="('collapse-%s') % (category.id if category else 0)" >
<t t-set="is_member" t-value="slide.channel_id.is_member"/>
<t t-set="can_access_channel" t-value="is_member or slide.channel_id.can_publish"/>
<t t-foreach="category_slide_ids" t-as="aside_slide">
<t t-set="slide_completed" t-value="channel_progress[aside_slide.id].get('completed')"/>
<t t-set="can_access" t-value="aside_slide.is_preview or can_access_channel"/>
<li class="p-0 pb-1">
<div t-att-class="'o_wslides_lesson_aside_list_link d-flex p-1 %s%s' % (('bg-100 active' if aside_slide == slide else ''), 'text-muted' if not can_access else '')"
t-att-data-id="slide.id"
t-att-data-completed="slide_completed">
<t t-call="website_slides.slide_sidebar_done_button">
<t t-set="slide" t-value="aside_slide"/>
<t t-set="slide_completed" t-value="channel_progress[aside_slide.id].get('completed')"/>
</t>
<a t-att-href="'/slides/slide/%s' % (slug(aside_slide)) if can_access else '#'"
t-attf-class="d-flex text-decoration-none mw-100 overflow-hidden ms-2 #{'text-muted' if not can_access else ''}">
<t t-call="website_slides.slide_icon">
<t t-set="slide" t-value="aside_slide"/>
</t>
<div class="o_wslides_lesson_link_name" t-att-title="aside_slide.name">
<span t-esc="aside_slide.name"/>
<span class="align-items-end" t-if="aside_slide.question_ids">
<span t-att-class="'badge rounded-pill %s' % ('text-bg-success' if channel_progress[aside_slide.id].get('completed') else 'text-bg-light text-600')">
<t t-esc="channel_progress[aside_slide.id].get('quiz_karma_won') if channel_progress[aside_slide.id].get('completed') else channel_progress[aside_slide.id].get('quiz_karma_gain')"/> xp
</span>
</span>
</div>
</a>
</div>
<ul t-if="aside_slide._has_additional_resources() or aside_slide.question_ids" class="list-group ps-5 mb-1 list-unstyled">
<t t-if="can_access_channel">
<t t-foreach="aside_slide.slide_resource_ids" t-as="resource" t-if="resource.resource_type == 'url'">
<li class="ps-4">
<a t-if="can_access" t-att-href="resource.link" target="new" class="text-decoration-none small">
<i class="fa fa-link me-1"/><span t-field="resource.name"/>
</a>
</li>
</t>
<div class="o_wslides_js_course_join ps-4" t-if="aside_slide._has_additional_resources()">
<li t-foreach="aside_slide.slide_resource_ids" t-as="resource" t-if="resource.resource_type == 'file'">
<a t-attf-href="/web/content/slide.slide.resource/#{resource.id}/data?download=true" class="text-decoration-none small">
<i class="fa fa-download me-1"/><span t-field="resource.name"/>
</a>
</li>
</div>
</t>
<div t-else="" class="o_wslides_js_course_join o_wslides_no_access">
<li t-if="aside_slide.channel_id.enroll == 'public'" class="text-decoration-none small">
<i class="fa fa-download me-1"/>
<t t-call="website_slides.join_course_link">
<t t-set="for_resources" t-value="1"/>
</t>
</li>
</div>
<li t-if="aside_slide.question_ids and aside_slide.slide_category != 'quiz'" class="ps-4">
<a t-if="can_access" t-att-href="'/slides/slide/%s#lessonQuiz' % (slug(aside_slide))"
class="o_wslides_lesson_aside_list_link text-decoration-none small text-600">
<i class="fa fa-flag text-warning"/> Quiz
</a>
<span t-else="" class="o_wslides_lesson_aside_list_link text-decoration-none small text-600 text-muted">
<i class="fa fa-flag text-warning"/> Quiz
</span>
</li>
</ul>
</li>
</t>
</ul>
</li>
</template>
<!-- Slide: all its content, not fullscreen mode -->
<template id="slide_content_detailed" name="Slide: Detailed Content">
<div class="d-flex align-items-start my-3 w-100">
<t t-set="slide_completed" t-value="channel_progress[slide.id].get('completed')"/>
<div class="col-12 col-md order-2 order-md-1 d-flex">
<div class="d-flex align-items-start">
<h1 class="h4 my-0 d-flex flex_row">
<t t-call="website_slides.slide_icon">
<t t-set="icon_class" t-valuef="me-2"/>
</t>
<span t-field="slide.name"/>
</h1>
</div>
</div>
<div class="col-12 col-md order-1 order-md-2 text-nowrap flex-grow-0 d-flex justify-content-end align-items-center mb-3 mb-md-0">
<t t-set="quiz_karma_won" t-value="channel_progress[slide.id].get('quiz_karma_won', 0)"/>
<t t-set="quiz_karma_gain" t-value="channel_progress[slide.id].get('quiz_karma_gain', 0)"/>
<span t-if="slide.question_ids and (slide_completed or quiz_karma_gain)"
t-attf-class="mx-2 badge #{'text-bg-success' if slide_completed else 'text-bg-info'}">
<span t-if="slide_completed">
<i class="fa fa-check-circle"/>
<t t-if="quiz_karma_won">
<t t-esc="quiz_karma_won" />
<span>XP</span>
</t>
</span>
<t t-else="">
<span t-esc="quiz_karma_gain"/>
<span>XP</span>
</t>
</span>
<div class="btn-group flex-grow-1 flex-sm-0" role="group" aria-label="Lesson Nav">
<a t-attf-class="o_wslides_nav_button btn btn-light border #{'disabled' if not previous_slide else ''} me-2"
role="button" t-att-aria-disabled="'disabled' if not previous_slide else None"
t-att-href="'/slides/slide/%s' % (slug(previous_slide)) if previous_slide else '#'">
<i class="fa fa-chevron-left me-2"></i> <span class="d-none d-sm-inline-block">Prev</span>
</a>
<t t-if="slide.channel_id.channel_type == 'documentation' and slide.channel_id.is_member">
<t t-set="is_quiz" t-value="slide.slide_category == 'quiz' or slide.question_ids"/>
<a t-if="slide_completed and slide.can_self_mark_uncompleted" role="button"
class="o_wslides_undone_button btn btn-light border me-2"
t-attf-href="/slides/slide/#{slide.id}/set_uncompleted">
Mark To Do
</a>
<a t-elif="not slide_completed and is_quiz" role="button"
class="o_wslides_done_button btn btn-primary border text-white me-2"
href="#quiz_container">
Take Quiz
</a>
<a t-else="not slide_completed and slide.can_self_mark_completed" role="button"
class="o_wslides_done_button btn btn-primary border text-white me-2"
t-attf-href="/slides/slide/#{slide.id}/set_completed?next_slide_id=#{next_slide.id if next_slide else ''}">
Mark Done
</a>
</t>
<div t-if="slide.channel_id.channel_type == 'documentation' and not slide.channel_id.is_member" class="me-2">
<t t-call="website_slides.course_join">
<t t-set="channel" t-value="slide.channel_id"/>
</t>
</div>
<a t-attf-class="o_wslides_nav_button btn btn-light border #{'disabled' if not next_slide else ''}"
role="button" t-att-aria-disabled="'disabled' if not next_slide else None"
t-att-href="'/slides/slide/%s' % (slug(next_slide)) if next_slide else '#'">
<span class="d-none d-sm-inline-block">Next</span> <i class="fa fa-chevron-right ms-2"></i>
</a>
</div>
<a class="btn btn-light border ms-2" role="button" t-att-href="'/slides/slide/%s?fullscreen=1' % (slug(slide))">
<i class="fa fa-desktop me-2"/>
<span class="d-none d-sm-inline-block">Fullscreen</span>
</a>
<a class="btn btn-light border ms-2" role="button" data-bs-toggle="modal"
t-att-data-bs-target="'#slideShareModal_%s' % slide.id">
<i class="fa fa-share-alt me-2"/>
<span class="d-none d-sm-inline-block">Share</span>
</a>
</div>
</div>
<div t-if="slide.tag_ids" class="pb-2">
<t t-foreach="slide.tag_ids" t-as="tag">
<a t-att-href="'/slides/%s/tag/%s' % (slug(slide.channel_id), slug(tag))" class="badge text-bg-info py-1 px-2" t-esc="tag.name"/>
</t>
</div>
<div class="oe_structure oe_empty"/>
<div t-if="slide.slide_category == 'infographic'" class="o_wslides_lesson_content_type" t-field='slide.image_1920' t-options="{'widget': 'image', 'style': 'width: 100%;'}"/>
<div t-else="" class="o_wslides_lesson_content_type">
<div t-if="slide.slide_category == 'document'" class="ratio ratio-4x3 embed-responsive-item mb8" style="height: 600px;">
<t t-out="slide.embed_code"/>
</div>
<div t-if="slide.slide_category == 'video'" class="ratio ratio-16x9 embed-responsive-item mb8">
<t t-out="slide.embed_code"/>
</div>
<div t-if="slide.slide_category == 'article'">
<div t-if="is_html_empty(slide.html_content)" class="alert alert-info o_not_editable">
Click on the "Edit" button in the top corner of the screen to edit your slide content.
</div>
<div class="bg-white p-3">
<div t-field="slide.html_content" placeholder="Add your content here..."/>
</div>
</div>
</div>
<div class="mb-5 position-relative">
<ul class="nav nav-tabs o_wslides_lesson_nav" role="tablist">
<li class="nav-item">
<a href="#about" aria-controls="about" t-att-class="'nav-link active' if not comments else 'nav-link'" role="tab" data-bs-toggle="tab">
<i class="fa fa-home"></i> About
</a>
</li>
<li class="nav-item">
<a href="#discuss" aria-controls="discuss" t-att-class="'nav-link active' if comments else 'nav-link'" role="tab" data-bs-toggle="tab">
<i class="fa fa-comments"></i> Comments (<span t-esc="slide.comments_count"/>)
</a>
</li>
<li class="nav-item" groups="base.group_user">
<a href="#statistic" aria-controls="statistic" class="nav-link" role="tab" data-bs-toggle="tab">
<i class="fa fa-bar-chart"></i> Statistics
</a>
</li>
</ul>
<div class="tab-content mt-3">
<div role="tabpanel" t-att-class="not comments and 'tab-pane fade in show active' or 'tab-pane fade'" id="about">
<div t-field="slide.description"/>
<div t-if="slide.channel_id.allow_comment" class="d-flex">
<span class="text-muted fw-bold me-3">Rating</span>
<div class="text-muted border-start ps-3">
<div class="o_wslides_js_slide_like me-2">
<span t-attf-class="o_wslides_js_slide_like_up #{'disabled' if not slide.channel_id.can_vote else ''}" tabindex="0" data-bs-toggle="popover" t-att-data-slide-id="slide.id" t-att-data-user-vote="slide.user_vote">
<i t-attf-class="fa fa-1x #{'fa-thumbs-up' if slide.user_vote == 1 else 'fa-thumbs-o-up'}" role="img" aria-label="Likes" title="Like"/>
<span t-field="slide.likes" t-options="{'format_decimalized_number': True}"/>
</span>
<span t-attf-class="o_wslides_js_slide_like_down ms-3 #{'disabled' if not slide.channel_id.can_vote else ''}" tabindex="0" data-bs-toggle="popover" t-att-data-slide-id="slide.id" t-att-data-user-vote="slide.user_vote">
<i t-attf-class="fa fa-1x #{'fa-thumbs-down' if slide.user_vote == -1 else 'fa-thumbs-o-down'}" role="img" aria-label="Dislikes" title="Dislike"/>
<span t-field="slide.dislikes" t-options="{'format_decimalized_number': True}"/>
</span>
</div>
</div>
</div>
</div>
<div role="tabpanel" t-att-class="comments and 'tab-pane fade in show active' or 'tab-pane fade'" id="discuss">
<t t-set="enable_slide_comments" t-value="0"/>
<p t-if="not (slide.channel_id.allow_comment and slide.channel_id.channel_type == 'training')">
Commenting is not enabled on this course.
</p>
<t t-elif="not slide.comments_count">
<p t-if="not can_access_channel">
There are no comments for now.
<t t-if="slide.channel_id.enroll != 'invite'">
<div class="o_wslides_js_course_join o_wslides_no_access_comments d-inline">
<t t-if="slide.channel_id.enroll == 'public'" t-call="website_slides.join_course_link"/>
</div>
to be the first to leave a comment.
</t>
</p>
<p t-elif="not slide.channel_id.can_comment">
There are no comments for now. Earn more Karma to be the first to leave a comment.
</p>
<t t-else="" t-set="enable_slide_comments" t-value="1"/>
</t>
<t t-else="">
<t t-set="enable_slide_comments" t-value="1"/>
<t t-if="not slide.channel_id.can_comment and slide.channel_id.can_access_channel"><p>Earn more Karma to leave a comment.</p></t>
</t>
<t t-if="enable_slide_comments" t-call="portal.message_thread">
<t t-set="object" t-value="slide"/>
<t t-set="disable_composer" t-value="not (slide.channel_id.can_comment and slide.channel_id.allow_comment)"/>
<t t-set="display_rating" t-value="False"/>
</t>
</div>
<div role="tabpanel" class="tab-pane fade" groups="base.group_user" id="statistic" t-att-slide-url="slide.website_url">
<div class="row">
<div class="col-md-6">
<table class="table table-sm">
<tbody>
<tr>
<th colspan="2" class="border-top-0">Views</th>
</tr>
<tr class="border-top-0">
<th class="border-top-0"><span t-esc="slide.total_views"/></th>
<td class="border-top-0 w-100">Total Views</td>
</tr>
<tr>
<th><span t-esc="slide.slide_views"/></th>
<td>Members Views</td>
</tr>
<tr>
<th><span t-esc="slide.public_views"/></th>
<td>Public Views</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="o_wslides_js_quiz_container" t-att-data-slide-id="slide.id" id="quiz_container">
<div class="row" t-if="slide.slide_category != 'certification'">
<t t-if="slide.question_ids">
<t t-call="website_slides.lesson_content_quiz"/>
</t>
<div t-else="" class="o_wslides_js_lesson_quiz col" t-att-data-id="slide.id">
<t t-if="slide.channel_id.can_upload" t-call="website_slides.lesson_content_quiz_add_buttons"/>
</div>
</div>
</div>
<div class="row mt-3 mb-3">
<t t-if="slide._has_additional_resources()">
<t t-set="can_access_channel" t-value="slide.channel_id.is_member or slide.channel_id.can_publish"/>
<t t-if="can_access_channel">
<t t-set="links" t-value="slide.slide_resource_ids.filtered(lambda res: res.resource_type == 'url')"/>
<div class="col-12 col-md d-flex align-items-start mb-4 mb-md-0" t-if="links">
<span class="text-muted fw-bold me-3">External sources</span>
<div class="text-muted me-auto border-start ps-3">
<t t-foreach="links" t-as="link">
<a t-att-href="link.link" t-esc="link.name"/><br />
</t>
</div>
</div>
<group>
<t t-set="files" t-value="slide.slide_resource_ids.filtered(lambda res: res.resource_type == 'file' and res.data)"/>
<div class="col-12 col-md d-flex align-items-start mb-4 mb-md-0 o_wslides_js_course_join" t-if="files">
<span class="text-muted fw-bold me-3">
Additional Resources
</span>
<div class="text-muted me-auto border-start ps-3">
<t t-foreach="slide.slide_resource_ids" t-as="resource" t-if="resource.resource_type == 'file' and resource.data">
<a t-attf-href="/web/content/slide.slide.resource/#{resource.id}/data?download=true" t-esc="resource.name"/><br />
</t>
</div>
</div>
</group>
</t>
<t t-else="">
<span t-if="slide.is_preview" class="text-muted fw-bold me-3">
Additional Resources
</span>
<div class="o_wslides_js_course_join o_wslides_no_access">
<div t-if="slide.channel_id.enroll == 'invite'">
<span>Content only accessible to course members.</span>
</div>
<div t-if="slide.channel_id.enroll == 'public'" class="text-muted me-auto border-start ps-3">
<t t-call="website_slides.join_course_link">
<t t-set="for_resources" t-value="1"/>
</t>
</div>
</div>
</t>
</t>
</div>
<t t-call="website_slides.slide_share_modal">
<t t-set="record" t-value="slide"/>
<t t-set="include_embed" t-value="bool(slide.embed_code)"/>
<t t-set="website_share_url" t-value="slide.website_share_url"/>
</t>
</template>
<!-- Slide sub-tempalte: render a quiz serverside. Should be sync with JS qweb template "slide.slide.quiz" -->
<template id="lesson_content_quiz" name="Lesson: Quiz specific content">
<t t-set="slide_completed" t-value="channel_progress[slide.id].get('completed')"/>
<div class="o_wslides_js_lesson_quiz col" id="lessonQuiz"
t-att-data-id="slide.id"
t-att-data-name="slide.name"
t-att-data-slide-category="slide.slide_category"
t-att-data-is-member="slide.channel_id.is_member"
t-att-data-can-self-mark-completed="slide.can_self_mark_completed"
t-att-data-can-self-mark-uncompleted="slide.can_self_mark_uncompleted"
t-att-data-completed="slide_completed"
t-att-data-quiz-attempts-count="quiz_attempts_count"
t-att-data-quiz-karma-max="quiz_karma_max"
t-att-data-quiz-karma-gain="quiz_karma_gain"
t-att-data-quiz-karma-won="quiz_karma_won"
t-att-data-has-next="1 if next_slide else 0"
t-att-data-next-slide-url="'/slides/slide/%s' % (slug(next_slide)) if next_slide else None"
t-att-data-channel-id="slide.channel_id.id"
t-att-data-channel-enroll="slide.channel_id.enroll"
t-att-data-channel-requested-access="slide.channel_id.has_requested_access"
t-att-data-channel-can-upload="slide.channel_id.can_upload"
t-att-data-signup-allowed="signup_allowed"
t-att-data-session-answers="session_answers">
<t t-foreach="slide_questions" t-as="question">
<t t-call="website_slides.lesson_content_quiz_question"/>
</t>
<t t-if="slide.channel_id.can_upload" t-call="website_slides.lesson_content_quiz_add_buttons"/>
<div class="o_wslides_js_lesson_quiz_validation pt-3"/>
</div>
</template>
<template id="lesson_content_quiz_question" name="Lesson: Quiz question template">
<div t-att-class="'o_wslides_js_lesson_quiz_question mt-3 %s' % ('completed-disabled' if slide_completed else ('disabled' if not (slide.channel_id.is_member or slide.is_preview) else ''))"
t-att-data-question-id="question['id']" t-att-data-title="question['question']" >
<div class="row d-flex mb-2 mx-0">
<div class="h4">
<small class="text-muted">
<i class="o_wslides_js_quiz_icon o_wslides_js_quiz_sequence_handler fa fa-bars me-1 text-muted" t-if="slide.channel_id.can_upload and not slide_completed" />
<t t-if="question_index != NoneType"><span class="o_wslides_quiz_question_sequence" t-esc="question_index+1"/>.</t>
<t t-else=""><span class="o_wslides_quiz_question_sequence" t-esc="question['sequence']"/>.</t>
</small>
<span t-esc="question['question']"/>
</div>
<div class="ms-auto o_wslides_js_quiz_edit_del" t-if="slide.channel_id.can_upload and not slide_completed" >
<i class="o_wslides_js_quiz_icon o_wslides_js_quiz_edit_question fa fa-pencil-square-o p-1 text-muted"></i>
<i class="o_wslides_js_quiz_icon o_wslides_js_quiz_delete_question fa fa-trash p-1 text-muted"></i>
</div>
</div>
<div class="list-group">
<t t-foreach="question['answer_ids']" t-as="answer">
<a t-att-data-answer-id="answer['id']" href="#"
t-att-data-text="answer['text_value']" t-att-data-is-correct="answer['is_correct']" t-att-data-comment="answer['comment']"
t-att-class="'o_wslides_quiz_answer list-group-item list-group-item-action d-flex align-items-center %s' % ('list-group-item-success' if slide_completed and answer['is_correct'] else '')">
<label class="my-0 d-flex align-items-center justify-content-center me-2">
<input type="radio"
t-att-name="question['id']"
t-att-value="answer['id']"
class="d-none"
t-att-disabled="True if not slide.channel_id.is_member or slide_completed else ''"/>
<i t-att-class="'fa fa-circle text-400 %s' % ('d-none' if slide_completed and answer['is_correct'] else '')"/>
<i class="fa fa-times-circle text-danger d-none"></i>
<i t-att-class="'fa fa-check-circle text-success %s' % ('d-none' if not (slide_completed and answer['is_correct']) else '')"></i>
</label>
<span t-esc="answer['text_value']"/>
</a>
</t>
<div class="o_wslides_quiz_answer_info list-group-item list-group-item-info d-none">
<i class="fa fa-info-circle"/>
<span class="o_wslides_quiz_answer_comment"/>
</div>
</div>
</div>
</template>
<template id="lesson_content_quiz_add_buttons" name="Lesson: Quiz Add Buttons template">
<div class="o_wslides_js_lesson_quiz_new_question mt-3">
<a t-attf-class="o_wslides_js_quiz_add o_wslides_js_quiz_add_quiz btn btn-light border #{'d-none ' if slide.question_ids else ''}" role="button">
<i class="fa fa-plus me-2"/>
<span>Add Quiz</span>
</a>
<a t-attf-class="o_wslides_js_quiz_add o_wslides_js_quiz_add_question btn btn-light border ms-3 #{'' if slide.question_ids else 'd-none '}" role="button">
<i class="fa fa-plus me-2"/>
<span>Add Question</span>
</a>
</div>
</template>
</data></odoo>