[REF] website_event, *: review event design and features

* event, website_event_questions, website_event_sale,
  website_event_track, base

Part of https://github.com/odoo/odoo/pull/37009
task-2043872

Co-authored-by: qsm-odoo <qsm@odoo.com>
Co-authored-by: Jérémy Kersten <jke@odoo.com>

2 files changed, 641 insertions, 518 deletions

diff --git a/addons/website_event/views/event_snippets.xml b/addons/website_event/views/event_snippets.xml
index cd2ac5cb59e..438a19fbd15 100644
--- a/addons/website_event/views/event_snippets.xml
+++ b/addons/website_event/views/event_snippets.xml
@@ -1,68 +1,80 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
 
-<!-- Snippet to display local events -->
-<template id="s_country_events" name="Local Events">
-    <div t-attf-class="oe_country_events #{_classes or 'my-3'}">
+<!-- Snippet - Country Events - Placeholder -->
+<template id="s_country_events" name="Country Events">
+    <div t-attf-class="s_country_events_list oe_country_events #{_classes}">
         <div class="country_events_list">
-            <h5>
-                <i class="fa fa-flag"/> Events from Your Country
-            </h5>
+            <h6 class="o_wevent_sidebar_title">
+                <i class="fa fa-globe mr-2"/>Upcoming Events
+            </h6>
         </div>
     </div>
 </template>
 
-<!-- Misc templates -->
-<template id="country_events_list" name="Country">
-    <t t-ignore="true">
+<!-- Snippet - Country Events - List -->
+<template id="country_events_list" name="Country Events List">
+    <div class="country_events_list">
         <t t-if="events">
-            <div class="country_events_list">
+            <h6 class="o_wevent_sidebar_title">
                 <t t-if="country">
-                    <img class="img-fluid" t-att-src="website.image_url(country, 'image')" alt=""></img>
-                    <h4><b>Events: <span t-esc="country.name"></span></b></h4>
+                    <i class="fa fa-flag mr-2"/>Events: <span t-esc="country.name"/>
+                    <img class="img-fluid" t-att-src="website.image_url(country, 'image')" alt=""/>
                 </t>
-                <t t-if="not country">
-                    <img class="img-fluid" src="/website_event/static/src/img/world_map.jpg" alt=""></img>
-                    <h4><b>Upcoming Events</b></h4>
+                <t t-else="">
+                    <i class="fa fa-globe mr-2"/>Upcoming Events
                 </t>
-                <div t-foreach="events[:5]" t-as="event_dict" class="oe_website_overflow_ellipsis mb8">
-                    <t t-if="not event_dict['event'].website_published">
-                        <span class="badge badge-danger" role="img" aria-label="Attention: not published" title="Not published"><i class="fa fa-ban"></i></span>
-                    </t>
-                    <t t-if="event_dict['event'].address_id">
-                        <i class="fa fa-map-marker" title="It is a physical event" role="img" aria-label="It is a physical event"></i>
-                    </t>
-                    <t t-if="not event_dict['event'].address_id">
-                        <i class="fa fa-cloud" title="It is an online event" role="img" aria-label="It is an online event"></i>
-                    </t>
-                    <b><span t-esc="event_dict['date']"/>: <span><a t-att-href="event_dict['url']"><t t-esc="event_dict['event'].name"/></a></span></b>
-                </div>
-                <t t-if="len(events) &gt; 5">
-                    <div t-if="country">
-                        <b><a t-att-href="'/event?country='+str(country.id)">See all events from <span t-esc="country.name"></span></a></b>
-                    </div>
-                    <div t-if="not country">
-                        <b><a href="/event"> See all upcoming events </a></b>
-                    </div>
+            </h6>
+            <ul class="list-group mb-3">
+                <li t-foreach="events[:5]" t-as="event_dict" class="list-group-item d-flex justify-content-between">
+                    <a t-att-href="event_dict['url']">
+                        <i t-if="not event_dict['event'].website_published" class="fa fa-ban text-danger mr-1" role="img" aria-label="Unpublished" title="Unpublished"/>
+                        <span t-esc="event_dict['event'].name" t-attf-class="#{(not event_dict['event'].website_published) and 'text-danger' or ''}"/>
+                    </a>
+                    <span t-esc="event_dict['date']"/>
+                </li>
+            </ul>
+            <div t-if="len(events) &gt; 5">
+                <t t-if="country">
+                    <a t-attf-href="/event?country=#{country.id}" class="small"><b>See all events from <span t-esc="country.name"/></b></a>
+                </t>
+                <t t-else="">
+                    <a href="/event" class="small"><b>View all</b></a>
                 </t>
             </div>
         </t>
-    </t>
+    </div>
 </template>
 
 <!-- Replace snippet demo with actual snippet and options -->
 <template id="remove_external_snippets" inherit_id="website.external_snippets">
     <xpath expr="//t[@t-install='website_event']" position="replace"/>
 </template>
-<template id="country_events" name="Country Events" inherit_id="website.snippets">
+
+<template id="snippets" inherit_id="website.snippets">
     <xpath expr="//div[@id='snippet_content']//t[@t-snippet][last()]" position="after">
         <t t-snippet="website_event.s_country_events" t-thumbnail="/website_event/static/src/img/world_map.jpg"/>
+        <t t-snippet="website_event.s_speaker_bio" t-thumbnail="/website_event/static/src/img/s_country_events.png"/>
     </xpath>
-    <xpath expr="//div[@id='snippet_options']" position="inside">
-        <div data-selector=".oe_country_events"
-            data-drop-near="p, h1, h2, h3, blockquote, .card"
-            data-drop-in=".content"/>
+</template>
+
+<template id="snippet_options" inherit_id="website.snippet_options">
+    <xpath expr="//div[@id='so_content_addition']" position="attributes">
+        <attribute name="data-selector" add=".oe_country_events, .s_speaker_bio" separator=","/>
     </xpath>
 </template>
 
+<!-- Snippet - Speaker Bio -->
+<template id="s_speaker_bio" name="Speaker Bio">
+    <div class="s_speaker_bio" itemscope="itemscope" itemtype="http://schema.org/Person" itemprop="performer">
+        <span class="badge badge-secondary text-uppercase o_wevent_badge">Speaker</span>
+        <img src="/website_event/static/src/img/speaker.png" width="70" class="img-fluid rounded-circle float-left mr-3" alt=""/>
+        <div class="overflow-hidden">
+            <h4 class="mt-3 mb-1" itemprop="name">John DOE</h4>
+            <h6 class="mb-4">Company</h6>
+            <p>At just 13 years old, John DOE was already starting to develop his first business applications for customers. After mastering civil engineering, he founded TinyERP. This was the first phase of OpenERP which would later became Odoo, the most installed open-source business software worldwide.</p>
+        </div>
+    </div>
+</template>
+
 </odoo>
diff --git a/addons/website_event/views/event_templates.xml b/addons/website_event/views/event_templates.xml
index 6f81f23bc9f..f33f64c4f61 100644
--- a/addons/website_event/views/event_templates.xml
+++ b/addons/website_event/views/event_templates.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
 
-<template id="assets_frontend" inherit_id="website.assets_frontend">
+<template id="assets_frontend" inherit_id="website.assets_frontend" name="Event Assets Frontend">
     <xpath expr="//link[last()]" position="after">
         <link rel="stylesheet" type="text/scss" href="/website_event/static/src/scss/website_event.scss"/>
     </xpath>
@@ -11,511 +11,625 @@
     </xpath>
 </template>
 
-<template id="assets_editor" inherit_id="website.assets_editor" name="Event Editor">
+<template id="assets_editor" inherit_id="website.assets_editor" name="Event Assets Editor">
     <xpath expr="." position="inside">
         <script type="text/javascript" src="/website_event/static/src/js/website_event.editor.js"></script>
         <script type="text/javascript" src="/website_event/static/src/js/tours/website_event.js"></script>
     </xpath>
 </template>
 
-<!-- Page -->
+<!-- Index -->
 <template id="index" name="Events">
     <t t-call="website.layout">
