<ContentPanel @title="Details" @open={{true}} @isLoading={{@isLoading}} @actionButtons={{this.actionButtons}} @wrapperClass="bordered-top">
    <:title>
        <div class="ml-2 flex flex-row space-x-1">
            {{#if @resource.dispatched}}
                <Badge @hideStatusDot={{false}} @status="Dispatched" />
            {{/if}}
            {{#if @resource.adhoc}}
                <Badge @hideStatusDot={{false}} @disableHumanize={{true}} @status="success">{{t "order.fields.ad-hoc"}}</Badge>
            {{/if}}
        </div>
    </:title>
    <:default>
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-2 mb-4 mt-1">
            <div class="field-info-container">
                <div class="field-name">
                    <span>{{t "order.fields.driver-assigned"}}</span>
                </div>
                <div class="field-value">
                    <Driver::Pill
                        @driver={{@resource.driver_assigned}}
                        @onClick={{this.focusOrderAssignedDriver}}
                        @titleFallback="No driver assigned"
                        @titleClass={{unless @resource.driver_assigned "text-gray-300"}}
                    />
                </div>
            </div>
            <div class="field-info-container">
                <div class="field-name flex flex-row items-center justify-between">
                    <span>{{t "order.fields.vehicle-assigned"}}</span>
                </div>
                <div class="field-value">
                    <Vehicle::Pill @vehicle={{@resource.vehicle_assigned}} @titleFallback="No vehicle assigned" @titleClass={{unless @resource.vehicle_assigned "text-gray-300"}} />
                </div>
            </div>
            <div class="field-info-container">
                {{#if @resource.isMultiDrop}}
                    <div class="field-name">{{pluralize (t "order.fields.customer")}}</div>
                    <div class="field-value">
                        <Order::CustomerAvatarStack @waypoints={{@resource.orderWaypoints}} @size="sm" @overlap="tight" />
                    </div>
                {{else}}
                    <div class="field-name">{{t "order.fields.customer"}}</div>
                    <div class="field-value">
                        <div class="flex flex-row space-x-2">
                            <div>
                                <Image
                                    src={{avatar-url @resource.customer.photo_url}}
                                    @fallbackSrc={{config "defaultValues.contactImage"}}
                                    width="28"
                                    height="28"
                                    class="w-7 h-7 rounded-full ring-2 ring-gray-800 dark:ring-gray-700 shadow transition-shadow hover:shadow-md focus:shadow-md"
                                    alt={{@resource.customer.name}}
                                />
                            </div>
                            <div>
                                <div class="text-sm {{unless @resource.customer 'text-gray-300'}}">{{n-a @resource.customer.name "No customer"}}</div>
                                <div class="text-xs text-gray-400 dark:text-gray-500">{{n-a @resource.customer.phone "No phone"}}</div>
                            </div>
                        </div>
                    </div>
                {{/if}}
            </div>
            <div class="field-info-container">
                <div class="field-name">{{t "order.fields.facilitator"}}</div>
                <div class="field-value">
                    <div class="flex flex-row space-x-2">
                        <div>
                            <Image
                                src={{avatar-url @resource.facilitator.photo_url}}
                                @fallbackSrc={{config "defaultValues.contactImage"}}
                                width="28"
                                height="28"
                                class="w-7 h-7 rounded-full ring-2 ring-gray-800 dark:ring-gray-700 shadow transition-shadow hover:shadow-md focus:shadow-md"
                                alt={{@resource.facilitator.name}}
                            />
                        </div>
                        <div>
                            <div class="text-sm {{unless @resource.facilitator 'text-gray-300'}}">{{n-a @resource.facilitator.name "No facilitator"}}</div>
                            <div class="text-xs text-gray-400 dark:text-gray-500">{{n-a @resource.facilitator.phone "No phone"}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div class="field-info-container field-vertical-container dashed-bottom">
                <div class="field-name">ID</div>
                <ClickToCopy @value={{@resource.public_id}} class="field-value">{{n-a @resource.public_id}}</ClickToCopy>
            </div>
            <div class="field-info-container field-vertical-container dashed-bottom">
                <div class="field-name">{{t "common.internal-id"}}</div>
                <ClickToCopy @value={{@resource.internal_id}} class="field-value">{{n-a @resource.internal_id}}</ClickToCopy>
            </div>
            <div class="field-info-container field-vertical-container dashed-bottom">
                <div class="field-name">{{t "order.fields.tracking-number"}}</div>
                <ClickToCopy @value={{@resource.tracking_number.tracking_number}} class="field-value">{{n-a @resource.tracking_number.tracking_number}}</ClickToCopy>
            </div>
            <div class="field-info-container field-vertical-container dashed-bottom">
                <div class="field-name">{{t "order.fields.date-scheduled"}}</div>
                <div class="field-value">{{n-a @resource.scheduledAt}}</div>
            </div>
            <div class="field-info-container field-vertical-container dashed-bottom">
                <div class="field-name">{{t "order.fields.date-dispatched"}}</div>
                <div class="field-value">{{n-a @resource.dispatchedAt}}</div>
            </div>
            <div class="field-info-container field-vertical-container dashed-bottom">
                <div class="field-name">{{t "order.fields.date-started"}}</div>
                <div class="field-value">{{n-a @resource.startedAt}}</div>
            </div>
            <div class="field-info-container field-vertical-container dashed-bottom">
                <div class="field-name">{{t "common.type"}}</div>
                <div class="field-value">{{n-a (humanize @resource.type)}}</div>
            </div>
            {{#if @resource.pod_required}}
                <div class="field-info-container field-vertical-container">
                    <div class="field-name">{{t "order.fields.proof-of-delivery"}}</div>
                    <div class="field-value">{{n-a (smart-humanize @resource.pod_method)}}</div>
                </div>
            {{/if}}
        </div>
    </:default>
</ContentPanel>

{{! ORCHESTRATOR CONSTRAINTS (read-only view) }}
{{#if (or @resource.time_window_start @resource.time_window_end @resource.required_skills.length @resource.orchestrator_priority)}}
    <ContentPanel @title="Orchestrator Constraints" @open={{true}} @isLoading={{@isLoading}} @wrapperClass="bordered-top">
        <div class="grid grid-cols-2 gap-2 text-xs dark:text-gray-100">
            {{#if (or @resource.time_window_start @resource.time_window_end)}}
                <div class="field-info-container">
                    <div class="field-name">Earliest Arrival</div>
                    <div class="field-value">{{n-a @resource.time_window_start}}</div>
                </div>
                <div class="field-info-container">
                    <div class="field-name">Latest Arrival</div>
                    <div class="field-value">{{n-a @resource.time_window_end}}</div>
                </div>
            {{/if}}
            {{#if @resource.required_skills.length}}
                <div class="field-info-container col-span-2">
                    <div class="field-name">Required Skills</div>
                    <div class="field-value">{{join @resource.required_skills ", "}}</div>
                </div>
            {{/if}}
            {{#if @resource.orchestrator_priority}}
                <div class="field-info-container">
                    <div class="field-name">Priority</div>
                    <div class="field-value">{{@resource.orchestrator_priority}}</div>
                </div>
            {{/if}}
        </div>
    </ContentPanel>
{{/if}}