[IMP] website_slides: add a visual effect for unpublished course

Purpose of this commit is to help designers seeing lessons state, notably
published, and modifying it directly from frontend.

The unpublished courses card are now a little bit translucent
and there is a 'unpublished' tag to clearly show their state.

Task 2033052

closes odoo/odoo#34880

Signed-off-by: Thibault Delavallee (tde) <tde@openerp.com>

addons/website_slides/static/src/scss/website_slides.scss

@@ -129,6 +129,12 @@ $o-wslides-fs-side-width: 300px;
     }
 }
 
+// Courses Card
+// **************************************************
+.o_wslides_course_card.o_wslides_course_unpublished {
+    opacity: 0.5;
+}
+
 // New course page
 // **************************************************
 

addons/website_slides/views/website_slides_templates_homepage.xml

@@ -282,7 +282,7 @@
 </template>
 
 <template id='course_card' name="Course Card">
-    <div class="card w-100 o_wslides_course_card mb-4">
+    <div t-attf-class="card w-100 o_wslides_course_card mb-4 #{'o_wslides_course_unpublished' if not channel.is_published else ''}">
         <t t-set="course_image" t-value="'/web/image/slide.channel/%s/image' % channel.id"/>
         <a t-attf-href="/slides/#{slug(channel)}" t-title="channel.name">
             <div t-if="channel.image_large" class="card-img-top" t-attf-style="padding-top: 50%; background-image: url(#{course_image}); background-size: cover; background-position:center"/>
@@ -292,6 +292,7 @@
         </a>
         <div class="card-body p-3">
             <a class="card-title h5 mb-2 o_wslides_desc_truncate_2" t-attf-href="/slides/#{slug(channel)}" t-esc="channel.name"/>
+            <span t-if="not channel.is_published" class="badge badge-danger p-1">Unpublished</span>
             <div class="card-text mt-1">
                 <div class="font-weight-light o_wslides_desc_truncate_3" t-field="channel.description"/>
                 <div t-if="channel.tag_ids" class="mt-2 pt-1 o_wslides_desc_truncate_2">