-      <div id="wrap">
-        <div class="oe_structure" id="oe_structure_website_event_index_1"/>
-        <div class="container" id="o_event_list_container">
-            <ol class="breadcrumb mt-2">
-                <li class="breadcrumb-item">
-                    <a href="/event">Our Events</a>
-                </li>
-                <li t-if="current_date" class="breadcrumb-item"><t t-esc="current_date"/></li>
-                <li t-if="current_type" class="breadcrumb-item"><t t-esc="current_type.name"/></li>
-                <li t-if="current_country" class="breadcrumb-item"><t t-esc="current_country.name"/></li>
-            </ol>
-            <div class="form-inline justify-content-center mb-3">
-                <t t-call="website.pager"/>
-            </div>
-            <div class="row">
-                <div class="col" id="middle_column">
-                    <t t-call="website_event.events_list"/>
+        <div id="wrap" class="o_wevent_index">
+            <!-- Options -->
+            <t t-set="opt_events_list_cards" t-value="request.website.viewref('website_event.opt_events_list_cards').active"/>
+            <t t-set="opt_events_list_columns" t-value="request.website.viewref('website_event.opt_events_list_columns').active"/>
+            <!-- Topbar -->
+            <t t-call="website_event.index_topbar"/>
+            <!-- Drag/Drop Area -->
+            <div id="oe_structure_we_index_1" class="oe_structure"/>
+            <!-- Content -->
+            <div t-attf-class="o_wevent_events_list #{opt_events_list_cards and 'opt_event_list_cards_bg'}">
+                <div class="container">
+                    <div class="row">
+                        <div id="o_wevent_index_main_col" t-attf-class="col-md my-5 #{opt_events_list_columns and 'opt_events_list_columns' or 'opt_events_list_rows'}">
+                            <div class="row">
+                                <!-- Events List -->
+                                <t t-call="website_event.events_list"/>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
-            <div class="form-inline justify-content-center my-3">
-                <t t-call="website.pager"/>
-            </div>
+            <!-- Drag/Drop Area -->
+            <div id="oe_structure_we_index_2" class="oe_structure"/>
         </div>
-        <div class="oe_structure" id="oe_structure_website_event_index_2"/>
-      </div>
     </t>
 </template>
 
-<template id="event_left_column" inherit_id="website_event.index" customize_show="True" name="Filters Column on the Left">
-    <xpath expr="//div[@id='middle_column']" position="before">
-        <div class="col-lg-3 css_noprint" id="left_column"/>
+<!-- Index - OPTION - Sidebar -->
+<template id="opt_index_sidebar" inherit_id="website_event.index" active="True" customize_show="True" name="Show Sidebar">
+    <xpath expr="//div[@id='o_wevent_index_main_col']" position="after">
+        <t t-call="website_event.index_sidebar"/>
     </xpath>
 </template>
 
-<template id="event_time" customize_show="True" inherit_id="website_event.event_left_column" name="Filter by Date">
-    <xpath expr="//div[@id='left_column']" position="inside">
-        <ul class="nav nav-pills flex-column mb-3">
-            <t t-foreach="dates" t-as="date">
-                <li class="nav-item" t-if="date[3] or (date[0] in ('old','all'))">
-                    <a t-attf-href="/event?{{ keep_query('country', 'type', date=date[0]) }}" t-attf-class="nav-link d-flex align-items-center #{searches.get('date') == date[0] and ' active' or ''}"><t t-esc="date[1]"/>
-                        <span t-if="date[3]" class="badge badge-primary ml-auto"><t t-esc="date[3]"/></span>
-                    </a>
-                </li>
+<!-- Index Topbar -->
+<template id="index_topbar" name="Topbar">
+    <nav class="navbar navbar-light border-top shadow-sm d-print-none">
+        <div class="container">
+            <span class="navbar-brand h4 my-0 mr-4">Events</span>
+            <ul class="o_wevent_index_topbar_filters nav mr-n2"/>
+            <t t-call="website_event.events_search_box">
+                <t t-set="_classes" t-value="'ml-auto pl-lg-3'"/>
+                <t t-set="_searches" t-value="searches"/>
             </t>
-        </ul>
+        </div>
+    </nav>
+</template>
+
+<!-- Filter - Date -->
+<template id="event_time" inherit_id="website_event.index_topbar" customize_show="True" name="Filter by Date">
+    <xpath expr="//ul[hasclass('o_wevent_index_topbar_filters')]" position="inside">
+        <li class="nav-item dropdown mr-2 my-1 my-lg-0">
+            <a href="#" role="button" class="btn dropdown-toggle" data-toggle="dropdown">
+                <i class="fa fa-calendar"/>
+                <t t-if="current_date" t-esc="current_date"/>
+                <t t-else="">Next Events</t>
+            </a>
+            <div class="dropdown-menu">
+                <t t-foreach="dates" t-as="date">
+                    <t t-if="date[3] or (date[0] in ('old','all'))">
+                        <a t-att-href="keep('/event', date=date[0])" t-attf-class="dropdown-item d-flex align-items-center justify-content-between #{searches.get('date') == date[0] and 'active'}">
+                            <t t-esc="date[1]"/>
+                            <span t-if="date[3]" t-esc="date[3]" class="badge badge-pill badge-primary ml-3"/>
+                        </a>
+                    </t>
+                </t>
+            </div>
+        </li>
     </xpath>
 </template>
 
-<template id="event_category" inherit_id="website_event.event_left_column" active="False" customize_show="True" name="Filter by Category">
-    <xpath expr="//div[@id='left_column']" position="inside">
-        <ul class="nav nav-pills flex-column mb-3">
-            <t t-foreach="types" t-as="type">
-                <li t-if="type['event_type_id']"
-                    class="nav-item">
-                    <a t-attf-href="/event?{{ keep_query('country', 'date', type=type['event_type_id'][0]) }}" t-attf-class="nav-link d-flex align-items-center #{searches.get('type') == str(type['event_type_id'] and type['event_type_id'][0]) and ' active' or ''}"><t t-esc="type['event_type_id'][1]"/>
-                        <span class="badge badge-primary ml-auto"><t t-esc="type['event_type_id_count']"/></span>
-                    </a>
-                </li>
-            </t>
-        </ul>
+<!-- Filter - Category -->
+<template id="event_category" inherit_id="website_event.index_topbar" active="True" customize_show="True" name="Filter by Category">
+    <xpath expr="//ul[hasclass('o_wevent_index_topbar_filters')]" position="inside">
+        <li class="nav-item dropdown mr-2 my-1 my-lg-0">
+            <a href="#" role="button" class="btn dropdown-toggle" data-toggle="dropdown">
+                <i class="fa fa-folder-open"/>
+                <t t-if="current_type" t-esc="current_type.name"/>
+                <t t-else="">All Categories</t>
+            </a>
+            <div class="dropdown-menu">
+                <t t-foreach="types" t-as="type">
+                    <t t-if="type['event_type_id']">
+                        <a t-att-href="keep('/event', type=type['event_type_id'][0])" t-attf-class="dropdown-item d-flex align-items-center justify-content-between #{searches.get('type') == str(type['event_type_id'] and type['event_type_id'][0]) and 'active'}">
+                            <t t-esc="type['event_type_id'][1]"/>
+                            <span t-esc="type['event_type_id_count']" class="badge badge-pill badge-primary ml-3"/>
+                        </a>
+                    </t>
+                </t>
+            </div>
+        </li>
     </xpath>
 </template>
 
-<template id="event_location" inherit_id="website_event.event_left_column" active="False" customize_show="True" name="Filter by Country">
-    <xpath expr="//div[@id='left_column']" position="inside">
-        <ul class="nav nav-pills flex-column mb-3">
-            <t t-foreach="countries" t-as="country">
-                <li t-if="country['country_id']" class="nav-item">
-                    <a t-attf-href="/event?{{ keep_query('type', 'date', country=country['country_id'][0]) }}" t-attf-class="nav-link d-flex align-items-center #{searches.get('country') == str(country['country_id'] and country['country_id'][0]) and ' active' or ''}"><t t-esc="country['country_id'][1]"/>
-                        <span class="badge badge-primary ml-auto"><t t-esc="country['country_id_count']"/></span>
-                    </a>
-                </li>
-                <li t-if="not country['country_id']" class="nav-item">
-                    <a t-attf-href="/event?{{ keep_query('type', 'date', country='online') }}" t-attf-class="nav-link d-flex align-items-center #{searches.get('country') == 'online' and ' active' or ''}">
-                        <span>Online Events</span>
-                        <span class="badge badge-primary ml-auto"><t t-esc="country['country_id_count']"/></span>
-                    </a>
-                </li>
+<!-- Filter - Location -->
+<template id="event_location" inherit_id="website_event.index_topbar" active="True" customize_show="True" name="Filter by Country">
+    <xpath expr="//ul[hasclass('o_wevent_index_topbar_filters')]" position="inside">
+        <li class="nav-item dropdown mr-2 my-1 my-lg-0">
+            <a href="#" role="button" class="btn dropdown-toggle" data-toggle="dropdown">
+                <i class="fa fa-map-marker"/>
+                <t t-if="current_country" t-esc="current_country.name"/>
+                <t t-else="">All countries</t>
+            </a>
+            <div class="dropdown-menu">
+                <t t-foreach="countries" t-as="country">
+                    <t t-if="country['country_id']">
+                        <a t-att-href="keep('/event', country=country['country_id'][0])" t-attf-class="dropdown-item d-flex align-items-center justify-content-between #{searches.get('country') == str(country['country_id'] and country['country_id'][0]) and 'active'}">
+                            <t t-esc="country['country_id'][1]"/>
+                            <span t-esc="country['country_id_count']" class="badge badge-pill badge-primary ml-auto"/>
+                        </a>
+                    </t>
+                    <t t-else="">
+                        <a t-att-href="keep('/event', country='online')" t-attf-class="dropdown-item d-flex align-items-center #{searches.get('country') == 'online' and 'active'}">
+                            <span>Online Events</span>
+                            <span t-esc="country['country_id_count']" class="badge badge-pill badge-primary ml-3"/>
+                        </a>
+                    </t>
+                </t>
+            </div>
+        </li>
+    </xpath>
+</template>
+
+<!-- Search Box -->
+<template id="events_search_box" inherit_id="website.website_search_box" primary="True">
+    <xpath expr="//div[hasclass('input-group')]" position="replace">
+        <form t-attf-class="o_wevent_event_searchbar_form o_wait_lazy_js my-1 my-lg-0 #{_classes}"
+              t-att-action="action if action else '/event'" method="get">
+            <t t-set="search" t-value="search or _searches and _searches['search']"/>
+            <t>$0</t>
+            <t t-foreach="_searches" t-as="search">
+                <input t-if="search != 'search' and search_value != 'all'" type="hidden"
+                    t-att-name="search" t-att-value="search_value"/>
             </t>
