<?xml version="1.0"?>
<t name="Modal for tickets registration" t-name="website_event.modal_ticket_registration">
    <!-- Modal -->
    <div id="modal_ticket_registration" t-attf-class="modal fade {{'o_wevent_modal_slot_ticket_registration' if event.is_multi_slots else ''}}" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabelTicket" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
            <div class="modal-header">
                <div class="o_wevent_registration_title modal-title fs-5" id="staticBackdropLabelTicket">Tickets</div>
                <div t-if="len(event.event_ticket_ids) &gt; 2" class="o_wevent_price_range ms-2"/>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"/>
            </div>

            <form t-if="event.event_registrations_open and (not event.event_ticket_ids or any(not ticket.is_expired for ticket in event.event_ticket_ids))" id="registration_form" t-attf-action="/event/#{slug(event)}/registration/new" method="post" itemscope="itemscope" itemprop="offers" itemtype="http://schema.org/AggregateOffer">
                <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
                <input t-if="event_slot" type="hidden" name="event_slot_id" t-att-value="event_slot.id"/>
                <div id="o_wevent_tickets" class="shadow-sm o_wevent_js_ticket_details">
                    <div t-if="registration_error_code == 'insufficient_seats'" class="alert alert-danger" role="alert">
                        <p class="mb-0">
                            Registration failed! These tickets are not available anymore.
                        </p>
                    </div>
                    <t t-set="tickets" t-value="event.event_ticket_ids.filtered(lambda ticket: not ticket.is_expired)"/>
                    <!-- If some tickets expired and there is only one type left, we keep the same layout -->
                    <t t-if="len(event.event_ticket_ids) &gt; 1">
                        <span t-if="not event.event_registrations_open" class="text-danger">
                            <i class="fa fa-ban me-2"/>Sold Out
                        </span>
                        <div id="o_wevent_tickets_collapse" class="modal-body collapse show">
                            <div t-foreach="tickets" t-as="ticket" t-attf-class="d-flex justify-content-between o_wevent_ticket_selector mb-2 pb-2 {{not ticket_last and 'border-bottom' or ''}}" t-att-name="ticket.name">
                                <div itemscope="itemscope" itemtype="http://schema.org/Offer">
                                    <h5 itemprop="name" t-field="ticket.name" class="h6 my-0"/>
                                    <t t-if="ticket.description">
                                        <small t-field="ticket.description" class="text-muted py-2"/>
                                        <br/>
                                    </t>
                                    <small t-if="ticket.end_sale_datetime and ticket.sale_available and not ticket.is_expired" class="text-muted me-3" itemprop="availabilityEnds">Sales end on
                                        <span itemprop="priceValidUntil" t-out="ticket.end_sale_datetime" t-options="{'widget': 'datetime', 'tz_name': event.date_tz, 'format': 'short'}"/>
                                        <span t-if="website_visitor_timezone != event.date_tz">(<t t-out="event.date_tz"/>)</span>
                                    </small>
                                    <small t-if="ticket.start_sale_datetime and not ticket.sale_available and not ticket.is_expired" class="text-muted me-3" itemprop="availabilityEnds">
                                        Sales start on <span itemprop="priceValidUntil" t-out="ticket.start_sale_datetime" t-options="{'widget': 'datetime', 'tz_name': event.date_tz, 'format': 'short'}"/>
                                        <span t-if="website_visitor_timezone != event.date_tz">(<t t-out="event.date_tz"/>)</span>
                                    </small>
                                </div>
                                <div class="d-flex flex-column flex-md-row align-items-center justify-content-between gap-2">
                                    <div class="o_wevent_registration_multi_select flex-md-grow-1 text-end"/>
                                    <div class="ms-auto">
                                        <t t-set="seats_available_slot_ticket" t-value="seats_available_slot_tickets and seats_available_slot_tickets.get(ticket.id, 0) or 0"/>
                                        <t t-set="seats_available_slot" t-value="event_slot and event_slot.seats_available or 0"/>
                                        <t t-set="seats_max_slot_ticket" t-value="((not event.seats_limited and not ticket.seats_limited) or seats_available_slot_ticket &gt; 9) and 10 or seats_available_slot_ticket + 1"/>
                                        <t t-set="seats_max_slot" t-value="(not event.seats_limited or seats_available_slot &gt; 9) and 10 or seats_available_slot + 1"/>
                                        <t t-set="seats_max_ticket" t-value="(not ticket.seats_limited or ticket.seats_available &gt; 9) and 10 or ticket.seats_available + 1"/>
                                        <t t-set="seats_max_event" t-value="(not event.seats_limited or event.seats_available &gt; 9) and 10 or event.seats_available + 1"/>
                                        <t t-set="seats_max_event_or_slot" t-value="seats_max_slot if event_slot else seats_max_event"/>
                                        <t t-set="seats_max" t-value="seats_available_slot_tickets and seats_max_slot_ticket or min(seats_max_ticket, seats_max_event_or_slot)"/>
                                        <select t-if="(not ticket.is_expired and ticket.sale_available) or seats_available_slot_ticket" t-attf-name="nb_register-#{ticket.id}" class="w-auto form-select">
                                            <t t-foreach="range(0, seats_max)" t-as="nb">
                                                <option t-out="nb" t-att-selected="len(ticket) == 0 and nb == 0 and 'selected'"/>
                                            </t>
                                        </select>
                                        <div t-else="" class="text-danger">
                                            <span t-if="not ticket.sale_available and not ticket.is_expired and ticket.is_launched">Sold Out</span>
                                            <span t-if="ticket.is_expired">Expired</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer flex-lg-row border-top">
                            <button type="button" class="btn btn-light js_goto_event" data-bs-dismiss="modal">
                                <t t-if="event.is_multi_slots">Cancel</t>
                                <t t-else="">Close</t>
                            </button>
                            <button type="submit" class="btn btn-primary a-submit" disabled="" t-attf-id="#{event.id}">
                                Register
                                <t t-if="event.seats_limited and event.seats_max and event.seats_available &lt;= (event.seats_max * 0.2)">
                                    (only <t t-out="event.seats_available"/> available)
                                </t>
                            </button>
                        </div>
                    </t>
                    <div t-else="" class="o_wevent_registration_single">
                        <div class="modal-body row px-3 py-2 mx-0">
                            <div class="col-12 col-md-8 p-0" itemscope="itemscope" itemtype="http://schema.org/Offer">
                                <h5 itemprop="name" class="my-0 pe-3 o_wevent_single_ticket_name">
                                    <span t-if="tickets" t-field="tickets.name"/>
                                    <span t-else="">Registration</span>
                                </h5>
                                <t t-if="tickets.description">
                                    <small t-field="tickets.description" class="text-muted py-2"/>
                                    <br/>
                                </t>
                                <small t-if="tickets.end_sale_datetime and tickets.sale_available and not tickets.is_expired" class="text-muted" itemprop="availabilityEnds">
                                    Sales end on
                                    <span itemprop="priceValidUntil" t-out="tickets.end_sale_datetime" t-options="{'widget': 'datetime', 'tz_name': event.date_tz, 'format': 'short'}"/>
                                    <span t-if="website_visitor_timezone != event.date_tz">(<t t-out="event.date_tz"/>)</span>
                                </small>
                            </div>
                            <div class="col-md-4 d-flex align-items-center justify-content-between p-0">
                                <t t-if="event.event_registrations_open">
                                    <link itemprop="availability" content="http://schema.org/InStock"/>
                                    <div class="o_wevent_registration_single_select w-auto ms-auto">
                                        <t t-set="seats_available_slot_ticket" t-value="seats_available_slot_tickets and tickets and seats_available_slot_tickets.get(tickets.id, 0) or 0"/>
                                        <t t-set="seats_max_slot_ticket" t-value="((not event.seats_limited and not tickets.seats_limited) or seats_available_slot_ticket &gt; 9) and 10 or seats_available_slot_ticket + 1"/>
                                        <t t-set="seats_available_slot" t-value="event_slot and event_slot.seats_available or 0"/>
                                        <t t-set="seats_max_slot" t-value="(not event.seats_limited or seats_available_slot &gt; 9) and 10 or seats_available_slot + 1"/>
                                        <t t-set="seats_max_ticket" t-value="(not tickets or not tickets.seats_limited or tickets.seats_available &gt; 9) and 10 or tickets.seats_available + 1"/>
                                        <t t-set="seats_max_event" t-value="(not event.seats_limited or event.seats_available &gt; 9) and 10 or event.seats_available + 1"/>
                                        <t t-set="seats_max_event_or_slot" t-value="seats_max_slot if event_slot else seats_max_event"/>
                                        <t t-set="seats_max" t-value="(seats_available_slot_tickets and seats_max_slot_ticket or min(seats_max_ticket, seats_max_event_or_slot)) if tickets else seats_max_event_or_slot"/>
                                        <select t-att-name="'nb_register-%s' % (tickets.id if tickets else 0)" class="d-inline w-auto form-select">
                                            <t t-foreach="range(0, seats_max)" t-as="nb">
                                                <option t-out="nb" t-att-selected="nb == 1 and 'selected'"/>
                                            </t>
                                        </select>
                                    </div>
                                </t>
                                <t t-else="">
                                    <span itemprop="availability" content="http://schema.org/SoldOut" class="text-danger">
                                        <i class="fa fa-ban me-2"/>Sold Out
                                    </span>
                                </t>
                            </div>
                        </div>
                        <div class="modal-footer flex-lg-row border-top">
                            <button type="button" class="btn btn-light js_goto_event" data-bs-dismiss="modal">
                                <t t-if="event.is_multi_slots">Cancel</t>
                                <t t-else="">Close</t>
                            </button>
                            <button type="submit" class="btn btn-primary a-submit" t-attf-id="#{event.id}" disabled="disabled">
                                Register
                                <t t-if="event.seats_limited and event.seats_max and event.seats_available &lt;= (event.seats_max * 0.2)">
                                    (only <t t-out="event.seats_available"/> available)
                                </t>
                            </button>
                        </div>
                    </div>
                </div>
            </form>
            </div>
        </div>
    </div>
</t>

