<div class="order-schedule-card border border-gray-200 dark:border-gray-700" ...attributes>
    <a href="javascript:;" class="{{@titleClass}} card-title border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900" {{on "click" (fn this.onTitleClick @order)}}>
        <span>{{@order.public_id}}</span>
        <div>
            <Badge @status={{@order.status}} />
        </div>
    </a>
    <div class="{{@contentClass}} card-content bg-white dark:bg-gray-900 text-sm space-y-2">
        <div class="flex items-center justify-between">
            <div class="flex flex-row items-center leading-5">
                <div class="w-4">
                    <FaIcon @icon="clock" @size="xs" />
                </div>
                <span class="font-semibold">{{t "fleet-ops.component.order.schedule-card.date"}}</span>
            </div>
            <span class={{unless @order.scheduled_at "dark:text-gray-600 text-gray-400"}}>{{n-a @order.scheduledAt "Not Scheduled"}}</span>
        </div>
        <div class="flex items-center justify-between">
            <div class="flex flex-row items-center leading-5">
                <div class="w-4">
                    <FaIcon @icon="calendar" @size="xs" />
                </div>
                <span class="font-semibold">Date created</span>
            </div>
            <span>{{n-a @order.createdAtWithTime}}</span>
        </div>
        <div class="flex items-center justify-between">
            <div class="flex flex-row items-center">
                <div class="w-4">
                    <FaIcon @icon="id-card-alt" @size="xs" />
                </div>
                <span class="font-semibold">{{t "fleet-ops.component.order.schedule-card.driver-assigned"}}</span>
                <div class="ml-1">
                    <a href="javascript:;" class="text-blue-400 text-xs hover:opacity-75" {{on "click" this.startAssignDriver}}>
                        <FaIcon @icon="edit" @size="xs" />
                    </a>
                </div>
            </div>
            <div>
                {{#if this.isAssigningDriver}}
                    <ModelSelect @modelName="driver" @selectedModel={{@order.driver_assigned}} @placeholder={{t "fleet-ops.component.order.schedule-card.select-driver"}} @triggerClass="form-select form-input form-input-sm w-48" @infiniteScroll={{false}} @renderInPlace={{true}} @allowClear={{true}} @disabled={{@model.isLoading}} @onChange={{this.assignDriver}} as |model|>
                        <div class="flex flex-row items-center truncate uppercase">
                            <span class="uppercase mr-1.5">{{model.name}}</span>
                            <span class="uppercase">{{model.phone}}</span>
                        </div>
                    </ModelSelect>
                {{else}}
                    <a href="javascript:;" disabled={{not @order.driver_assigned}} class={{unless @order.driver_assigned "dark:text-gray-600 text-gray-400"}} {{on "click" (fn this.onClickDriver @order.driver_assigned)}}>{{n-a @order.driver_assigned.name (t "fleet-ops.component.order.schedule-card.no-driver")}}</a>
                {{/if}}
            </div>
        </div>
        <div class="flex items-center justify-between">
            <div class="flex flex-row items-center leading-5">
                <div class="w-4">
                    <FaIcon @icon="car" @size="xs" />
                </div>
                <span class="font-semibold">{{t "fleet-ops.component.order.schedule-card.vehicle-assigned"}}</span>
            </div>
            {{#if @order.vehicle_assigned}}
                <a href="javascript:;" disabled={{not @order.vehicle_assigned}} class={{unless @order.vehicle_assigned_uuid "dark:text-gray-600 text-gray-400"}} {{on "click" (fn this.onClickVehicle @order.vehicle_assigned)}}>{{n-a @order.vehicle_assigned.display_name (t "fleet-ops.component.order.schedule-card.no-vehicle")}}</a>
            {{else if @order.driver_assigned.vehicle}}
                <a href="javascript:;" disabled={{not @order.driver_assigned.vehicle}} class={{unless @order.driver_assigned.vehicle_uuid "dark:text-gray-600 text-gray-400"}} {{on "click" (fn this.onClickVehicle @order.driver_assigned.vehicle)}}>{{n-a @order.driver_assigned.vehicle_name (t "fleet-ops.component.order.schedule-card.no-vehicle")}}</a>
            {{/if}}
        </div>
        <div class="flex items-center justify-between">
            <div class="flex flex-row items-center leading-5">
                <div class="w-4">
                    <FaIcon @icon="location-dot" @size="xs" />
                </div>
                <span class="font-semibold">{{t "fleet-ops.component.order.schedule-card.destination"}}</span>
            </div>
            <span>{{n-a @order.pickupName}}</span>
        </div>
        {{!-- <div class="z-20 relative">
            <RouteList @order={{@order}} />
        </div> --}}
    </div>
    {{yield}}
</div>