-        </ul>
+            <t t-raw="0"/>
+        </form>
     </xpath>
 </template>
 
+<!-- Index - Events list -->
 <template id="events_list" name="Events list">
-    <div class="text-center text-muted" t-if="not event_ids">
-        <h1>No event found</h1>
-        <p groups="event.group_event_manager">Use the top menu <i>'Content'</i> to create your first event.</p>
-    </div>
-    <div t-foreach="event_ids" t-as="event" class="card mb-3" itemscope="itemscope" itemtype="http://schema.org/Event">
-        <div t-attf-class="card-body #{event.is_participating and 'o_wevent_participating_container' or ''}">
-            <span t-if="event.is_participating" class="badge badge-info">Participating</span>
-            <span t-if="event.is_online" class="badge badge-info">Online</span>
-            <span t-if="not event.website_published" class="badge badge-danger">unpublished</span>
-            <small class="badge badge-primary float-right" t-if="event.event_type_id">
-                <i class="fa fa-ticket" role="img" aria-label="Event type" title="Event type"/> <span t-field="event.event_type_id"/>
-            </small>
-            <h4>
-                <a itemprop="url" t-att-class="event.state == 'done' and 'text-success'" t-attf-href="/event/#{ slug(event) }/#{(not event.menu_id) and 'register' or ''}"><b itemprop="name" t-field="event.name"/></a>
-            </h4>
-            <small t-if="event.organizer_id" class="text-muted">Organized by <span t-field="event.organizer_id" /></small>
-            <div>
-                <i class="fa fa-clock-o text-primary mx-1" role="img" aria-label="Start date" title="Start date"/>
-                <span itemprop="startDate" t-field="event.with_context(tz=event.date_tz).date_begin" t-options='{"hide_seconds":"True"}'></span>
-                <small>to</small>
-                <span itemprop="endDate" t-field="event.with_context(tz=event.date_tz).date_end" t-options='{"hide_seconds":"True"}'></span>
+    <!-- Options -->
+    <t t-set="opt_index_sidebar" t-value="request.website.viewref('website_event.opt_index_sidebar').active"/>
+    <t t-if="opt_events_list_columns" t-set="opt_event_size" t-value="opt_index_sidebar and 'col-md-6' or 'col-md-6 col-lg-4'"/>
+    <t t-else="" t-set="opt_event_size" t-value="opt_index_sidebar and 'col-12' or 'col-xl-10 offset-xl-1'"/>
+    <!-- No events -->
+    <t t-if="not event_ids">
+        <div class="col-12">
+            <div class="h2 mb-3">No events found.</div>
+            <div class="alert alert-info text-center" groups="event.group_event_manager">
+                <p class="m-0">Use the top button '<b>+ New</b>' to create an event.</p>
             </div>
-            <hr/>
-            <t t-if="not event.is_online">
-                <div itemprop="location" t-field="event.address_id" t-options='{
-                    "widget": "contact",
-                    "fields": ["city"]
-                }'/>
-            </t>
         </div>
+    </t>
+    <!-- List -->
+    <div t-foreach="event_ids" t-as="event" t-attf-class=" #{opt_event_size} mb-4">
+        <article t-attf-class="#{opt_events_list_cards and 'card border-0 shadow-sm'}" itemscope="itemscope" itemtype="http://schema.org/Event">
+            <div class="row no-gutters">
+                <!-- Header -->
+                <header t-attf-class="overflow-hidden bg-secondary #{opt_events_list_columns and 'col-12 rounded-top' or 'col-sm-4 col-lg-3 rounded-left'} #{(not opt_events_list_cards) and 'rounded shadow'} #{(not opt_events_list_cards and not opt_events_list_columns) and 'rounded-top'}">
+                    <!-- Image + Link -->
+                    <a t-attf-href="/event/#{ slug(event) }/#{(not event.menu_id) and 'register'}" class="d-block h-100 w-100">
+                        <t t-call="website.record_cover">
+                            <t t-set="_record" t-value="event"/>
+
+                            <!-- Short Date -->
+                            <div class="o_wevent_event_date position-absolute bg-white shadow-sm">
+                                <span t-esc="event.with_context(tz=event.date_tz).date_begin" t-options="{'widget': 'date', 'format': 'LLL'}" class="o_wevent_event_month"/>
+                                <span t-esc="event.with_context(tz=event.date_tz).date_begin" t-options="{'widget': 'date', 'format': 'dd'}" class="o_wevent_event_day"/>
+                            </div>
+                            <!-- Participating -->
+                            <small t-if="event.is_participating" class="o_wevent_participating bg-success">
+                                <i class="fa fa-check mr-2"/>Registered
+                            </small>
+                            <!-- Unpublished -->
+                            <small t-if="not event.website_published" class="o_wevent_unpublished bg-danger">
+                                <i class="fa fa-ban mr-2"/>Unpublished
+                            </small>
+                        </t>
+                    </a>
+                </header>
+                <div t-attf-class="#{opt_events_list_columns and 'col-12' or 'col'}">
+                    <!-- Body -->
+                    <main t-attf-class="#{opt_events_list_cards and 'card-body' or (opt_events_list_columns and 'py-3' or 'px-4')}">
+                        <!-- Title -->
+                        <h5 t-attf-class="card-title mt-2 mb-0 text-truncate #{(not event.website_published) and 'text-danger'}">
+                            <a t-attf-href="/event/#{ slug(event) }/#{(not event.menu_id) and 'register'}" class="text-reset text-decoration-none" itemprop="url">
+                                <span t-field="event.name" itemprop="name"/>
+                            </a>
+                        </h5>
+                        <!-- Organizer -->
+                        <div t-if="event.organizer_id" class="mb-3">
+                            <small class="text-muted text-truncate">Organizer: <span t-field="event.organizer_id" itemprop="organizer"/></small>
+                        </div>
+                        <!-- Location -->
+                        <div t-if="event.is_online">Online</div>
+                        <div t-else="" itemprop="location" t-field="event.address_id" t-options="{'widget': 'contact', 'fields': ['city'], 'no_marker': 'true'}"/>
+                        <!-- Start Date & Time -->
+                        <time itemprop="startDate" t-att-datetime="event.date_begin">
+                            <span t-field="event.with_context(tz=event.date_tz).date_begin" t-options="{'widget': 'date', 'format': 'long'}"/> -
+                            <span t-field="event.with_context(tz=event.date_tz).date_begin" t-options="{'time_only': 'true', 'format': 'short'}"/>
+                        </time>
+                    </main>
+                    <!-- Footer -->
+                    <footer t-attf-class="small #{opt_events_list_cards and 'card-footer' or ((not opt_events_list_columns) and 'border-top mx-4 mt-auto pt-2' or 'border-top py-2')}">
+                        <div itemprop="price"><span content="0" class="font-weight-bold text-uppercase">Free</span></div>
+                    </footer>
+                </div>
+            </div>
+        </article>
+    </div>
+    <!-- Pager -->
+    <div class="form-inline justify-content-center my-3">
+        <t t-call="website.pager"/>
     </div>
 </template>
 
