<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">

    <t t-name="web.CalendarScheduleSection">
        <div class="d-flex align-items-center cursor-pointer mt-3 mb-2" t-on-click="() => this.state.collapsed = !this.state.collapsed">
            <h5 t-out="toScheduleString" class="flex-grow-1 m-0"/>
            <i
                class="fa"
                t-attf-class="fa-caret-{{ state.collapsed ? 'left' : 'down' }}"
            />
        </div>
        <div t-ref="eventsToSchedule" class="d-flex flex-column" t-att-class="{ 'd-none': this.state.collapsed }">
            <div 
                class="align-items-center cursor-pointer o_event_to_schedule_draggable py-1"
                t-foreach="props.model.data.eventsToSchedule.records"
                t-as="event"
                t-key="event.id"
                t-att-data-res-id="event.id" 
                t-on-click="() => this.openRecord(event)"
            >
                <i class="oi oi-draggable o_event_to_schedule_handle"/>
                <span class="ps-1 min-w-0 text-truncate" t-out="event.display_name" t-att-title="event.display_name"/>
            </div>
        </div>
        <button t-if="displayLoadMoreButton" class="btn btn-link" t-on-click="() => this.props.model.loadMoreEventsToSchedule()">
            Load More
        </button>
    </t>

</templates>
