<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">
                    {{#let (cannot "fleet-ops assign-driver-for order") as |unauthorized|}}
                        <a
                            href="javascript:;"
                            class="text-blue-400 text-xs hover:opacity-75 {{if unauthorized 'opacity-50 disabled'}}"
                            {{on "click" this.startAssignDriver}}
                            disabled={{unauthorized}}
                        >
                            <FaIcon @icon="edit" @size="xs" />
                        </a>
                        {{#if unauthorized}}
                            <Attach::Tooltip @class="clean" @animation="scale" @placement="right">
                                <InputInfo @text={{t "common.unauthorized"}} />
                            </Attach::Tooltip>
                        {{/if}}
                    {{/let}}
                </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}}
                        @permission="fleet-ops assign-driver-for order"
                        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 "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 "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>
            {{else}}
                <div class="dark:text-gray-600 text-gray-400">{{t "fleet-ops.component.order.schedule-card.no-vehicle"}}</div>
            {{/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>