-<template id="event_right_column" inherit_id="website_event.index" active="False" customize_show="True" name="Content Column on the Right">
-    <xpath expr="//div[@id='middle_column']" position="after">
-        <div class="col-lg-3 oe_structure" id="right_column"/>
+<template id="opt_events_list_columns" inherit_id="website_event.events_list" active="True" customize_show="True" name="Layout • Columns"/>
+
+<template id="opt_events_list_cards" inherit_id="website_event.events_list" active="True" customize_show="True" name="'Cards' Design"/>
+
+<template id="opt_events_list_categories" inherit_id="website_event.events_list" active="True" customize_show="True" name="Show categories">
+    <xpath expr="//main/*" position="before">
+        <a t-if="event.event_type_id" t-attf-href="/event?type=#{event.event_type_id.id}" t-attf-class="badge bg-secondary o_wevent_badge #{opt_events_list_columns and 'o_wevent_badge_event' or 'float-right'}" t-field="event.event_type_id"/>
+    </xpath>
+</template>
+
+<!-- Index - Sidebar -->
+<template id="index_sidebar" name="Sidebar">
+    <div id="o_wevent_index_sidebar" class="col-lg-4 ml-lg-3 ml-xl-5 my-5"/>
+</template>
+
+<!-- Index - Sidebar - About us -->
+<template id="index_sidebar_about_us" inherit_id="website_event.index_sidebar" active="True" customize_show="True" name="About us" priority="20">
+    <xpath expr="//div[@id='o_wevent_index_sidebar']" position="inside">
+        <div class="o_wevent_sidebar_block">
+            <h6 class="o_wevent_sidebar_title">About us</h6>
+            <p>Use this paragrah to write a short text about your events or company.</p>
+        </div>
+        <div id="oe_structure_website_event_about_us_1" class="oe_structure"/>
     </xpath>
 </template>
 
-<template id="event_right_photos" inherit_id="website_event.event_right_column" active="False" customize_show="True" name="Photos">
-    <xpath expr="//div[@id='right_column']" position="inside">
-        <figure class="figure o_figure_relative_layout w-100">
-            <img class="figure-img img-fluid" src="/website_event/static/src/img/openerp_enterprise_of_the_year.png" alt=""/>
-            <figcaption class="figure-caption text-center"><a href="/event">Photos of Past Events</a></figcaption>
-        </figure>
-        <figure class="figure o_figure_relative_layout w-100">
-            <img class="figure-img img-fluid" src="/website_event/static/src/img/training.jpg" alt=""/>
-            <figcaption class="figure-caption text-center"><a href="/event">Our Trainings</a></figcaption>
-        </figure>
+<!-- Index - Sidebar - Follow us -->
+<template id="index_sidebar_follow_us" inherit_id="website_event.index_sidebar" active="True" customize_show="True" name="Follow us" priority="30">
+    <xpath expr="//div[@id='o_wevent_index_sidebar']" position="inside">
+        <div class="o_wevent_sidebar_block">
+            <h6 class="o_wevent_sidebar_title">Follow Us</h6>
+            <div class="o_wevent_sidebar_social mx-n1">
+                <a t-if="website.social_facebook" t-att-href="website.social_facebook" class="o_wevent_social_link"><i class="fa fa-facebook text-facebook" aria-label="Facebook" title="Facebook"/></a>
+                <a t-if="website.social_twitter" t-att-href="website.social_twitter" class="o_wevent_social_link"><i class="fa fa-twitter text-twitter" aria-label="Twitter" title="Twitter"/></a>
+                <a t-if="website.social_linkedin" t-att-href="website.social_linkedin" class="o_wevent_social_link"><i class="fa fa-linkedin text-linkedin" aria-label="LinkedIn" title="LinkedIn"/></a>
+                <a t-if="website.social_youtube" t-att-href="website.social_youtube" class="o_wevent_social_link"><i class="fa fa-youtube-play text-youtube" aria-label="Youtube" title="Youtube"/></a>
+                <a t-if="website.social_github" t-att-href="website.social_github" class="o_wevent_social_link"><i class="fa fa-github text-github" aria-label="Github" title="Github"/></a>
+                <a t-if="website.social_instagram" t-att-href="website.social_instagram" class="o_wevent_social_link"><i class="fa fa-instagram text-instagram" aria-label="Instagram" title="Instagram"/></a>
+            </div>
+        </div>
+        <div id="oe_structure_website_event_follow_us_1" class="oe_structure"/>
     </xpath>
 </template>
 
-<template id="event_right_quotes" inherit_id="website_event.event_right_column" active="False" customize_show="True" name="Quotes">
-    <xpath expr="//div[@id='right_column']" position="inside">
-        <div class="card mb-3 bg-secondary">
+<!-- Index - Sidebar - Photos -->
+<template id="index_sidebar_photos" inherit_id="website_event.index_sidebar" active="True" customize_show="True" name="Photos" priority="40">
+    <xpath expr="//div[@id='o_wevent_index_sidebar']" position="inside">
+        <h6 class="o_wevent_sidebar_title">Photos</h6>
+        <a href="/event">
+            <figure class="o_wevent_sidebar_block o_wevent_sidebar_figure figure">
+                <img class="figure-img img-fluid rounded" src="/website_event/static/src/img/event_past_0.jpg" alt=""/>
+                <figcaption class="figure-caption">A past event</figcaption>
+            </figure>
+        </a>
+        <a href="/event">
+            <figure class="o_wevent_sidebar_block o_wevent_sidebar_figure figure">
+                <img class="figure-img img-fluid rounded" src="/website_event/static/src/img/event_training_0.jpg" alt=""/>
+                <figcaption class="figure-caption">Our Trainings</figcaption>
+            </figure>
+        </a>
+    </xpath>
+</template>
+
+<!-- Index - Sidebar - Categories -->
+<template id="index_sidebar_categories" inherit_id="website_event.index_sidebar" active="True" customize_show="True" name="Categories" priority="50">
+    <xpath expr="//div[@id='o_wevent_index_sidebar']" position="inside">
+        <div class="o_wevent_sidebar_block">
+            <h6 class="o_wevent_sidebar_title">Categories</h6>
+            <t t-foreach="types" t-as="type">
+                <t t-if="type['event_type_id']">
+                    <a t-att-href="keep('/event', type=type['event_type_id'][0])" class="badge badge-secondary o_wevent_badge mb-2"><t t-esc="type['event_type_id'][1]"/></a>
+                </t>
+            </t>
+        </div>
+    </xpath>
+</template>
+
+<!-- Index - Sidebar - Quotes -->
+<template id="index_sidebar_quotes" inherit_id="website_event.index_sidebar" active="True" customize_show="True" name="Quotes" priority="60">
+    <xpath expr="//div[@id='o_wevent_index_sidebar']" position="inside">
+        <div class="o_wevent_sidebar_block card">
             <div class="card-body">
-                <blockquote class="m-0">
-                    <p>
-                        <i>Write here a quote from one of your attendees.
-                        It gives confidence in your
-                        events.</i>
-                    </p>
-                    <small>Author</small>
+                <blockquote class="blockquote mb-0">
+                    <p><em>Write here a quote from one of your attendees. It gives confidence in your events.</em></p>
+                    <footer class="blockquote-footer">Author</footer>
                 </blockquote>
             </div>
         </div>
     </xpath>
 </template>
 
-<template id="event_right_country_event" inherit_id="website_event.event_right_column" active="False" customize_show="True" name="Country Events">
-    <xpath expr="//div[@id='right_column']" position="inside">
-        <div class="card mb-3">
-            <t t-call="website_event.s_country_events">
-                <t t-set="_classes" t-value="'card-body'"/>
-            </t>
+<!-- Index - Sidebar - Snippet - Country Events -->
+<template id="index_sidebar_country_event" inherit_id="website_event.index_sidebar" active="True" customize_show="True" name="Country Events" priority="70">
+    <xpath expr="//div[@id='o_wevent_index_sidebar']" position="inside">
+        <div class="o_wevent_sidebar_block">
+            <t t-call="website_event.s_country_events"/>
         </div>
     </xpath>
 </template>
 
-<template id="layout">
+<!-- Event -->
+<template id="layout" name="Event">
     <t t-call="website.layout">
-      <div id="wrap" class="js_event o_website_event">
-        <div class="container">
-            <ol t-if="not event.menu_id" id="event_menu" class="breadcrumb mt-2">
-                <li class="breadcrumb-item"><a href="/event">All Events</a></li>
-                <li t-if="event.event_type_id" class="breadcrumb-item">
-                    <a t-attf-href="/event?type=#{event.event_type_id.id}" t-esc="event.event_type_id.name"/>
-                </li>
-                <li t-if="event.country_id" class="breadcrumb-item">
-                    <a t-attf-href="/event?country=#{event.country_id.id}" t-esc="event.country_id.name"/>
-                </li>
-                <li class="breadcrumb-item active">
-                    <span t-field="event.name"/>
-                </li>
-            </ol>
-            <div t-else="" class="navbar navbar-expand-md navbar-light my-3">
-                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#o_wevent_navbar_event_content" aria-controls="o_wevent_navbar_event_content" aria-expanded="false" aria-label="Toggle navigation">
-                    <span class="navbar-toggler-icon"></span>
-                </button>
-                <div class="collapse navbar-collapse" id="o_wevent_navbar_event_content">
-                    <ul class="navbar-nav">
-                        <t t-foreach="event.menu_id.child_id" t-as="submenu">
-                            <t t-call="website.submenu">
-                                <t t-set="item_class" t-value="'nav-item'"/>
-                                <t t-set="link_class" t-value="'nav-link'"/>
-                            </t>
+        <div id="wrap" class="o_wevent_event js_event">
+            <t t-if="not event.menu_id">
+                <nav class="navbar navbar-light border-top shadow-sm d-print-none">
+                    <div class="container">
+                        <a href="/event" class="navbar-brand h4 my-0 mr-4">
+                            <i class="fa fa-long-arrow-left text-primary mr-2"/>All Events
+                        </a>
+                        <ul class="navbar-nav flex-row">
+                            <li class="nav-item mr-3">
+                                <a t-attf-href="/event?type=#{event.event_type_id.id}" t-if="event.event_type_id" class="nav-link">
+                                    <i class="fa fa-folder-open text-primary mr-2"/><t t-esc="event.event_type_id.name"/>
+                                </a>
+                            </li>
+                            <li class="nav-item mr-3">
+                                <a t-if="event.country_id" t-attf-href="/event?country=#{event.country_id.id}" class="nav-link">
+                                    <i class="fa fa-map-marker text-primary mr-2"/><t t-esc="event.country_id.name"/>
+                                </a>
+                            </li>
+                        </ul>
+                        <t t-call="website_event.events_search_box">
+                            <t t-set="_classes" t-value="'ml-auto'"/>
+                            <t t-set="_searches" t-value="searches"/>
                         </t>
