[IMP] event, website_event_track: make email templates bioutifoul

Purpose of this commit is to enhance quality of templates proposed by Odoo
and make them use notification layout when send by emails. Those emails
are cleaner and more up to date compared to other emails.

Including
  * registration and reminder templates that are send directly by email
    are improved to directly include the notification layout in the body
    itself;
  * improve layout of badge template;
  * use notification layout when sending badge;
  * improve layout of track confirmation template;
  * use notification layout when sending templates based on stage change;

This commit is related to task ID 51122 (and PR #24052).

1 files changed, 281 insertions, 225 deletions

diff --git a/addons/event/data/email_template_data.xml b/addons/event/data/email_template_data.xml
index b7788cba9a3..d110d05f765 100644
--- a/addons/event/data/email_template_data.xml
+++ b/addons/event/data/email_template_data.xml
@@ -5,113 +5,130 @@
         <record id="event_registration_mail_template_badge" model="mail.template">
             <field name="name">Event: Registration Badge</field>
             <field name="model_id" ref="event.model_event_registration"/>
-            <field name="email_from">${(object.event_id.organizer_id.email or object.event_id.user_id.email or '')|safe}</field>
-            <field name="email_to" >${object.partner_id.email or object.email|safe}</field>
-            <field name="lang">${object.partner_id.lang}</field>
             <field name="subject">Your badge for ${object.event_id.name}</field>
-            <field name="auto_delete" eval="True"/>
+            <field name="email_from">${(object.event_id.organizer_id.email or object.event_id.user_id.email or '')|safe}</field>
+            <field name="email_to">${('"%s" &lt;%s&gt;' % (object.partner_id.name or object.name, object.partner_id.email or object.email)) | safe}</field>
+            <field name="body_html" type="html">
+<div>
+    Dear ${object.name},<br/>
+    Thank you for your inquiry.<br/>
+    Here is your badge for the event ${object.event_id.name}.<br/>
+    If you have any questions, please let us know.
+    <br/><br/>
+    Thank you,<br/>
+    % if object.event_id.user_id and object.event_id.user_id.signature:
+        ${object.event_id.user_id.signature | safe}
+    % endif
+</div></field>
             <field name="report_template" ref="report_event_registration_badge"/>
             <field name="report_name">badge_of_${(object.event_id.name or '').replace('/','_')}</field>
-            <field name="body_html"><![CDATA[
-<p>Dear ${object.name},</p>
-<p>Thank you for your inquiry.</p>
-<p>Here is your badge for the event ${object.event_id.name}.</p>
-<p>If you have any questions, please let us know.</p>
-<p>Best regards,</p>]]></field>
+            <field name="lang">${object.partner_id.lang}</field>
+            <field name="auto_delete" eval="True"/>
         </record>
 
         <record id="event_subscription" model="mail.template">
             <field name="name">Event: Registration</field>
             <field name="model_id" ref="event.model_event_registration"/>
+            <field name="subject">Your registration at ${object.event_id.name}</field>
             <field name="email_from">${(object.event_id.organizer_id.email or object.event_id.user_id.email or '')|safe}</field>
-            <field name="email_to" >${object.partner_id.email or object.email|safe}</field>
-            <field name="lang">${object.partner_id.lang}</field>
+            <field name="email_to">${('"%s" &lt;%s&gt;' % (object.partner_id.name or object.name, object.partner_id.email or object.email)) | safe}</field>
             <field name="reply_to" eval="False"/>
-            <field name="subject">Your registration at ${object.event_id.name}</field>
-            <field name="body_html"><![CDATA[
-<div style="background:#F3F5F6;color:#515166;padding:25px 0px;font-family:Arial,Helvetica,sans-serif;font-size:14px;">
+            <field name="body_html" type="html">
+<table border="0" cellpadding="0" cellspacing="0" style="padding-top: 16px; background-color: #F1F1F1; font-family:Verdana, Arial,sans-serif; color: #454748; width: 100%; border-collapse:separate;"><tr><td align="center">
 % set date_begin = format_tz(object.event_id.date_begin, tz='UTC', format='%Y%m%dT%H%M%SZ')
 % set date_end = format_tz(object.event_id.date_end, tz='UTC', format='%Y%m%dT%H%M%SZ')
-    <table style="width:600px;margin:5px auto;">
-        <tbody>
-            <tr>
-                <td>
-                    <a href="/">
-                        <img src="/logo" alt="${object.company_id.name}" style="vertical-align:baseline;max-width:100px;" />
-                    </a>
-                </td>
-                <td style="text-align:right;vertical-align:middle;">
-                    % if 'website_url' in object.event_id and object.event_id.website_url:
-                        <a href="${object.event_id.website_url}" style="background-color: #1abc9c; padding: 12px; font-weight: 12px; text-decoration: none; color: #fff; border-radius: 5px; font-size:16px;">View Event</a>
-                    % endif
-                </td>
-            </tr>
-        </tbody>
-    </table>
-    <table style="width:600px;margin:0px auto;background:white;border:1px solid #e1e1e1;">
-        <tbody>
-            <tr>
-                <td style="padding:15px 20px 0px 20px; font-size:16px; font-weight:300;">
-                    <p style="font-size:16px;">
-                        Hi,
-                    </p><p style="font-size:16px;">
-                        We are happy to confirm your registration to the event:
-                    </p>
-                    <ul>
-                        <li>Event: 
+<table border="0" cellpadding="0" cellspacing="0" width="590" style="padding: 16px; background-color: white; color: #454748; border-collapse:separate;">
+<tbody>
+    <!-- HEADER -->
+    <tr>
+        <td align="center" style="min-width: 590px;">
+            <table width="590" border="0" cellpadding="0" cellspacing="0" style="min-width: 590px; background-color: white; padding: 0px 8px 0px 8px; border-collapse:separate;">
+                <tr><td valign="middle">
+                    <span style="font-size: 10px;">Your registration</span><br/>
+                    <span style="font-size: 20px; font-weight: bold;">
+                        ${object.name}
+                    </span>
+                </td><td valign="middle" align="right">
+                    <img src="${'/logo.png?company=%s' % object.company_id.id}" style="padding: 0px; margin: 0px; height: auto; width: 80px;" alt="${'%s' % object.company_id.name}"/>
+                </td></tr>
+                <tr><td colspan="2" style="text-align:center;">
+                  <hr width="100%" style="background-color:rgb(204,204,204);border:medium none;clear:both;display:block;font-size:0px;min-height:1px;line-height:0; margin:16px 0px 16px 0px;"/>
+                </td></tr>
+            </table>
+        </td>
+    </tr>
+    <!-- EVENT DESCRIPTION -->
+    <tr>
+        <td align="center" style="min-width: 590px;">
+            <table width="590" border="0" cellpadding="0" cellspacing="0" style="min-width: 590px; background-color: white; padding: 0px 8px 0px 8px; border-collapse:separate;">
+                <tr><td valign="top" style="font-size: 14px;">
+                    <div>
+                        Hello ${object.name or ''},<br/>
+                        We are happy to confirm your registration to the event
                         % if 'website_url' in object.event_id and object.event_id.website_url:
                             <a href="${object.event_id.website_url}" style="color:#875A7B;text-decoration:none;">${object.event_id.name}</a>
                         % else:
                             <strong>${object.event_id.name}</strong>
                         % endif
-                        </li>
-                        <li>Attendee: ${object.name}</li>
-                    </ul>
-                    <p style="font-size:16px;">
-                        See you soon,
-                    </p>
-                    <p style="font-size:16px; margin-bottom: 30px">
-                        <i>
-                           -- <br/>
+                        for attendee ${object.name}.
+                    </div>
+                    % if 'website_url' in object.event_id and object.event_id.website_url:
+                    <div style="margin: 16px 0px 16px 0px;">
+                        <a href="${object.event_id.website_url}"
+                            style="background-color: #875A7B; padding: 8px 16px 8px 16px; text-decoration: none; color: #fff; border-radius: 5px; font-size:16px;">View Event</a><br />
+                    </div>
+                    % endif
+                    <div>
+                        See you soon,<br/>
+                        <span style="color: #454748;">
+                        -- <br/>
                         % if object.event_id.organizer_id:
                             ${object.event_id.organizer_id.name}
                         % else:
                             The organizers.
                         % endif
-                        </i>
-                    </p>
-                </td>
-            </tr>
-            <tr>
-                <td style="padding:15px 20px 0px 20px;">
-                    <table style="width:100%;border-top:1px solid #e1e1e1;">
+                        </span>
+                    </div>
+                </td></tr>
+                <tr><td style="text-align:center;">
+                  <hr width="100%" style="background-color:rgb(204,204,204);border:medium none;clear:both;display:block;font-size:0px;min-height:1px;line-height:0; margin: 16px 0px 16px 0px;"/>
+                </td></tr>
+            </table>
+        </td>
+    </tr>
+    <!-- DETAILS -->
+    <tr>
+        <td align="center" style="min-width: 590px;">
+            <table width="590" border="0" cellpadding="0" cellspacing="0" style="min-width: 590px; background-color: white; padding: 0px 8px 0px 8px; border-collapse:separate;">
+                <tr><td valign="top" style="font-size: 14px;">
+                    <table style="width:100%;">
                         <tr>
-                            <td style="padding:25px 0px;vertical-align:top;">
-                                <img src="/web_editor/font_to_img/61555/rgb(81,81,102)/34" style="padding:4px;max-width:inherit;" height="34">
+                            <td style="vertical-align:top;">
+                                <img src="/web_editor/font_to_img/61555/rgb(81,81,102)/34" style="padding:4px;max-width:inherit;" height="34"/>
                             </td>
-                            <td style="padding:25px 10px 25px 10px;width:50%;line-height:20px;vertical-align:top;">
+                            <td style="padding: 0px 10px 0px 10px;width:50%;line-height:20px;vertical-align:top;">
                                 <div><strong>From</strong> ${object.event_id.date_begin_located}</div>
                                 <div><strong>To</strong> ${object.event_id.date_end_located}</div>
                                 <div style="font-size:12px;color:#9e9e9e"><i><strong>TZ</strong> ${object.event_id.date_tz}</i></div>
                             </td>
                             % if object.event_id.address_id.country_id.name:
-                                <td style="padding:25px 0px;vertical-align:top;">
-                                    <img src="/web_editor/font_to_img/61505/rgb(81,81,102)/34" style="padding:4px;max-width:inherit;" height="34">
+                                <td style="vertical-align:top;">
+                                    <img src="/web_editor/font_to_img/61505/rgb(81,81,102)/34" style="padding:4px;max-width:inherit;" height="34"/>
                                 </td>
-                                <td style="padding:30px 10px 25px 10px;width:50%;vertical-align:top;">
+                                <td style="padding: 0px 10px 0px 10px;width:50%;vertical-align:top;">
                                     % set location = ''
                                     % if object.event_id.address_id.name:
-                                        <p style="margin:0px 0px 0px 0px;">${object.event_id.address_id.name}</p>
+                                        <div>${object.event_id.address_id.name}</div>
                                     % endif
                                     % if object.event_id.address_id.street:
-                                        <p style="margin:0px 0px 0px 0px;">${object.event_id.address_id.street}</p>
+                                        <div>${object.event_id.address_id.street}</div>
                                         % set location = object.event_id.address_id.street
                                     % endif
                                     % if object.event_id.address_id.street2:
-                                        <p style="margin:0px 0px 0px 0px;">${object.event_id.address_id.street2}</p>
+                                        <div>${object.event_id.address_id.street2}</div>
                                         % set location = '%s, %s' % (location, object.event_id.address_id.street2)
                                     % endif
-                                    <p style="margin:0px 0px 0px 0px;">
+                                    <div>
                                     % if object.event_id.address_id.city:
                                         ${object.event_id.address_id.city},
                                         % set location = '%s, %s' % (location, object.event_id.address_id.city)
@@ -124,163 +141,189 @@
                                         ${object.event_id.address_id.zip}
                                         % set location = '%s, %s' % (location, object.event_id.address_id.zip)
                                     % endif
-                                    </p>
+                                    </div>
                                     % if object.event_id.address_id.country_id.name:
-                                        <p style="margin:0px 0px 0px 0px;">${object.event_id.address_id.country_id.name}</p>
+                                        <div>${object.event_id.address_id.country_id.name}</div>
                                         % set location = '%s, %s' % (location, object.event_id.address_id.country_id.name)
                                     % endif
                                 </td>
                             % endif
                         </tr>
                     </table>
-                    % if object.event_id.organizer_id:
-                        <table style="width:100%;border-top:1px solid #e1e1e1;">
-                            <tr>
-                                <td style="padding:10px 0px 25px 0px;">
-                                    <h2 style="font-weight:300;margin:10px 0px">Questions about this event?</h2>
-                                    <p>Please contact the organizer:</p>
-                                    <ul>
-                                        <li>${object.event_id.organizer_id.name}</li>
-                                        % if object.event_id.organizer_id.email
-                                            <li>Mail: <a href="mailto:${object.event_id.organizer_id.email}" style="text-decoration:none;color:#875A7B;">${object.event_id.organizer_id.email}</a></li>
-                                        % endif
-                                        % if object.event_id.organizer_id.phone
-                                            <li>Phone: ${object.event_id.organizer_id.phone}</li>
-                                        % endif
-                                    </ul>
-
-                                </td>
-                            </tr>
-                        </table>
-                    % endif
+                </td></tr>
+                <tr><td style="text-align:center;">
+                  <hr width="100%" style="background-color:rgb(204,204,204);border:medium none;clear:both;display:block;font-size:0px;min-height:1px;line-height:0; margin: 16px 0px 16px 0px;"/>
+                </td></tr>
+                % if object.event_id.organizer_id:
+                <tr><td valign="top" style="font-size: 14px;">
+                    <div>
+                        <span style="font-weight:300;margin:10px 0px">Questions about this event?</span>
+                        <div>Please contact the organizer:</div>
+                        <ul>
+                            <li>${object.event_id.organizer_id.name}</li>
+                            % if object.event_id.organizer_id.email
+                                <li>Mail: <a href="mailto:${object.event_id.organizer_id.email}" style="text-decoration:none;color:#875A7B;">${object.event_id.organizer_id.email}</a></li>
+                            % endif
+                            % if object.event_id.organizer_id.phone
+                                <li>Phone: ${object.event_id.organizer_id.phone}</li>
+                            % endif
+                        </ul>
+                    </div>
+                </td></tr>
+                % endif
+                <tr><td valign="top" style="font-size: 14px;">
                     <table style="width:100%;border-top:1px solid #e1e1e1;">
                         <tr>
                             <td style="padding:25px 0px;">
                                 <strong>Add this event to your calendar</strong>
-                                <a href="https://www.google.com/calendar/render?action=TEMPLATE&text=${object.event_id.name}&dates=${date_begin}/${date_end}&location=${location}" style="padding:3px 5px;border:1px solid #875A7B;color:#875A7B;text-decoration:none;border-radius:3px;" target="new"><img src="/web_editor/font_to_img/61525/rgb(135,90,123)/16" style="vertical-align:middle;" height="16"> Google</a>
-                                <a href="https://bay02.calendar.live.com/calendar/calendar.aspx?rru=addevent&summary=${object.event_id.name}&dtstart=${date_begin}&dtend=${date_end}&location=${location}" style="padding:3px 5px;border:1px solid #875A7B;color:#875A7B;text-decoration:none;border-radius:3px;" target="new"><img src="/web_editor/font_to_img/61525/rgb(135,90,123)/16" style="vertical-align:middle;" height="16"> Outlook</a>
-                                <a href="https://calendar.yahoo.com/?v=60&view=d&type=20&title=${object.event_id.name}&in_loc=${location}&st=${format_tz(object.event_id.date_begin, tz='UTC', format='%Y%m%dT%H%M%S')}&et=${format_tz(object.event_id.date_end, tz='UTC', format='%Y%m%dT%H%M%S')}" style="padding:3px 5px;border:1px solid #875A7B;color:#875A7B;text-decoration:none;border-radius:3px;" target="new"><img src="/web_editor/font_to_img/61525/rgb(135,90,123)/16" style="vertical-align:middle;" height="16"> Yahoo</a>
+                                <a href="https://www.google.com/calendar/render?action=TEMPLATE&amp;text=${object.event_id.name}&amp;dates=${date_begin}/${date_end}&amp;location=${location}" style="padding:3px 5px;border:1px solid #875A7B;color:#875A7B;text-decoration:none;border-radius:3px;" target="new"><img src="/web_editor/font_to_img/61525/rgb(135,90,123)/16" style="vertical-align:middle;" height="16"/> Google</a>
+                                <a href="https://bay02.calendar.live.com/calendar/calendar.aspx?rru=addevent&amp;summary=${object.event_id.name}&amp;dtstart=${date_begin}&amp;dtend=${date_end}&amp;location=${location}" style="padding:3px 5px;border:1px solid #875A7B;color:#875A7B;text-decoration:none;border-radius:3px;" target="new"><img src="/web_editor/font_to_img/61525/rgb(135,90,123)/16" style="vertical-align:middle;" height="16"/> Outlook</a>
+                                <a href="https://calendar.yahoo.com/?v=60&amp;view=d&amp;type=20&amp;title=${object.event_id.name}&amp;in_loc=${location}&amp;st=${format_tz(object.event_id.date_begin, tz='UTC', format='%Y%m%dT%H%M%S')}&amp;et=${format_tz(object.event_id.date_end, tz='UTC', format='%Y%m%dT%H%M%S')}" style="padding:3px 5px;border:1px solid #875A7B;color:#875A7B;text-decoration:none;border-radius:3px;" target="new">
+                                    <img src="/web_editor/font_to_img/61525/rgb(135,90,123)/16" style="vertical-align:middle;" height="16"/> Yahoo</a>
                             </td>
                         </tr>
                     </table>
-                </td>
-            </tr>
-        </tbody>
+                </td></tr>
+                <tr><td style="text-align:center;">
+                  <hr width="100%" style="background-color:rgb(204,204,204);border:medium none;clear:both;display:block;font-size:0px;min-height:1px;line-height:0; margin: 16px 0px 16px 0px;"/>
+                </td></tr>
+                % if object.event_id.address_id:
+                <tr><td valign="top" style="font-size: 14px;">
+                    <table style="width:100%;"><tr><td>
+                        <div>
+                            <a href="https://maps.google.com/maps?q=${location}" target="new">
+                                <img src="http://maps.googleapis.com/maps/api/staticmap?autoscale=1&amp;size=598x200&amp;maptype=roadmap&amp;format=png&amp;visual_refresh=true&amp;markers=size:mid%7Ccolor:0xa5117d%7Clabel:%7C${location}" style="vertical-align:bottom; width: 100%;"/>
+                            </a>
+                        </div>
+                    </td></tr></table>
+                </td></tr>
+                % endif
+            </table>
+        </td>
+    </tr>
+</tbody>
+</table>
+</td></tr>
+<!-- FOOTER BY -->
+<tr><td align="center" style="min-width: 590px;">
+    <table width="590" border="0" cellpadding="0" cellspacing="0" style="min-width: 590px; background-color: #F1F1F1; color: #454748; padding: 8px; border-collapse:separate;">
+      <tr><td style="text-align: center; font-size: 14px;">
+        Sent by <a target="_blank" href="object.company_id.website" style="color: #875A7B;">${object.company_id.name}</a>
+        % if 'website_url' in object.event_id and object.event_id.website_url:
+        <br />
+        Discover <a href="/event" style="text-decoration:none;color:#717188;">all our events</a>.
+        % endif
+      </td></tr>
     </table>
-    % if object.event_id.address_id:
-    <div style="width:598px;margin:0px auto;border-left:1px solid #dddddd;border-right:1px solid #dddddd;border-bottom:1px solid #dddddd;">
-        <a href="https://maps.google.com/maps?q=${location}" target="new">
-            <img src="http://maps.googleapis.com/maps/api/staticmap?autoscale=1&size=598x200&maptype=roadmap&format=png&visual_refresh=true&markers=size:mid%7Ccolor:0xa5117d%7Clabel:%7C${location}" style="vertical-align:bottom;" />
-        </a>
-    </div>
-    % endif
-    <table style="width:600px;margin:0px auto;text-align:center;">
-        <tbody>
-            <tr>
-                <td style="padding-top:10px;font-size: 12px;">
-                    <div>Sent by ${object.company_id.name}</div>
-                    % if 'website_url' in object.event_id and object.event_id.website_url:
-                    <div>
-                        Discover <a href="/event" style="text-decoration:none;color:#717188;">all our events</a>.
-                    </div>
-                    % endif
-                </td>
-            </tr>
-        </tbody>
-    </table>
-</div>
-            ]]></field>
+</td></tr>
+</table>
+            </field>
+            <field name="lang">${object.partner_id.lang}</field>
         </record>
 
         <record id="event_reminder" model="mail.template">
             <field name="name">Event: Reminder</field>
             <field name="model_id" ref="event.model_event_registration"/>
+            <field name="subject">${object.event_id.name}: ${object.get_date_range_str()}</field>
             <field name="email_from">${(object.event_id.organizer_id.email or object.event_id.user_id.email or '')|safe}</field>
-            <field name="email_to" >${object.partner_id.email or object.email|safe}</field>
-            <field name="lang">${object.partner_id.lang}</field>
+            <field name="email_to">${('"%s" &lt;%s&gt;' % (object.partner_id.name or object.name, object.partner_id.email or object.email)) | safe}</field>
             <field name="reply_to" eval="False"/>
-            <field name="subject">${object.event_id.name}: ${object.get_date_range_str()}</field>
-            <field name="body_html"><![CDATA[
-<div style="background:#F3F5F6;color:#515166;padding:25px 0px;font-family:Arial,Helvetica,sans-serif;font-size:14px;">
+            <field name="body_html" type="html">
+<table border="0" cellpadding="0" cellspacing="0" style="padding-top: 16px; background-color: #F1F1F1; font-family:Verdana, Arial,sans-serif; color: #454748; width: 100%; border-collapse:separate;"><tr><td align="center">
 % set date_begin = format_tz(object.event_id.date_begin, tz='UTC', format='%Y%m%dT%H%M%SZ')
 % set date_end = format_tz(object.event_id.date_end, tz='UTC', format='%Y%m%dT%H%M%SZ')
-    <table style="width:600px;margin:5px auto;">
-        <tbody>
-            <tr>
-                <td>
-                    <a href="/">
-                        <img src="/logo" alt="${object.company_id.name}" style="vertical-align:baseline;max-width:100px;" />
-                    </a>
-                </td>
-                <td style="text-align:right;vertical-align:middle;">
-                    % if 'website_url' in object.event_id and object.event_id.website_url:
-                        <a href="${object.event_id.website_url}" style="background-color: #1abc9c; padding: 12px; font-weight: 12px; text-decoration: none; color: #fff; border-radius: 5px; font-size:16px;">View Event</a>
-                    % endif
-                </td>
-            </tr>
-        </tbody>
-    </table>
-    <table style="width:600px;margin:0px auto;background:white;border:1px solid #e1e1e1;">
-        <tbody>
-            <tr>
-                <td style="padding:15px 20px 0px 20px; font-size:16px;">
-                    <p style="font-size:16px;">
-                        Hello,
-                    </p>
-                    <p style="font-size:16px;">
+<table border="0" cellpadding="0" cellspacing="0"  width="590" style="padding: 16px; background-color: white; color: #454748; border-collapse:separate;">
+<tbody>
+    <!-- HEADER -->
+    <tr>
+        <td align="center" style="min-width: 590px;">
+            <table width="590" border="0" cellpadding="0" cellspacing="0" style="min-width: 590px; background-color: white; padding: 0px 8px 0px 8px; border-collapse:separate;">
+                <tr><td valign="middle">
+                    <span style="font-size: 10px;">Your registration</span><br/>
+                    <span style="font-size: 20px; font-weight: bold;">
+                        ${object.name}
+                    </span>
+                </td><td valign="middle" align="right">
+                    <img src="${'/logo.png?company=%s' % object.company_id.id}" style="padding: 0px; margin: 0px; height: auto; width: 80px;" alt="${'%s' % object.company_id.name}"/>
+                </td></tr>
+                <tr><td colspan="2" style="text-align:center;">
+                  <hr width="100%" style="background-color:rgb(204,204,204);border:medium none;clear:both;display:block;font-size:0px;min-height:1px;line-height:0; margin:16px 0px 16px 0px;"/>
+                </td></tr>
+            </table>
+        </td>
+    </tr>
+    <!-- EVENT DESCRIPTION -->
+    <tr>
+        <td align="center" style="min-width: 590px;">
+            <table width="590" border="0" cellpadding="0" cellspacing="0" style="min-width: 590px; background-color: white; padding: 0px 8px 0px 8px; border-collapse:separate;">
+                <tr><td valign="top" style="font-size: 14px;">
+                    <div>
+                        Hello ${object.name},<br/>
                         We are excited to remind you that the event
                         % if 'website_url' in object.event_id and object.event_id.website_url:
                             <a href="${object.event_id.website_url}" style="color:#875A7B;text-decoration:none;">${object.event_id.name}</a>
                         % else:
-                            ${object.event_id.name}
+                            <strong>${object.event_id.name}</strong>
                         % endif
-                        is starting
-                        <strong>${object.get_date_range_str()}</strong>.
-                    </p><p style="font-size:16px;">
-                        We confirm your registration and hope to meet you there,
-                    </p><p style="font-size:16px; margin-bottom: 30px">
-                        <i>
-                           -- <br/>
+                        is starting <strong>${object.get_date_range_str()}</strong>.
+                    </div>
+                    % if 'website_url' in object.event_id and object.event_id.website_url:
+                    <div style="margin: 16px 0px 16px 0px;">
+                        <a href="${object.event_id.website_url}"
+                            style="background-color: #875A7B; padding: 8px 16px 8px 16px; text-decoration: none; color: #fff; border-radius: 5px; font-size:16px;">View Event</a><br />
+                    </div>
+                    % endif
+                    <div>
+                        We confirm your registration and hope to meet you there,<br/>
+                        <span style="color: #454748;">
+                        -- <br/>
                         % if object.event_id.organizer_id:
                             ${object.event_id.organizer_id.name}
                         % else:
                             The organizers.
                         % endif
-                        </i>
-                    </p>
-
-                </td>
-            </tr>
-            <tr>
-                <td style="padding:15px 20px 0px 20px;">
-                    <table style="width:100%;border-top:1px solid #e1e1e1;">
+                        </span>
+                    </div>
+                </td></tr>
+                <tr><td style="text-align:center;">
+                  <hr width="100%" style="background-color:rgb(204,204,204);border:medium none;clear:both;display:block;font-size:0px;min-height:1px;line-height:0; margin: 16px 0px 16px 0px;"/>
+                </td></tr>
+            </table>
+        </td>
+    </tr>
+    <!-- DETAILS -->
+    <tr>
+        <td align="center" style="min-width: 590px;">
+            <table width="590" border="0" cellpadding="0" cellspacing="0" style="min-width: 590px; background-color: white; padding: 0px 8px 0px 8px; border-collapse:separate;">
+                <tr><td valign="top" style="font-size: 14px;">
+                    <table style="width:100%;">
                         <tr>
-                            <td style="padding:25px 0px;vertical-align:top;">
-                                <img src="/web_editor/font_to_img/61555/rgb(81,81,102)/34" style="padding:4px;max-width:inherit;" height="34">
+                            <td style="vertical-align:top;">
+                                <img src="/web_editor/font_to_img/61555/rgb(81,81,102)/34" style="padding:4px;max-width:inherit;" height="34"/>
                             </td>
-                            <td style="padding:25px 10px 25px 10px;width:50%;line-height:20px;vertical-align:top;">
+                            <td style="padding: 0px 10px 0px 10px;width:50%;line-height:20px;vertical-align:top;">
                                 <div><strong>From</strong> ${object.event_id.date_begin_located}</div>
                                 <div><strong>To</strong> ${object.event_id.date_end_located}</div>
                                 <div style="font-size:12px;color:#9e9e9e"><i><strong>TZ</strong> ${object.event_id.date_tz}</i></div>
                             </td>
-                            % if object.event_id.address_id:
-                                <td style="padding:25px 0px;vertical-align:top;">
-                                    <img src="/web_editor/font_to_img/61505/rgb(81,81,102)/34" style="padding:4px;max-width:inherit;" height="34">
+                            % if object.event_id.address_id.country_id.name:
+                                <td style="vertical-align:top;">
+                                    <img src="/web_editor/font_to_img/61505/rgb(81,81,102)/34" style="padding:4px;max-width:inherit;" height="34"/>
                                 </td>
-                                <td style="padding:30px 10px 25px 10px;width:50%;vertical-align:top;">
+                                <td style="padding: 0px 10px 0px 10px;width:50%;vertical-align:top;">
                                     % set location = ''
                                     % if object.event_id.address_id.name:
-                                        <p style="margin:0px 0px 0px 0px;">${object.event_id.address_id.name}</p>
+                                        <div>${object.event_id.address_id.name}</div>
                                     % endif
                                     % if object.event_id.address_id.street:
-                                        <p style="margin:0px 0px 0px 0px;">${object.event_id.address_id.street}</p>
+                                        <div>${object.event_id.address_id.street}</div>
                                         % set location = object.event_id.address_id.street
                                     % endif
                                     % if object.event_id.address_id.street2:
-                                        <p style="margin:0px 0px 0px 0px;">${object.event_id.address_id.street2}</p>
+                                        <div>${object.event_id.address_id.street2}</div>
                                         % set location = '%s, %s' % (location, object.event_id.address_id.street2)
                                     % endif
-                                    <p style="margin:0px 0px 0px 0px;">
+                                    <div>
                                     % if object.event_id.address_id.city:
                                         ${object.event_id.address_id.city},
                                         % set location = '%s, %s' % (location, object.event_id.address_id.city)
@@ -293,71 +336,84 @@
                                         ${object.event_id.address_id.zip}
                                         % set location = '%s, %s' % (location, object.event_id.address_id.zip)
                                     % endif
-                                    </p>
+                                    </div>
                                     % if object.event_id.address_id.country_id.name:
-                                        <p style="margin:0px 0px 0px 0px;">${object.event_id.address_id.country_id.name}</p>
+                                        <div>${object.event_id.address_id.country_id.name}</div>
                                         % set location = '%s, %s' % (location, object.event_id.address_id.country_id.name)
                                     % endif
                                 </td>
                             % endif
                         </tr>
                     </table>
-                    % if object.event_id.organizer_id.email:
-                        <table style="width:100%;border-top:1px solid #e1e1e1;">
-                            <tr>
-                                <td style="padding:10px 0px 25px 0px;">
-                                    <h2 style="font-weight:300;margin:10px 0px">Questions about this event?</h2>
-                                    <p>Please contact the organizer:</p>
-                                    <ul>
-                                        <li>${object.event_id.organizer_id.name}</li>
-                                        % if object.event_id.organizer_id.email
-                                            <li>Mail: <a href="mailto:${object.event_id.organizer_id.email}" style="text-decoration:none;color:#875A7B;">${object.event_id.organizer_id.email}</a></li>
-                                        % endif
-                                        % if object.event_id.organizer_id.phone
-                                            <li>Phone: ${object.event_id.organizer_id.phone}</li>
-                                        % endif
-                                    </ul>
-                                </td>
-                            </tr>
-                        </table>
-                    % endif
+                </td></tr>
+                <tr><td style="text-align:center;">
+                  <hr width="100%" style="background-color:rgb(204,204,204);border:medium none;clear:both;display:block;font-size:0px;min-height:1px;line-height:0; margin: 16px 0px 16px 0px;"/>
+                </td></tr>
+                % if object.event_id.organizer_id:
+                <tr><td valign="top" style="font-size: 14px;">
+                    <div>
+                        <span style="font-weight:300;margin:10px 0px">Questions about this event?</span>
+                        <div>Please contact the organizer:</div>
+                        <ul>
+                            <li>${object.event_id.organizer_id.name}</li>
+                            % if object.event_id.organizer_id.email
+                                <li>Mail: <a href="mailto:${object.event_id.organizer_id.email}" style="text-decoration:none;color:#875A7B;">${object.event_id.organizer_id.email}</a></li>
+                            % endif
+                            % if object.event_id.organizer_id.phone
+                                <li>Phone: ${object.event_id.organizer_id.phone}</li>
+                            % endif
+                        </ul>
+                    </div>
+                </td></tr>
+                % endif
+                <tr><td valign="top" style="font-size: 14px;">
                     <table style="width:100%;border-top:1px solid #e1e1e1;">
                         <tr>
                             <td style="padding:25px 0px;">
                                 <strong>Add this event to your calendar</strong>
-                                <a href="https://www.google.com/calendar/render?action=TEMPLATE&text=${object.event_id.name}&dates=${date_begin}/${date_end}&location=${location}" style="padding:3px 5px;border:1px solid #875A7B;color:#875A7B;text-decoration:none;border-radius:3px;" target="new"><img src="/web_editor/font_to_img/61525/rgb(135,90,123)/16" style="vertical-align:middle;" height="16"> Google</a>
-                                <a href="https://bay02.calendar.live.com/calendar/calendar.aspx?rru=addevent&summary=${object.event_id.name}&dtstart=${date_begin}&dtend=${date_end}&location=${location}" style="padding:3px 5px;border:1px solid #875A7B;color:#875A7B;text-decoration:none;border-radius:3px;" target="new"><img src="/web_editor/font_to_img/61525/rgb(135,90,123)/16" style="vertical-align:middle;" height="16"> Outlook</a>
-                                <a href="https://calendar.yahoo.com/?v=60&view=d&type=20&title=${object.event_id.name}&in_loc=${location}&st=${format_tz(object.event_id.date_begin, tz='UTC', format='%Y%m%dT%H%M%S')}&et=${format_tz(object.event_id.date_end, tz='UTC', format='%Y%m%dT%H%M%S')}" style="padding:3px 5px;border:1px solid #875A7B;color:#875A7B;text-decoration:none;border-radius:3px;" target="new"><img src="/web_editor/font_to_img/61525/rgb(135,90,123)/16" style="vertical-align:middle;" height="16"> Yahoo</a>
+                                <a href="https://www.google.com/calendar/render?action=TEMPLATE&amp;text=${object.event_id.name}&amp;dates=${date_begin}/${date_end}&amp;location=${location}" style="padding:3px 5px;border:1px solid #875A7B;color:#875A7B;text-decoration:none;border-radius:3px;" target="new"><img src="/web_editor/font_to_img/61525/rgb(135,90,123)/16" style="vertical-align:middle;" height="16"/> Google</a>
+                                <a href="https://bay02.calendar.live.com/calendar/calendar.aspx?rru=addevent&amp;summary=${object.event_id.name}&amp;dtstart=${date_begin}&amp;dtend=${date_end}&amp;location=${location}" style="padding:3px 5px;border:1px solid #875A7B;color:#875A7B;text-decoration:none;border-radius:3px;" target="new"><img src="/web_editor/font_to_img/61525/rgb(135,90,123)/16" style="vertical-align:middle;" height="16"/> Outlook</a>
+                                <a href="https://calendar.yahoo.com/?v=60&amp;view=d&amp;type=20&amp;title=${object.event_id.name}&amp;in_loc=${location}&amp;st=${format_tz(object.event_id.date_begin, tz='UTC', format='%Y%m%dT%H%M%S')}&amp;et=${format_tz(object.event_id.date_end, tz='UTC', format='%Y%m%dT%H%M%S')}" style="padding:3px 5px;border:1px solid #875A7B;color:#875A7B;text-decoration:none;border-radius:3px;" target="new">
+                                    <img src="/web_editor/font_to_img/61525/rgb(135,90,123)/16" style="vertical-align:middle;" height="16"/> Yahoo</a>
                             </td>
                         </tr>
                     </table>
-                </td>
-            </tr>
-        </tbody>
-    </table>
-    % if object.event_id.address_id:
-    <div style="width:598px;margin:0px auto;border-left:1px solid #dddddd;border-right:1px solid #dddddd;border-bottom:1px solid #dddddd;">
-        <a href="https://maps.google.com/maps?q=${location}" target="new">
-            <img src="http://maps.googleapis.com/maps/api/staticmap?autoscale=1&size=598x200&maptype=roadmap&format=png&visual_refresh=true&markers=size:mid%7Ccolor:0xa5117d%7Clabel:%7C${location}" style="vertical-align:bottom;" />
-        </a>
-    </div>
-    % endif
-    <table style="width:600px;margin:0px auto;text-align:center;">
-        <tbody>
-            <tr>
-                <td style="padding-top:10px;font-size: 12px;">
-                    <p style="margin:0px 0px 9px 0px;padding-top:10px;">Sent by ${object.company_id.name}</p>
-                    % if 'website_url' in object.event_id and object.event_id.website_url:
-                    <div>
-                        Discover <a href="/event" style="text-decoration:none;color:#717188;">all our events</a>.
-                    </div>
-                    % endif
-                </td>
-            </tr>
-        </tbody>
+                </td></tr>
+                <tr><td style="text-align:center;">
+                  <hr width="100%" style="background-color:rgb(204,204,204);border:medium none;clear:both;display:block;font-size:0px;min-height:1px;line-height:0; margin: 16px 0px 16px 0px;"/>
+                </td></tr>
+                % if object.event_id.address_id:
+                <tr><td valign="top" style="font-size: 14px;">
+                    <table style="width:100%;"><tr><td>
+                        <div>
+                            <a href="https://maps.google.com/maps?q=${location}" target="new">
+                                <img src="http://maps.googleapis.com/maps/api/staticmap?autoscale=1&amp;size=598x200&amp;maptype=roadmap&amp;format=png&amp;visual_refresh=true&amp;markers=size:mid%7Ccolor:0xa5117d%7Clabel:%7C${location}" style="vertical-align:bottom; width: 100%;"/>
+                            </a>
+                        </div>
+                    </td></tr></table>
+                </td></tr>
+                % endif
+            </table>
+        </td>
+    </tr>
+</tbody>
+</table>
+</td></tr>
+<!-- FOOTER BY -->
+<tr><td align="center" style="min-width: 590px;">
+    <table width="590" border="0" cellpadding="0" cellspacing="0" style="min-width: 590px; background-color: #F1F1F1; color: #454748; padding: 8px; border-collapse:separate;">
+      <tr><td style="text-align: center; font-size: 14px;">
+        Sent by <a target="_blank" href="object.company_id.website" style="color: #875A7B;">${object.company_id.name}</a>
+        % if 'website_url' in object.event_id and object.event_id.website_url:
+        <br />
+        Discover <a href="/event" style="text-decoration:none;color:#717188;">all our events</a>.
+        % endif
+      </td></tr>
     </table>
-</div>
-            ]]></field>
+</td></tr>
+</table>
+            </field>
+            <field name="lang">${object.partner_id.lang}</field>
         </record>
 
     </data>