odoo_source/addons/website_event/views/event_templates.xml

<?xml version="1.0" encoding="utf-8"?>
<odoo>

<template id="assets_frontend" inherit_id="website.assets_frontend">
    <xpath expr="//link[last()]" position="after">
        <link rel="stylesheet" type="text/scss" href="/website_event/static/src/scss/website_event.scss"/>
    </xpath>
    <xpath expr="//script[last()]" position="after">
        <script type="text/javascript" src="/website_event/static/src/js/website_geolocation.js"></script>
        <script type="text/javascript" src="/website_event/static/src/js/website_event.js"></script>
    </xpath>
</template>

<template id="assets_editor" inherit_id="website.assets_editor" name="Event 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 -->
<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">
                    <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>
                            </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>
                    </div>
                </div>
            </div>
            <div class="form-inline justify-content-center my-3">
                <t t-call="website.pager"/>
            </div>
        </div>
        <div class="oe_structure" id="oe_structure_website_event_index_2"/>
      </div>
    </t>
</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"/>
    </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>
    </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">
            <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>
            </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>
        </div>
    </xpath>
</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"/>
    </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>
            </t>
        </ul>
    </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>
    </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>
            </t>
        </ul>
    </xpath>
</template>

<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'" />
    </xpath>
</template>
<template id="layout">
    <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>
                        </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>
        <div class="oe_structure" id="oe_structure_website_event_layout_1"/>
      </div>
    </t>
</template>

<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>
                    </div>
                </div>
            </div>
        </section>
        <div class="oe_structure" id="oe_structure_website_event_location_2"/>
    </t>
</template>

<template id="template_intro">
    <t t-call="website_event.layout">
        <section class="container">
            <h1 class="o_page_header">Event Introduction</h1>
        </section>
        <div class="oe_structure oe_empty" id="oe_structure_website_event_intro_1"/>
    </t>
</template>

<template id="default_page">
    <t t-call="website.layout">
        <div class="oe_structure oe_empty"/>
    </t>
</template>


<template id="event_details">
    <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>
    </t>
</template>

<template id="404">
    <t t-call="website.layout">
        <div id="wrap">
            <div class="oe_structure oe_empty">
                <div class="container">
                    <h1 class="mt-4">Event not found!</h1>
                    <p>Sorry, the requested event is not available anymore.</p>
                    <p><a t-attf-href="/event">Return to the event list.</a></p>
                </div>
            </div>
        </div>
    </t>
</template>

<template id="event_description_full">
    <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>
                    </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>
                        </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>
                    </div>
                </div>
            </div>

        </div>
    </t>
</template>

<!-- Registration Templates -->
<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>
            <t t-id="tickets" t-call="website_event.ticket">
                <t t-set="name">
                    <span itemprop="name">Event Registration</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>
                <t t-set="price">
                    <span itemprop="price" content="0">
                        Free
                    </span>
                </t>
                <t t-set="quantity">
                    <select name="nb_register-0" class="form-control">
                        <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>
    </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">
                <t t-if="tickets_available">
                    <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>
                </t>
            </div>
        </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">
            <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>
                                    <div class="col-md">
                                        <strong>Email</strong>
                                    </div>
                                    <div class="col-md">
                                        <strong>Phone <small class='lbl_optional'>(optional)</small></strong>
                                    </div>
                                </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">
                        <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>
                </div>
            </form>
        </div>
    </div>
</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">
                <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>
                    </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>
                </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>

<!-- Snippet to display local events -->
<template id="s_country_events" name="Local Events">
    <div t-attf-class="oe_country_events #{_classes or 'my-3'}">
        <div class="country_events_list">
            <h5>
                <i class="fa fa-flag"/> Events from Your Country
            </h5>
        </div>
    </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">
    <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"/>
    </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"/>
    </xpath>
</template>

<!-- Misc templates -->
<template id="country_events_list" name="Country">
    <t t-ignore="true">
        <t t-if="events">
            <div class="country_events_list">
                <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>
                </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>
                <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>
                </t>
            </div>
        </t>
    </t>
</template>

<!-- User Navbar -->
<template id="user_navbar_inherit_website_event" inherit_id="website.user_navbar">
    <xpath expr="//div[@id='o_new_content_menu_choices']//div[@name='module_website_event']" position="attributes">
        <attribute name="name"/>
        <attribute name="t-att-data-module-id"/>
        <attribute name="t-att-data-module-shortdesc"/>
        <attribute name="groups">event.group_event_manager</attribute>
    </xpath>
</template>
</odoo>