-                    </ul>
-                </div>
-            </div>
-        </div>
-        <t t-raw="0"/>
-        <div class="alert alert-info alert-dismissable mt16 css_non_editable_mode_hidden o_not_editable" t-ignore="True" role="status">
-            <button type="button" class="close" data-dismiss="alert" aria-label="Close">&amp;times;</button>
-            Following content will appear on all events
+                    </div>
+                </nav>
+            </t>
+            <t t-else="">
+                <nav class="navbar navbar-light border-top shadow-sm navbar-expand-md">
+                    <div class="container">
+                        <a href="#" t-field="event.name" class="navbar-brand h4 my-0 mr-4"/>
+                        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#o_wevent_event_submenu" aria-controls="o_wevent_event_submenu" aria-expanded="false" aria-label="Toggle navigation">
+                            <span class="navbar-toggler-icon"></span>
+                        </button>
+                        <div id="o_wevent_event_submenu" class="collapse navbar-collapse">
+                            <ul class="navbar-nav w-100">
+                                <t t-foreach="event.menu_id.child_id" t-as="submenu">
+                                    <t t-call="website.submenu">
+                                        <t t-set="item_class" t-value="'nav-item'"/>
+                                        <t t-set="link_class" t-value="'nav-link'"/>
+                                    </t>
+                                </t>
+                            </ul>
+                        </div>
+                    </div>
+                </nav>
+            </t>
+            <t t-raw="0"/>
+            <div class="oe_structure" id="oe_structure_website_event_layout_1" t-att-data-editor-sub-message="'Following content will appear on all events.'"/>
         </div>
-        <div class="oe_structure" id="oe_structure_website_event_layout_1"/>
-      </div>
     </t>
 </template>
 
-<template id="event_details">
+<template id="event_details" name="Event Header">
     <t t-call="website_event.layout">
-        <div itemscope="itemscope" itemtype="http://schema.org/Event" class="container">
-            <div class="text-center">
-                <div class="mb-3 text-secondary"><b><h1 itemprop="name" t-field="event.name" class="d-inline"></h1></b> <small t-if="event.is_participating" class="badge badge-info">Participating</small></div>
-                <h5>
-                    <i class="fa fa-clock-o text-primary" role="img" aria-label="Start date" title="Start date"></i> <span itemprop="startDate" t-field="event.with_context(tz=event.date_tz).date_begin" t-options='{"hide_seconds":"True"}'/> to
-                    <span itemprop="endDate" t-field="event.with_context(tz=event.date_tz).date_end" t-options='{"hide_seconds":"True"}'/>
-                    <t t-if="event.date_tz">(<span t-field="event.date_tz"/>)</t>
-                </h5>
-                <h5 t-field="event.address_id" t-options='{
-                    "widget": "contact",
-                    "fields": ["city"]
-                }'/>
-            </div>
-            <div class="row my-4">
-                <t t-raw="0"/>
-            </div>
+        <div name="event" itemscope="itemscope" itemtype="http://schema.org/Event">
+            <t t-call="website.record_cover">
+                <t t-set="_record" t-value="event"/>
+                <t t-set="use_filters" t-value="True"/>
+                <t t-set="use_size" t-value="True"/>
+                <t t-set="use_text_size" t-value="True"/>
+                <t t-set="use_text_align" t-value="True"/>
+
+                <div class="container d-flex flex-column flex-grow-1 justify-content-around">
+                    <div class="o_wevent_event_title">
+                        <span t-if="event.is_participating" class="badge badge-success o_wevent_badge"><i class="fa fa-check mr-2"/>Registered</span>
+                        <h1 t-field="event.name" class="o_wevent_event_name" itemprop="name" placeholder="Event Title"/>
+                        <h2 t-field="event.subtitle" class="o_wevent_event_subtitle" placeholder="Event Subtitle"/>
+                    </div>
+                </div>
+                <div class="container mb-5">
+                    <t t-call="website_event.registration_template"/>
+                </div>
+            </t>
+            <t t-raw="0"/>
         </div>
     </t>
 </template>
 
-<template id="event_description_full">
+<!-- Event - Description -->
+<template id="event_description_full" name="Event Description">
     <t t-call="website_event.event_details">
-        <div class="col">
-            <div t-if="event.state == 'done' or not registrable" class="alert alert-info" role="status">Registration for this event is now closed.</div>
-            <t t-if="event.state != 'done' and registrable" t-call="website_event.registration_template"/>
-            <div class="clearfix"/>
-            <hr/>
-            <div itemprop="description" t-field="event.description"></div>
-            <div class="clearfix"/>
-            <ul class="list-unstyled" id="comment">
-                <li t-foreach="event.website_message_ids" t-as="comment" class="media mt-3">
-                    <div class="media-body">
-                        <t t-call="website.publish_management">
-                            <t t-set="object" t-value="comment"/>
-                            <t t-set="publish_edit" t-value="True"/>
-                        </t>
-                        <t t-raw="comment.body"/>
-                        <small class="float-right muted text-right">
-                            <div t-field="comment.author_id"/>
-                            <div t-field="comment.date" t-options='{"hide_seconds":"True"}'/>
-                        </small>
+        <section class="bg-200">
+            <div class="container">
+                <div class="row no-gutters mt-n5 pb-5">
+                    <!-- Description -->
+                    <div id="o_wevent_event_main_col" class="col-lg-8 bg-white rounded-left p-5 shadow-sm">
+                        <span t-field="event.description" itemprop="description"/>
                     </div>
-                </li>
-            </ul>
-        </div>
-        <div class="col-lg-4 css_noprint">
-            <div class="clearfix"/>
-            <t t-if="not event.is_online">
-                <div class="card bg-secondary" t-if="event.address_id">
-                    <h4 class="card-header">Where</h4>
-                    <div class="card-body">
-                        <t t-if="event.google_map_img()">
-                            <a t-att-href="event.google_map_link()" target="_BLANK">
-                               <img t-att-src="event.google_map_img()" width="100%%" alt="Google Maps"/>
-                            </a>
+                    <div class="col-lg-4 bg-light rounded-right shadow-sm d-print-none">
+                        <!-- Date & Time -->
+                        <div class="o_wevent_sidebar_block">
+                            <h6 class="o_wevent_sidebar_title">Date &amp; Time</h6>
+                            <span t-esc="event.with_context(tz=event.date_tz).date_begin" t-options="{'widget': 'date', 'format': 'EEEE'}"/>
+                            <h4 class="my-1" t-field="event.with_context(tz=event.date_tz).date_begin" t-options="{'widget': 'date', 'format': 'long'}" itemprop="startDate" t-att-datetime="event.date_begin"/>
+                            <t t-if="not event.is_one_day">Start -</t>
+                            <span t-field="event.with_context(tz=event.date_tz).date_begin" t-options="{'time_only': 'true', 'format': 'short'}"/>
+                            <t t-if="event.is_one_day">
+                                <i class="fa fa-long-arrow-right mx-1"/>
+                                <span t-field="event.with_context(tz=event.date_tz).date_end" t-options="{'time_only': 'true', 'format': 'short'}"/>
+                            </t>
+                            <t t-else="">
+                                <i class="fa fa-long-arrow-down d-block text-muted mx-3 my-2" style="font-size: 1.5rem"/>
+                                <span t-esc="event.with_context(tz=event.date_tz).date_begin" t-options="{'widget': 'date', 'format': 'EEEE'}"/>
+                                <h4 class="my-1" t-field="event.with_context(tz=event.date_tz).date_end" t-options="{'widget': 'date', 'format': 'long'}"/>
+                                <t t-if="not event.is_one_day">End -</t>
+                                <span t-field="event.with_context(tz=event.date_tz).date_end" t-options="{'time_only': 'true', 'format': 'short'}"/>
+                            </t>
+                            <!-- Timezone -->
+                            <small t-esc="event.date_tz" class="d-block my-3 text-muted"/>
+
+                            <div class="dropdown">
+                                <i class="fa fa-calendar mr-1"/>
+                                <a href="#" role="button" data-toggle="dropdown">Add to Calendar</a>
+                                <div class="dropdown-menu">
+                                    <a t-att-href="iCal_url" class="dropdown-item">iCal/Outlook</a>
+                                    <a t-att-href="google_url" class="dropdown-item" target="_blank">Google</a>
+                                </div>
+                            </div>
+                        </div>
+                        <!-- Location -->
+                        <t t-if="not event.is_online">
+                            <div t-if="event.address_id" class="o_wevent_sidebar_block">
+                                <h6 class="o_wevent_sidebar_title">Location</h6>
+                                <h4 t-field="event.address_id" class="" t-options='{
+                                    "widget": "contact",
+                                    "fields": ["name"]
+                                }'/>
+                                <div itemprop="location" class="mb-2" t-field="event.address_id" t-options='{
+                                    "widget": "contact",
+                                    "fields": ["address"],
+                                    "no_marker": True
+                                }'/>
+                                <div class="mb-3" t-field="event.address_id" t-options='{
+                                    "widget": "contact",
+                                    "fields": ["phone", "mobile", "email"]
+                                }'/>
+                                <i class="fa fa-map-marker fa-fw" role="img"/>
+                                <a t-att-href="event.google_map_link()" target="_blank">Get the direction</a>
+                            </div>
                         </t>
