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

    <template id="event_booth_layout" name="Event Booth Layout">
        <t t-call="website_event.layout">
            <div class="oe_structure oe_empty" id="oe_structure_website_event_booth_1"/>
            <div class="o_wbooth_registration" t-att-data-event-id="event.id">
                <section>
                    <div class="container overflow-hidden">
                        <div class="row g-0">
                            <t t-out="0"/>
                        </div>
                    </div>
                </section>
                <div t-if="event.is_finished" class="container">
                    <div class="row">
                        <div class="col-12 text-center">
                            <div class="my-4"><t t-call="website_event.event_empty_events_svg"/></div>
                            <h2>Event Finished</h2>
                            <p>It's no longer possible to book a booth.</p>
                        </div>
                    </div>
                </div>
                <div t-elif="not event_booths" class="container">
                    <div class="row">
                        <div class="col-12 text-center">
                            <div class="my-4"><t t-call="website_event.event_empty_events_svg"/></div>
                            <h2>Registration Not Open.</h2>
                            <p>This event is not open to exhibitors registration at this time.</p>
                            <p>Check our <a class="o_translate_inline" href="/event" title="List of Future Events" aria-label="Link to list of future events">list of future events</a>.</p>
                            <div class="o_not_editable my-3" groups="event.group_event_manager">
                                <a class="btn o_wevent_cta mb-4" target="_blank" t-attf-href="/odoo/event.event/{{event.id}}">
                                    <span class="fa fa-gear me-1"/> Configure Booths
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
             <div class="oe_structure oe_empty" id="oe_structure_website_event_booth_2"/>
        </t>
    </template>

    <template id="event_booth_registration" name="Event Booth Registration">
        <t t-call="website_event_booth.event_booth_layout">
            <t t-if="event_booths and not event.is_finished">
                <div class="d-flex flex-wrap align-items-center justify-content-between my-3">
                    <h1 class="my-0 h3-fs">Get A Booth</h1>
                    <t t-call="website_event_booth.event_booth_order_progress">
                        <t t-set="step" t-value="'STEP_BOOTH_SELECTION'"/>
                    </t>
                </div>
                <div class="oe_structure oe_empty" id="oe_structure_website_event_booth_inner_1"/>
                <div t-attf-class="#{'col-lg-12' if available_booth_category_ids else 'col-lg-12'}">
                    <form method="post" class="form-horizontal js_website_submit_form o_wbooth_registration_form mt-1"
                          t-attf-action="/event/#{slug(event)}/booth/register" t-att-data-event-id="event.id">
                        <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
                        <div class="row mb-3">
                            <h5 class="mt-0 mb-3">Choose your type of booth</h5>
                            <t t-foreach="event.event_booth_category_ids" t-as="booth_category">
                                <t t-set="booth_category_unavailable" t-value="booth_category not in available_booth_category_ids"/>
                                <div t-attf-class="col-md-6 col-lg-4 mb-4 {{ (len(event.event_booth_category_ids) &gt; 3) and 'col-xxl-3' }}">
                                    <label t-attf-class="d-block h-100 #{'o_wbooth_category_unavailable overflow-hidden' if booth_category_unavailable else ''}">
                                        <input type="radio" name="booth_category_id" t-att-value="booth_category.id" t-att-disabled="booth_category_unavailable"
                                            t-att-checked="booth_category.id == selected_booth_category_id"/>
                                        <div class="card h-100">
                                            <div t-field="booth_category.image_1920" class="card-img-top border-bottom"
                                                t-options='{"widget": "image", "qweb_img_responsive": False, "class": "img img-fluid h-100 w-100 mw-100", "style": "max-height: 208px; min-height: 208px; object-fit: cover"}'/>
                                            <div class="card-body d-flex flex-wrap w-100 gap-2 justify-content-between flex-grow-0 pb-0">
                                                <h5 name="booth_category_name" class="card-title my-0" t-out="booth_category.name"/>
                                                <span class="booth_category_price"></span>
                                            </div>
                                             <div class="w-100 small" t-attf-id="o_wbooth_booth_description_#{booth_category.id}" t-field="booth_category.description"/>
                                        </div>
                                        <div t-if="booth_category_unavailable" class="o_ribbon_right text-bg-danger">
                                            <span class="text-nowrap">Sold Out</span>
                                        </div>
                                    </label>
                                </div>
                            </t>
                        </div>
                        <t t-if="available_booth_category_ids">
                            <div class="row">
                                <div class="d-flex flex-wrap align-items-center gap-2 mb-3">
                                    <h5 class="my-0">Location</h5>
                                    <div t-if="event.exhibition_map" class="ms-2 small">
                                        <a class="text-decoration-none text-center" href="#" data-bs-toggle="modal" data-bs-target="#mapModal"><i class="fa fa-map-o me-1"/>View Plan</a>
                                        <div role="dialog" id="mapModal" class="modal" tabindex="-1">
                                            <div class="modal-dialog modal-lg">
                                                <div class="modal-content">
                                                    <div class="modal-body">
                                                        <div t-field="event.exhibition_map" t-options="{'widget': 'image'}" class="img img-responsive"/>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 o_wbooth_booths d-flex flex-wrap align-items-center gap-2" t-att-data-selected-booth-ids="selected_booth_ids or ''"/>
                                <div class="row">
                                    <div class="alert alert-danger col-12 o_wbooth_unavailable_booth_alert d-none" role="alert">
                                        <i class="fa fa-exclamation-triangle"/>
                                        <span>Sorry, several booths are now sold out. Please change your choices before validating again.</span>
                                    </div>
                                </div>
                                <div class="pt24 pb48" name="booth_registration_submit">
                                    <div class="d-flex align-items-center justify-content-end gap-2">
                                        <button type="submit" class="o_wbooth_registration_submit btn btn-primary btn-block" disabled="true">
                                            <span>Book my Booth<small>(s)</small></span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </t>
                        <div t-else="" class="alert alert-info">
                            <span>Sorry, all the booths are sold out. <a class="alert-link" href="/contactus">Contact Us</a> if you have any question.</span>
                        </div>
                    </form>
                </div>
            </t>
        </t>
    </template>

    <template id="event_booth_order_progress">
        <ul class="o_wevent_booth_order_progress d-none d-md-block list-unstyled px-3 py-2 text-bg-light rounded m-0">
            <li t-attf-class="position-relative float-start m-0 text-center">
                <a t-if="step!='STEP_BOOTH_SELECTION'" class="d-inline-flex align-items-center text-decoration-none" t-attf-href="/event/#{slug(event)}/booth?#{keep_query('booth_category_id', 'booth_ids')}">
                    <span>Booth Selection</span><span class="fa fa-angle-right d-inline-block align-middle mx-2 mx-lg-3 opacity-75"/>
                </a>
                <span t-else="" class="d-inline-flex align-items-center text-decoration-none text-reset">
                    <span>Booth Selection</span><span class="fa fa-angle-right d-inline-block align-middle mx-2 mx-lg-3 opacity-75"/>
                </span>
            </li>
            <li t-attf-class="d-inline-flex align-items-center position-relative float-start m-0 text-center #{'' if step=='STEP_DETAILS_FORM' else 'opacity-75'}">
                Contact Details<span class="fa fa-angle-right d-inline-block align-middle mx-2 mx-lg-3 opacity-75"/>
            </li>
            <li class="position-relative float-start m-0 text-center opacity-75">
                <span>Confirmed</span>
            </li>
        </ul>
    </template>

</data></odoo>
