<ContentPanel @title={{t "order.fields.payload-entities"}} @open={{true}} @wrapperClass="bordered-top">
    <div>
        {{#unless @resource.imported}}
            <div class="flex items-center mb-4">
                <Button
                    @wrapperClass="mr-2"
                    @icon="square-plus"
                    @iconPrefix="fas"
                    @text={{t "order.fields.add-item-order"}}
                    @size="sm"
                    @onClick={{this.addEntity}}
                    @permission="fleet-ops create order"
                />
                {{#if @orderConfig.entities}}
                    <DropdownButton
                        @type="magic"
                        @icon="ellipsis-h"
                        @size="sm"
                        @iconPrefix="fas"
                        @text={{t "order.fields.add-entity"}}
                        @triggerClass="mr-2 hidden md:flex"
                        @permission="fleet-ops create order"
                        as |dd|
                    >
                        <div class="next-dd-menu mt-1 mx-0" aria-labelledby="user-menu">
                            {{#each @orderConfig.entities as |customEntity|}}
                                <div class="p-1">
                                    <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.addFromCustomEntity customEntity)}}>
                                        <div class="w-7 flex-grow-0 flex-shrink-0">
                                            <FaIcon @icon="cube" />
                                        </div>
                                        <div>
                                            <div class="font-semibold">{{customEntity.name}}</div>
                                            <span class="text-xs">{{customEntity.description}}</span>
                                        </div>
                                    </a>
                                </div>
                            {{/each}}
                        </div>
                    </DropdownButton>
                {{/if}}
                <RegistryYield @registry="fleet-ops:component:order:form:payload:entity" as |RegistryComponent|>
                    <RegistryComponent @order={{@resource}} @controller={{@controller}} />
                </RegistryYield>
            </div>
        {{/unless}}
        {{#if @resource.imported}}
            <div class="space-y-2">
                {{#each this.entitiesByImportId as |group|}}
                    <div class="rounded-md border border-gray-200 dark:border-gray-900 p-3">
                        <div class="mb-3 flex justify-between">
                            <div class="w-3/4">
                                <div class="dark:text-gray-100 text-sm">{{t "order.fields.items-drop"}}</div>
                                <h4 class="font-bold dark:text-gray-100">{{group.waypoint.place.address}}</h4>
                            </div>
                            <div>
                                <Button @icon="plus" @iconPrefix="fas" @text={{t "order.fields.add-item-button"}} @size="sm" @onClick={{fn this.addEntity group.importId}} />
                            </div>
                        </div>
                        <div class="grid grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-2">
                            {{#each group.entities as |entity index|}}
                                <div class="col-3">
                                    <div class="w-full rounded-md bg-gray-100 dark:bg-gray-900 shadow-sm p-3 relative">
                                        <div class="flex items-center justify-center mb-3">
                                            <img src={{entity.photo_url}} class="w-12 h-12" alt={{or entity.name entity.public_id}} />
                                        </div>
                                        <div class="space-y-2">
                                            <div>
                                                <Input @value={{entity.name}} @type="text" class="w-full form-input form-input-sm" placeholder={{t "common.name"}} />
                                            </div>
                                            <div>
                                                <Input @value={{entity.sku}} @type="text" class="w-full form-input form-input-sm" placeholder={{t "order.fields.sku"}} />
                                            </div>
                                            <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                                                <PowerSelect
                                                    @options={{get-fleet-ops-options "entityTypes"}}
                                                    @selected={{find-by "value" entity.type (get-fleet-ops-options "entityTypes")}}
                                                    @onChange={{set-model-attr entity "type"}}
                                                    @placeholder="Select entity type"
                                                    @triggerClass="form-select"
                                                    as |type|
                                                >
                                                    <div class="text-sm">
                                                        <div class="font-semibold normalize-in-trigger">{{type.label}}</div>
                                                        <div class="hide-from-trigger">{{type.description}}</div>
                                                    </div>
                                                </PowerSelect>
                                            </div>
                                            <RegistryYield @registry="fleet-ops:component:order:form:payload:entity:form" as |RegistryComponent|>
                                                <RegistryComponent @entity={{entity}} @order={{@resource}} @controller={{this}} />
                                            </RegistryYield>
                                            <Button @icon="pencil" @text={{t "order.fields.edit-item"}} @size="sm" @onClick={{fn this.editEntity entity}} />
                                        </div>
                                        <div class="absolute top-0 right-0 p-2">
                                            <Button
                                                @icon="times"
                                                @iconPrefix="fas"
                                                @type="danger"
                                                @size="xs"
                                                @onClick={{fn this.removeEntity entity}}
                                                @wrapperClass={{if (eq index 0) "invisible"}}
                                            />
                                        </div>
                                    </div>
                                </div>
                            {{/each}}
                        </div>
                    </div>
                {{/each}}
            </div>
        {{else}}
            <div class="grid grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-2">
                {{#each @resource.payload.entities as |entity index|}}
                    <div>
                        <div class="w-full rounded-md bg-gray-100 dark:bg-gray-900 shadow-sm p-3 relative">
                            <div class="flex items-center justify-center mb-3">
                                <img src={{entity.photo_url}} class="w-12 h-12" alt={{or entity.name entity.public_id}} />
                            </div>
                            <div class="space-y-2">
                                <div>
                                    <Input @value={{entity.name}} @type="text" class="w-full form-input form-input-sm" placeholder={{t "common.name"}} />
                                </div>
                                <div>
                                    <Input @value={{entity.sku}} @type="text" class="w-full form-input form-input-sm" placeholder={{t "order.fields.sku"}} />
                                </div>
                                <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                                    <PowerSelect
                                        @options={{get-fleet-ops-options "entityTypes"}}
                                        @selected={{find-by "value" entity.type (get-fleet-ops-options "entityTypes")}}
                                        @onChange={{set-model-attr entity "type"}}
                                        @placeholder="Select entity type"
                                        @triggerClass="form-select"
                                        as |type|
                                    >
                                        <div class="text-sm">
                                            <div class="font-semibold normalize-in-trigger">{{type.label}}</div>
                                            <div class="hide-from-trigger">{{type.description}}</div>
                                        </div>
                                    </PowerSelect>
                                </div>
                                <RegistryYield @registry="fleet-ops:component:order:form:payload:entity:form" as |RegistryComponent|>
                                    <RegistryComponent @entity={{entity}} @order={{@resource}} @controller={{this}} />
                                </RegistryYield>
                                {{#if @resource.payload.waypoints.length}}
                                    <Select
                                        @value={{entity.destination_uuid}}
                                        @options={{@resource.payload.waypoints}}
                                        @optionValue="place.id"
                                        @optionLabel="place.address"
                                        @placeholder={{t "order.fields.select-destination"}}
                                        @onChange={{fn this.setEntityDestionation index}}
                                        class="w-full form-input-sm"
                                    />
                                {{/if}}
                                <Button @icon="pencil" @text={{t "order.fields.edit-item"}} @size="sm" @onClick={{fn this.editEntity entity}} />
                            </div>
                            <div class="absolute top-0 right-0 p-2">
                                <Button @icon="times" @iconPrefix="fas" @type="danger" @size="xs" @onClick={{fn this.removeEntity entity}} @wrapperClass={{if (eq index 0) "invisible"}} />
                            </div>
                        </div>
                    </div>
                {{/each}}
            </div>
        {{/if}}
    </div>
</ContentPanel>