-                        <div t-field="event.address_id" class="text-secondary font-weight-bold" t-options='{
-                            "widget": "contact",
-                            "fields": ["name"]
-                        }'/>
-                        <a itemprop="location" t-att-href="event.google_map_link()" target="_BLANK" temprop="location" t-field="event.address_id" t-options='{
-                            "widget": "contact",
-                            "fields": ["address"]
-                        }'/>
-                        <div itemprop="location" t-field="event.address_id" t-options='{
-                            "widget": "contact",
-                            "fields": ["phone", "mobile", "email"]
-                        }'/>
-                    </div>
-                </div>
-            </t>
-            <div class="card bg-secondary my-3">
-                <h4 class="card-header">When</h4>
-                <div class="card-body">
-                    <i class="fa fa-clock-o"/>
-                    <span>From</span>
-                    <span t-field="event.with_context(tz=event.date_tz).date_begin" t-options='{"hide_seconds":"True"}'/>
-                    <hr/>
-                    <i class="fa fa-clock-o"/>
-                    <span>To</span>
-                    <span t-field="event.with_context(tz=event.date_tz).date_end" t-options='{"hide_seconds":"True"}'/>
-                </div>
-            </div>
-            <div class="card bg-secondary my-3" t-if="event.organizer_id">
-                <h4 class="card-header">Organizer</h4>
-                <div class="card-body">
-                    <div t-field="event.organizer_id" class="text-secondary font-weight-bold"/>
-                    <div itemprop="location" t-field="event.organizer_id" t-options='{
-                        "widget": "contact",
-                        "fields": ["phone", "mobile", "email"]
-                    }'/>
-                </div>
-            </div>
-            <div class="card bg-secondary my-3">
-                <h4 class="card-header">Social Stream</h4>
-                <div class="card-body">
-                    <t t-call="website_mail.follow"><t t-set="object" t-value="event"/></t>
-                    <div t-if="event.twitter_hashtag" class="mt16">
-                        <p><strong>Participate on Twitter</strong></p>
-                        <p class="text-muted">
-                            Find out what people see and say about this event,
-                            and join the conversation.
-                        </p>
-                        <p>
-                            <strong>Use this tag:</strong>
-                            <a t-att-href="'http://twitter.com/search?q=%23'+event.twitter_hashtag" target="_blank" class="badge badge-primary">#<span t-field="event.twitter_hashtag"/></a>
-                        </p>
+                        <!-- Organizer -->
+                        <div t-if="event.organizer_id" class="o_wevent_sidebar_block">
+                            <h6 class="o_wevent_sidebar_title">Organizer</h6>
+                            <h4 t-field="event.organizer_id"/>
+                            <div itemprop="location" t-field="event.organizer_id" t-options="{'widget': 'contact', 'fields': ['phone', 'mobile', 'email']}"/>
+                        </div>
+                        <!-- Social -->
+                        <div class="o_wevent_sidebar_block">
+                            <h6 class="o_wevent_sidebar_title">SHARE</h6>
+                            <p class="mb-2">Find out what people see and say about this event, and join the conversation.</p>
+                            <p t-if="event.twitter_hashtag" class="font-weight-bold">Hashtag: <a t-att-href="'http://twitter.com/search?q=%23'+event.twitter_hashtag" target="_blank">#<span t-field="event.twitter_hashtag"/></a></p>
+                            <t t-call="website.s_share">
+                                <t t-set="_no_title" t-value="True"/>
+                                <t t-set="_classes">o_wevent_sidebar_social mx-n1</t>
+                                <t t-set="_link_classes">o_wevent_social_link</t>
+                            </t>
+                        </div>
                     </div>
                 </div>
+                <ul class="list-unstyled" id="comment">
+                    <li t-foreach="event.website_message_ids" t-as="comment" class="media mt-3">
+                        <div class="media-body">
+                            <t t-call="website.publish_management">
+                                <t t-set="object" t-value="comment"/>
+                                <t t-set="publish_edit" t-value="True"/>
+                            </t>
+                            <t t-raw="comment.body"/>
+                            <small class="float-right muted text-right">
+                                <div t-field="comment.author_id"/>
+                                <div t-field="comment.date" t-options='{"hide_seconds":"True"}'/>
+                            </small>
+                        </div>
+                    </li>
+                </ul>
             </div>
-
-        </div>
+        </section>
     </t>
 </template>
 
-<!-- Registration Templates -->
+<!-- Event - Registration -->
 <template id="registration_template">
     <t t-set="tickets_available" t-value="event.seats_available or event.seats_availability == 'unlimited'"/>
     <t t-set="buy" t-value="tickets_available and event.state == 'confirm'"/>
-    <div itemscope="itemscope" itemprop="offers" itemtype="http://schema.org/AggregateOffer">
-        <form id="registration_form" t-attf-action="/event/#{slug(event)}/registration/new" method="post" class="card shadow" t-if="buy">
-            <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
-            <div class="card-header d-none d-lg-block bg-primary">
-                <div class="row">
-                    <div class="col-lg-4">
-                        <h5><b>Ticket Type</b></h5>
-                    </div>
-                    <div class="col-lg-4">
-                        <h5><b>End of Registration</b></h5>
-                    </div>
-                    <div class="col-lg-2">
-                        <h5><b>Price</b></h5>
-                    </div>
-                    <div class="col-lg-2">
-                        <h5><b>Quantity</b></h5>
-                    </div>
-                </div>
-            </div>
+    <form t-if="buy" id="registration_form" t-attf-action="/event/#{slug(event)}/registration/new" method="post" itemscope="itemscope" itemprop="offers" itemtype="http://schema.org/AggregateOffer" class="mb-5">
+        <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
+        <div id="o_wevent_tickets" class="bg-white rounded shadow-sm">
             <t t-id="tickets" t-call="website_event.ticket">
-                <t t-set="name">
-                    <span itemprop="name">Event Registration</span>
+                <t t-set="name">Registration</t>
+                <t t-set="price">
+                    <span content="0" itemprop="price" class="font-weight-bold text-uppercase">Free</span>
                 </t>
-                <t t-set="registration_end">
-                    <t t-if="event.date_begin">
-                        <span t-esc="event.date_begin_located"/>
-                    </t>
-                    <t t-if="not event.date_begin">
-                        <span>Unlimited</span>
+                <t t-if="event.date_begin">
+                    <t t-set="registration_end">
+                        End on <span t-field="event.with_context(tz=event.date_tz).date_begin" t-options="{'widget': 'date', 'format': 'medium'}"/>
                     </t>
                 </t>
-                <t t-set="price">
-                    <span itemprop="price" content="0">
-                        Free
-                    </span>
-                </t>
                 <t t-set="quantity">
-                    <select name="nb_register-0" class="form-control">
+                    <select name="nb_register-0" class="custom-select w-auto">
                         <t t-foreach="range(0, (event.seats_availability == 'unlimited' or event.seats_available &gt; 9) and 10 or event.seats_available+1)" t-as="nb">
                             <option t-esc="nb" t-att-selected="nb == 1 and 'selected'"/>
                         </t>
                     </select>
                 </t>
             </t>
