{{!
  Order::ScheduleCard
  Compact sidebar card used in the Scheduler's unscheduled-orders panel.
  Layout: header row (checkbox + tracking + badge), then a 2-column grid
  of label/value pairs so everything fits without line-breaking.
}}
<div
    class="order-schedule-card rounded border border-gray-200 dark:border-gray-700 overflow-hidden {{if @selected 'ring-2 ring-indigo-500 border-indigo-400 dark:border-indigo-500'}}"
    ...attributes
>
    {{! ── Header ─────────────────────────────────────────────────────── }}
    <div class="flex items-center gap-1.5 px-2 py-1.5 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
        {{#if @selectable}}
            <input
                type="checkbox"
                class="form-checkbox h-3.5 w-3.5 rounded text-indigo-600 border-gray-300 dark:border-gray-600 cursor-pointer flex-shrink-0"
                checked={{@selected}}
                {{on "click" @onSelect}}
            />
        {{/if}}
        <a
            href="javascript:;"
            class="flex-1 min-w-0 truncate text-xs font-semibold text-gray-800 dark:text-gray-100 hover:text-indigo-500 dark:hover:text-indigo-400 {{@titleClass}}"
            {{on "click" (fn this.onTitleClick @order)}}
        >
            {{@order.tracking}}
        </a>
        <div class="flex-shrink-0">
            <Badge @status={{@order.status}} />
        </div>
    </div>

    {{! ── Body — 2-column grid ───────────────────────────────────────── }}
    <div class="{{@contentClass}} card-content bg-white dark:bg-gray-900 px-2 py-1.5">
        <dl class="grid grid-cols-[auto_1fr] gap-x-2 gap-y-1 text-xs">

            {{! Scheduled date }}
            <dt class="flex items-center gap-1 text-gray-500 dark:text-gray-400 whitespace-nowrap">
                <FaIcon @icon="clock" @size="xs" class="w-3 text-center" />
                {{t "order.schedule-card.date"}}
            </dt>
            <dd class="truncate text-right {{unless @order.scheduled_at 'text-gray-400 dark:text-gray-600'}}">
                {{n-a @order.scheduledAt (t "scheduler.not-scheduled")}}
            </dd>

            {{! Created date }}
            <dt class="flex items-center gap-1 text-gray-500 dark:text-gray-400 whitespace-nowrap">
                <FaIcon @icon="calendar" @size="xs" class="w-3 text-center" />
                {{t "order.schedule-card.date-created"}}
            </dt>
            <dd class="truncate text-right">
                {{n-a @order.createdAtWithTime}}
            </dd>

            {{! Driver }}
            <dt class="flex items-center gap-1 text-gray-500 dark:text-gray-400 whitespace-nowrap">
                <FaIcon @icon="id-card-alt" @size="xs" class="w-3 text-center" />
                {{t "order.schedule-card.driver-assigned"}}
                {{#let (cannot "fleet-ops assign-driver-for order") as |unauthorized|}}
                    <a href="javascript:;" class="text-indigo-400 hover:text-indigo-300 {{if unauthorized 'opacity-40 pointer-events-none'}}" {{on "click" this.startAssignDriver}}>
                        <FaIcon @icon="pen" @size="xs" />
                    </a>
                    {{#if unauthorized}}
                        <Attach::Tooltip @class="clean" @animation="scale" @placement="right">
                            <InputInfo @text={{t "common.unauthorized"}} />
                        </Attach::Tooltip>
                    {{/if}}
                {{/let}}
            </dt>
            <dd class="truncate text-right">
                {{#if this.isAssigningDriver}}
                    <ModelSelect
                        @modelName="driver"
                        @selectedModel={{@order.driver_assigned}}
                        @placeholder={{t "order.schedule-card.select-driver"}}
                        @triggerClass="form-select form-input form-input-sm w-full"
                        @infiniteScroll={{false}}
                        @renderInPlace={{true}}
                        @allowClear={{true}}
                        @disabled={{@model.isLoading}}
                        @onChange={{this.assignDriver}}
                        @permission="fleet-ops assign-driver-for order"
                        as |model|
                    >
                        <span class="truncate uppercase text-xs">{{model.name}}</span>
                    </ModelSelect>
                {{else}}
                    <a
                        href="javascript:;"
                        disabled={{not @order.driver_assigned}}
                        class="truncate {{unless @order.driver_assigned 'text-gray-400 dark:text-gray-600'}}"
                        {{on "click" (fn this.onClickDriver @order.driver_assigned)}}
                    >
                        {{n-a @order.driver_assigned.name (t "order.schedule-card.no-driver")}}
                    </a>
                {{/if}}
            </dd>

            {{! Vehicle }}
            <dt class="flex items-center gap-1 text-gray-500 dark:text-gray-400 whitespace-nowrap">
                <FaIcon @icon="truck" @size="xs" class="w-3 text-center" />
                {{t "order.schedule-card.vehicle-assigned"}}
            </dt>
            <dd class="truncate text-right">
                {{#if @order.vehicle_assigned}}
                    <a href="javascript:;" class="truncate" {{on "click" (fn this.onClickVehicle @order.vehicle_assigned)}}>{{@order.vehicle_assigned.display_name}}</a>
                {{else if @order.driver_assigned.vehicle}}
                    <a href="javascript:;" class="truncate" {{on "click" (fn this.onClickVehicle @order.driver_assigned.vehicle)}}>{{@order.driver_assigned.vehicle_name}}</a>
                {{else}}
                    <span class="text-gray-400 dark:text-gray-600">{{t "order.schedule-card.no-vehicle"}}</span>
                {{/if}}
            </dd>

            {{! Destination }}
            <dt class="flex items-center gap-1 text-gray-500 dark:text-gray-400 whitespace-nowrap">
                <FaIcon @icon="location-dot" @size="xs" class="w-3 text-center" />
                {{t "order.schedule-card.destination"}}
            </dt>
            <dd class="truncate text-right">
                {{n-a @order.pickupName}}
            </dd>

        </dl>
    </div>

    {{yield}}
</div>