<?xml version="1.0"?>
<t name="Modal for slots registration" t-name="website_event.modal_slot_registration">
    <div class="modal fade" id="modal_slot_registration" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabelSlot" aria-hidden="true">
        <div class="modal-dialog modal-lg o_wevent_js_slot_details">
            <form id="slot_registration_form" t-attf-action="/event/#{slug(event)}/registration/slot/slot_id/tickets" method="post">
                <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
                <div class="modal-content">
                <div class="modal-header">
                    <div class="o_wevent_registration_title modal-title fs-5" id="staticBackdropLabelSlot">Slots</div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"/>
                </div>
                <div class="modal-body">
                    <div class="d-flex flex-column flex-sm-row gap-sm-3">
                        <h5 class="o_wevent_selected_slot_title">Select a Date:</h5>
                        <span class="o_wevent_selected_slot text-primary fw-bold"/>
                    </div>
                    <nav class="mt-2">
                        <ul class="pagination d-flex flex-nowrap gap-3 user-select-none">
                            <li class="o_wevent_slot_previous page-item">
                                <button class="btn btn-link text-decoration-none p-1">
                                    <i class="fa fa-caret-left me-2"/><small>Previous</small>
                                </button>
                            </li>
                            <li class="o_wevent_slot_next page-item">
                                <button class="btn btn-link text-decoration-none p-1">
                                    <small>Next</small><i class="fa fa-caret-right ms-2"/>
                                </button>
                            </li>
                        </ul>
                    </nav>
                    <div class="o_wevent_slot_dates row px-2">
                        <div t-foreach="slots" t-as="date" t-attf-class="o_wevent_slot_date col col-sm-6 col-lg-4 px-3 pb-4">
                            <time t-out="date" class="text-nowrap pe-5 me-5" t-options="{'widget': 'date', 'format': 'full'}"/>
                            <div class="d-flex flex-wrap gap-2">
                                <button type="button" t-foreach="slots[date]" t-as="slot" class="o_wevent_slot_btn btn btn-sm btn-light" t-att-data-slot-id="slot.id" t-att-data-slot-start="slot.start_datetime">
                                    <time t-out="slot.start_datetime" class="lh-1" t-options="{'widget': 'datetime', 'tz_name': event.date_tz, 'time_only': 'true', 'format': 'short'}"/>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer flex-lg-row border-top">
                    <button type="button" class="btn btn-light o_wevent_slot_btn_cancel" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary a-submit" disabled="" t-attf-id="#{event.id}">
                        Next
                    </button>
                </div>
                </div>
            </form>
        </div>
    </div>
</t>