-            <div class="card-footer">
-                <button type="submit" class="btn btn-primary a-submit float-right" t-attf-id="#{event.id}">Register Now</button>
-            </div>
-        </form>
-        <div t-if="not buy" class="alert alert-info" role="status">
-            <span t-if="event.state == 'draft'" itemprop="availability" content="http://schema.org/OutOfStock">
-                Event registration not yet started.
-            </span>
-            <span t-if="event.state != 'draft'" itemprop="availability" content="http://schema.org/Discontinued">
-                Event registration is closed.
-            </span>
-            <t t-if="request.env.user.has_group('event.group_event_manager')">
-                <a t-attf-href="/web#id=#{event.id}&amp;view_type=form&amp;model=event.event">
-                    <em><i class="fa fa-plus-circle" role="img" aria-label="Create" title="Create"></i>
-                    Configure and Launch Event Registration</em>
-                </a>
-            </t>
         </div>
+    </form>
+    <div t-if="not buy" class="alert alert-info mb-5" role="status">
+        <span t-if="event.state == 'draft'" itemprop="availability" content="http://schema.org/OutOfStock">
+            <b>Event registration not yet started.</b>
+        </span>
+        <span t-if="event.state != 'draft'" itemprop="availability" content="http://schema.org/Discontinued">
+            <b>Event registration is closed.</b>
+        </span>
+        <a t-if="request.env.user.has_group('event.group_event_manager')" t-attf-href="/web#id=#{event.id}&amp;view_type=form&amp;model=event.event" class="float-right">
+            <i class="fa fa-pencil mr-2" role="img" aria-label="Create" title="Create"/><em>Configure Event Registration</em>
+        </a>
     </div>
 </template>
 
 <template id="ticket" name="Ticket offer template">
-    <div class="d-lg-none card-header bg-primary">
-        <h5><strong>Ticket Type:</strong> <t t-raw="name"/></h5>
-        <small t-if="description">
-            <t t-raw="description"/>
-        </small>
-    </div>
-    <div class="card-body">
-        <div class="row" itemscope="itemscope" itemtype="http://schema.org/Offer">
-            <div class="col-lg-4 d-none d-lg-block" t-raw="name"/>
-            <div class="col-6 d-lg-none border-sm-bottom pb-1">
-                <h6>End of Registration</h6>
-            </div>
-            <div class="col-6 col-lg-4" itemprop="availabilityEnds" t-raw="registration_end"/>
-            <div class="col-6 d-lg-none">
-                <h6>Price</h6>
-            </div>
-            <div class="col-6 col-lg-2" t-raw="price"/>
-            <div class="col-6 d-lg-none">
-                <h6>Quantity</h6>
-            </div>
-            <div class="col-6 col-lg-2">
+    <div class="row p-2 pl-3">
+        <div class="col-lg-8 d-flex flex-columns align-items-center" itemscope="itemscope" itemtype="http://schema.org/Offer">
+            <h6 t-raw="name" itemprop="name" class="my-0 pr-3"/>
+            <div class="border-left border-right px-3"><t t-raw="price"/></div>
+            <small t-raw="registration_end" class="text-muted ml-3" itemprop="availabilityEnds"/>
+            <div class="ml-auto">
                 <t t-if="tickets_available">
+                    <span class="font-weight-bold align-middle pr-2">Qty</span>
                     <link itemprop="availability" content="http://schema.org/InStock"/>
                     <t t-raw="quantity"/>
                 </t>
                 <t t-else="">
-                    <span itemprop="availability" content="http://schema.org/SoldOut">
-                        Sold Out
+                    <span itemprop="availability" content="http://schema.org/SoldOut" class="text-danger">
+                        <i class="fa fa-ban mr-2"/>Sold Out
                     </span>
                 </t>
             </div>
         </div>
+        <div class="col-lg-4 pt-3 pt-lg-0 pl-2 pl-lg-0">
+            <button type="submit" class="btn btn-primary btn-block a-submit" t-attf-id="#{event.id}">Register</button>
+        </div>
+    </div>
+    <div t-if="description" class="row mx-0">
+        <div class="col-12 bg-200 rounded-bottom">
+            <p itemprop="description" t-raw="description" class="small my-2"/>
+        </div>
     </div>
 </template>
 
 <template id="registration_attendee_details" name="Registration Attendee Details">
-    <div role="dialog" id="modal_attendees_registration" class="modal fade" tabindex="-1">
-        <div class="modal-dialog modal-lg">
+    <div id="modal_attendees_registration" class="modal fade" tabindex="-1" role="dialog">
+        <div class="modal-dialog modal-lg" role="document">
             <form id="attendee_registration" t-attf-action="/event/#{slug(event)}/registration/confirm" method="post" class="js_website_submit_form">
                 <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
                 <div class="modal-content">
-                    <header class="modal-header">
-                        <h4 class="modal-title" id="myModalLabel"><strong>Attendees</strong></h4>
-                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">x</button>
-                    </header>
-                    <main class="modal-body">
-                        <div class="container">
-                            <t t-set="counter_type" t-value="1"/>
-                            <t t-set="counter" t-value="0"/>
-                            <t t-foreach="tickets" t-as="ticket">
-                                <h4 class="o_page_header">
-                                    <strong>
-                                        Ticket Type: <t t-esc="ticket['name']"/>
-                                        <t t-if="ticket['price'] == 0">(Free)</t>
-                                    </strong>
-                                </h4>
-                                <div class="row d-none d-lg-flex">
-                                    <div class="col-md">
-                                        <strong>Name</strong>
+                    <div class="modal-header align-items-center">
+                        <h4 class="modal-title">Attendees</h4>
+                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span>&amp;times;</span></button>
+                    </div>
+                    <t t-set="counter_type" t-value="1"/>
+                    <t t-set="counter" t-value="0"/>
+                    <t t-foreach="tickets" t-as="ticket">
+                        <t t-foreach="range(1, ticket['quantity'] + 1)" t-as="att_counter" name="attendee_loop">
+                            <t t-set="counter" t-value="counter + 1"/>
+                            <div class="modal-body bg-light border-bottom">
+                                <h5 class="mt-1 pb-2 border-bottom">Ticket #<span t-esc="counter"/> <small class="text-muted">- <span t-esc="ticket['name']"/></small></h5>
+                                <div class="row">
+                                    <div class="col-lg my-2">
+                                        <label>Name</label>
+                                        <input class="form-control" type="text" t-attf-name="#{counter}-name" required="This field is required"/>
                                     </div>
-                                    <div class="col-md">
-                                        <strong>Email</strong>
+                                    <div class="col-lg my-2">
+                                        <label>Email</label>
+                                        <input class="form-control" type="email" t-attf-name="#{counter}-email" required="This field is required"/>
                                     </div>
-                                    <div class="col-md">
-                                        <strong>Phone <small class='lbl_optional'>(optional)</small></strong>
+                                    <div class="col-lg my-2">
+                                        <label>Phone <small>(Optional)</small></label>
+                                        <input class="form-control" type="tel" t-attf-name="#{counter}-phone"/>
                                     </div>
+                                    <input class="d-none" type="text" t-attf-name="#{counter}-ticket_id" t-attf-value="#{ticket['id']}"/>
                                 </div>
-                                <t t-foreach="range(1, ticket['quantity'] + 1)" t-as="att_counter" name="attendee_loop">
-                                    <t t-set="counter" t-value="counter + 1"/>
-                                    <div class="row py-2 o_wevent_registration_list_attendees">
-                                        <div class="col-md">
-                                            <div class="mb-1 d-lg-none">
-                                                <strong>Name</strong>
-                                            </div>
-                                            <t t-set="attendee_placeholder">Attendee #%s</t>
-                                            <input class='form-control' type='text' t-attf-name="#{counter}-name" required="This field is required" t-att-placeholder="attendee_placeholder %counter"/>
-                                        </div>
-
-                                        <div class="col-md">
-                                            <div class="mt-1 d-lg-none">
-                                                <strong>Email</strong>
-                                            </div>
-                                            <div>
-                                                <input class='form-control' type='email' t-attf-name="#{counter}-email" required="This field is required"/>
-                                            </div>
-                                        </div>
-                                        <div class="col-md">
-                                            <div class="mt-1 d-lg-none">
-                                                <strong>Phone <small class='lbl_optional'>(optional)</small></strong>
-                                            </div>
-                                            <input class='form-control' type='tel' t-attf-name="#{counter}-phone"/>
-                                        </div>
-                                        <input class='d-none' type='text' t-attf-name="#{counter}-ticket_id" t-attf-value="#{ticket['id']}"/>
-                                    </div>
-                                </t>
-                                <t t-set="counter_type" t-value="counter_type + 1"/>
-                            </t>
-                        </div>
-                    </main>
-                    <footer class="modal-footer">
+                            </div>
+                        </t>
+                        <t t-set="counter_type" t-value="counter_type + 1"/>
+                    </t>
+                    <div class="modal-footer border-0 justify-content-between">
                         <button type="button" class="btn btn-secondary js_goto_event" data-dismiss="modal">Cancel</button>
-                        <button type="submit" class="btn btn-primary">Continue Registration</button>
-                    </footer>
+                        <button type="submit" class="btn btn-primary">Continue</button>
+                    </div>
                 </div>
             </form>
         </div>
@@ -523,75 +637,64 @@
 </template>
 
 <template id="registration_complete" name="Registration Completed">
