<Layout::Section::Header @title={{t "fleet-ops.operations.scheduler.index.title"}} />

<Layout::Section::Body>
    <div id="fleet-ops-scheduler-container">
        <div class="grid grid-cols-1 lg:grid-cols-3">
            <div id="fleet-ops-scheduler-sidebar" class="scheduler-left-sidebar">
                <ContentPanel
                    @title={{t "fleet-ops.operations.scheduler.index.unscheduled-orders"}}
                    @titleStatuRight={{this.unscheduledOrders.length}}
                    @titleStatuRightClass="info-status-badge"
                    @hideStatusDot={{true}}
                    @open={{true}}
                    @pad={{true}}
                    @panelBodyClass="bg-white dark:bg-gray-900"
                >
                    <div class="space-y-4">
                        {{#each this.unscheduledOrders as |order|}}
                            <FullCalendar::Draggable @eventData={{json-hash id=order.id title=order.eventTitle allDay=true}} @disabled={{cannot "fleet-ops update order"}}>
                                <Order::ScheduleCard @order={{order}} @titleClass="cursor-move" @onTitleClick={{fn this.viewEvent order}} />
                            </FullCalendar::Draggable>
                        {{/each}}
                    </div>
                </ContentPanel>
                <ContentPanel
                    @title={{t "fleet-ops.operations.scheduler.index.scheduled-orders"}}
                    @titleStatuRight={{this.scheduledOrders.length}}
                    @titleStatusRightClass="info-status-badge"
                    @hideStatusDot={{true}}
                    @open={{true}}
                    @pad={{true}}
                    @panelBodyClass="bg-white dark:bg-gray-900"
                >
                    <div class="space-y-4">
                        {{#each this.scheduledOrders as |order|}}
                            <Order::ScheduleCard @order={{order}} @titleClass="cursor-pointer" @onTitleClick={{fn this.viewEvent order}} />
                        {{/each}}
                    </div>
                </ContentPanel>
            </div>

            <div id="fleet-ops-scheduler-calendar" class="col-span-2 py-4 px-2">
                {{#if (cannot "fleet-ops update order")}}
                    <div class="flex flex-row items-center text-xs bg-yellow-800 border border-yellow-600 px-2 py-2 rounded-md text-yellow-100 mb-4 space-x-2">
                        <FaIcon @icon="triangle-exclamation" @size="sm" />
                        <div class="flex-1">
                            {{t "fleet-ops.operations.scheduler.index.unauthorized-to-schedule"}}
                        </div>
                    </div>
                {{/if}}
                <FullCalendar
                    @events={{this.events}}
                    @editable={{true}}
                    @onDrop={{this.scheduleEventFromDrop}}
                    @onEventReceive={{this.receivedEvent}}
                    @onEventDrop={{this.rescheduleEventFromDrag}}
                    @onEventClick={{this.viewOrderAsEvent}}
                    @onInit={{this.setCalendarApi}}
                />
                <Spacer @height="400px" />
            </div>
        </div>
    </div>
</Layout::Section::Body>