-    <t t-call="website.layout">
-        <div class="container">
-            <h1 class="o_page_header mt-3">We are glad to confirm your registration to our event</h1>
-            <h4>Event Details</h4>
-            <div class="row mb-3">
+    <t t-call="website_event.layout">
+        <div class="container my-5">
+            <div class="row">
+                <div class="col-12">
+                    <h2>Registration confirmed!</h2>
+                    <table class="table table-striped my-4">
+                        <thead class="bg-secondary">
+                            <tr>
+                                <th>Name</th>
+                                <th>E-mail</th>
+                                <th>Phone</th>
+                                <th>Reference</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <t t-foreach="attendees" t-as="attendee">
+                                <tr>
+                                    <td><t t-if="attendee.name" t-esc="attendee.name"/><t t-else="">N/A</t></td>
+                                    <td><t t-if="attendee.email" t-esc="attendee.email"/><t t-else="">N/A</t></td>
+                                    <td><t t-if="attendee.phone" t-esc="attendee.phone"/><t t-else="">N/A</t></td>
+                                    <td><t t-esc="attendee.id"/></td>
+                                </tr>
+                            </t>
+                        </tbody>
+                    </table>
+                </div>
                 <div class="col-lg-8">
-                    <div class="card mb-3">
-                        <div class="card-body">
-                            <small class="badge badge-primary float-right" t-if="event.event_type_id">
-                                <i class="fa fa-ticket" role="img" aria-label="Event type" title="Event type"/> <span t-field="event.event_type_id"/>
-                            </small>
-                            <h3><a t-attf-href="/event/#{slug(event)}" class="text-secondary"><b><t t-esc="event.name"/></b></a></h3>
-                            <h6><i class="fa fa-clock-o text-primary" role="img" aria-label="Start date" title="Start date"></i> <span itemprop="startDate" t-esc="event.date_begin_located"> </span> <small>to</small> <span itemprop="endDate" t-esc="event.date_end_located"> </span></h6>
-                            <div id="add_to_calendar" class="mt-4">
-                                <a role="button" class="btn btn-primary" t-att-href="iCal_url">
-                                    <i class="fa fa-fw fa-calendar"/> Add to iCal/Outlook
-                                </a>
-                                <a role="button" class="btn btn-primary" t-att-href="google_url" target='_blank'>
-                                    <i class="fa fa-fw fa-calendar"/> Add to Google Calendar
-                                </a>
-                            </div>
-                        </div>
+                    <h3><a t-attf-href="/event/#{slug(event)}"><t t-esc="event.name"/></a></h3>
+                    <p><b>Start</b> <span itemprop="startDate" t-esc="event.date_begin_located"/><br/> <b>End</b> <span itemprop="endDate" t-esc="event.date_end_located"/></p>
+                    <div id="add_to_calendar" class="mt-4">
+                        <a role="button" class="btn btn-primary" t-att-href="iCal_url">
+                            <i class="fa fa-fw fa-calendar"/> Add to iCal/Outlook
+                        </a>
+                        <a role="button" class="btn btn-primary" t-att-href="google_url" target='_blank'>
+                            <i class="fa fa-fw fa-calendar"/> Add to Google Calendar
+                        </a>
                     </div>
                 </div>
                 <div class="col-lg-4">
-                    <div class="card bg-secondary">
-                        <div class="card-body">
-                            <h4 t-field="event.address_id" class="text-secondary font-weight-bold" t-options='{
-                                "widget": "contact",
-                                "fields": ["name"]
-                                }'/>
-                            <a itemprop="location" t-att-href="event.google_map_link()" target="_BLANK" temprop="location" t-field="event.address_id" t-options='{
-                                "widget": "contact",
-                                "fields": ["address"]
-                                }'/>
-                            <div itemprop="location" t-field="event.address_id" t-options='{
-                                "widget": "contact",
-                                "fields": ["phone", "mobile", "email"]
-                                }'/>
-                        </div>
-                    </div>
+                    <h4 t-field="event.address_id" class="text-secondary font-weight-bold" t-options='{
+                        "widget": "contact",
+                        "fields": ["name"]
+                        }'/>
+                    <a itemprop="location" t-att-href="event.google_map_link()" target="_BLANK" temprop="location" t-field="event.address_id" t-options='{
+                        "widget": "contact",
+                        "fields": ["address"]
+                        }'/>
+                    <div itemprop="location" t-field="event.address_id" t-options='{
+                        "widget": "contact",
+                        "fields": ["phone", "mobile", "email"]
+                        }'/>
                 </div>
             </div>
-            <h4>Your registration</h4>
-            <table class='table table-striped'>
-                <thead class="bg-secondary">
-                    <tr>
-                        <th>Reference</th>
-                        <th>Name</th>
-                        <th>E-mail</th>
-                        <th>Phone</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <t t-foreach="attendees" t-as="attendee">
-                        <tr>
-                            <td><t t-esc="attendee.id"/></td>
-                            <td><i class="fa fa-user text-primary" role="img" aria-label="Name" title="Name"/> <t t-if='attendee.name'><t t-esc="attendee.name"/></t><t t-if='not attendee.name'>N/A</t></td>
-                            <td><i class="fa fa-envelope text-primary" role="img" aria-label="Email" title="Email"/> <t t-if='attendee.email'><t t-esc="attendee.email"/></t><t t-if='not attendee.email'>N/A</t></td>
-                            <td><i class="fa fa-phone text-primary " role="img" aria-label="Phone" title="Phone"/> <t t-if='attendee.phone'><t t-esc="attendee.phone"/></t><t t-if='not attendee.phone'>N/A</t></td>
-                        </tr>
-                    </t>
-                </tbody>
-            </table>
         </div>
     </t>
 </template>
 
-<template id="404">
+<template id="404" name="Event 404">
     <t t-call="website.layout">
         <div id="wrap">
             <div class="oe_structure oe_empty">
@@ -605,45 +708,52 @@
     </t>
 </template>
 
+<!-- Multipage event - Default template when creating a new page -->
 <template id="default_page">
     <t t-call="website.layout">
         <div class="oe_structure oe_empty"/>
     </t>
 </template>
 
+<!-- Multipage event - Default template for the Introduction page -->
 <template id="template_intro">
     <t t-call="website_event.layout">
-        <section class="container">
-            <h1 class="o_page_header">Event Introduction</h1>
+        <section>
+            <div class="container">
+                <div class="row">
+                    <div class="col-lg-12 s_title pt48 pb48" data-name="Title">
+                        <h1>Introduction</h1>
+                    </div>
+                </div>
+            </div>
         </section>
         <div class="oe_structure oe_empty" id="oe_structure_website_event_intro_1"/>
     </t>
 </template>
 
+<!-- Multipage event - Default template for the Location page -->
 <template id="template_location">
     <t t-call="website_event.layout">
         <div class="oe_structure" id="oe_structure_website_event_location_1"/>
-        <section class="container">
-            <h1 class="o_page_header">Event Location</h1>
-            <div class="row justify-content-center">
-                <div class="col-lg-6">
-                    <div class="card">
-                        <div class="card-body text-center">
-                            <h3 class="text-secondary" t-field="event.address_id" t-options='{
-                                "widget": "contact",
-                                "fields": ["name"]
-                            }'/>
-                            <h5>
-                                <a itemprop="location" t-att-href="event.google_map_link()" target="_BLANK" temprop="location" t-field="event.address_id" t-options='{
-                                    "widget": "contact",
-                                    "fields": ["address"]
-                                }'/>
-                            </h5>
-                            <h5 t-field="event.address_id" t-options='{
-                                "widget": "contact",
-                                "fields": ["phone", "mobile"]
-                            }'/>
-                        </div>
+        <section class="pt32 pb32">
+            <div class="container">
+                <div class="row">
+                    <div class="col-12">
+                        <h1 class="o_page_header mb-3">Event Location</h1>
+                        <h4 class="mb-3" t-field="event.address_id" t-options='{
+                            "widget": "contact",
+                            "fields": ["name"],
+                        }'/>
+                        <div class="mb-3" t-field="event.address_id" t-options='{
+                            "widget": "contact",
+                            "fields": ["address"],
+                            "no_marker": True
+                        }'/>
+                        <div class="mb-3" t-field="event.address_id" t-options='{
+                            "widget": "contact",
+                            "fields": ["phone", "mobile", "email"],
+                            "no_marker": True
+                        }'/>
                     </div>
                 </div>
             </div>
@@ -662,9 +772,10 @@
     </xpath>
 </template>
 
+<!-- User Navbar - Edit Options -->
 <template id="event_edit_options" inherit_id="website.user_navbar" name="Edit Event Options">
     <xpath expr="//li[@id='edit-page-menu']" position="after">
-        <t t-if="main_object._name == 'event.event'" t-set="action" t-value="'event.action_event_view'" />
+        <t t-if="main_object._name == 'event.event'" t-set="action" t-value="'event.action_event_view'"/>
     </xpath>
 </template>