</InputGroup>
                            </div>
                        </div>
                        <div>
                            {{#each section.aisles as |aisle|}}
                                <div>
                                    <div class="flex flex-row items-center px-4 py-2 border border-gray-700 rounded-md">
                                        <div>{{aisle.name}}</div>
                                        <div class="flex flex-row items-center justify-end">
                                            <Button @icon="trash" @type="danger" @onClick={{fn this.removeAisle aisle}} />
                                            <Button @text="Add Rack" @icon="plus" @onClick={{fn this.addRack aisle}} />
                                        </div>
                                    </div>
                                    <div class="flex flex-col">
                                        <InputGroup @name="Name">
                                            <Input @value={{aisle.name}} @type="text" class="w-full form-input" placeholder="Name" />
                                        </InputGroup>
                                        <InputGroup @name="Description" @helpText="Additional description text of section.">
                                            <Textarea @value={{aisle.description}} type="text" class="w-full form-input" placeholder="Description" />
                                        </InputGroup>
                                    </div>
                                </div>
                                <div>
                                    {{#each aisle.racks as |rack|}}
                                        <div>
                                            <div class="flex flex-row items-center px-4 py-2 border border-gray-700 rounded-md">
                                                <div>{{rack.name}}</div>
                                                <div class="flex flex-row items-center justify-end">
                                                    <Button @icon="trash" @type="danger" @onClick={{fn this.removeRack rack}} />
                                                    <Button @text="Add Bin" @icon="plus" @onClick={{fn this.addBin rack}} />
                                                </div>
                                            </div>
                                            <div class="flex flex-col">
                                                <InputGroup @name="Name">
                                                    <Input @value={{rack.name}} @type="text" class="w-full form-input" placeholder="Name" />
                                                </InputGroup>
                                                <InputGroup @name="Description" @helpText="Additional description text of section.">
                                                    <Textarea @value={{rack.description}} type="text" class="w-full form-input" placeholder="Description" />
                                                </InputGroup>
                                            </div>
                                        </div>
                                        <div>
                                            {{#each rack.bins as |bin|}}
                                                <div>
                                                    <div class="flex flex-row items-center px-4 py-2 border border-gray-700 rounded-md">
                                                        <div>{{bin.bin_number}}</div>
                                                        <div class="flex flex-row items-center justify-end">
                                                            <Button @icon="trash" @type="danger" @onClick={{fn this.removeBin bin}} />
                                                        </div>
                                                    </div>
                                                    <div class="flex flex-col">
                                                        <InputGroup @name="Name">
                                                            <Input @value={{bin.bin_number}} @type="text" class="w-full form-input" placeholder="Bin Number" />
                                                        </InputGroup>
                                                    </div>
                                                </div>
                                            {{/each}}
                                        </div>
                                    {{/each}}
                                </div>
                            {{/each}}
                        </div>
                    {{/each}}
                </div>
            </div>
        </Overlay::Body>
    </Overlay>
</EmberWormhole>
{{!-- <div class="content-panel mb-2">
    <div class="content-panel-header items-center">
        <h3 class="text-lg font-semibold dark:text-gray-100">
            Create
        </h3>
        <Button @text="Add Section" @icon="plus" @iconPrefix="fas" @onClick={{this.addSection}} />
    </div>
    <div class="content-panel-body">
        {{#each this.warehouse.sections as |section|}}
            <div class="flex flex-row items-center px-4 py-2 border border-gray-700 rounded-md">
                <div>{{section.name}}</div>
                <div class="flex flex-row items-center justify-end">
                    <Button @icon="trash" @type="danger" @onClick={{fn this.removeSection section}} />
                    <Button @text="Add Aisle" @icon="plus" @onClick={{fn this.addAisle section}} />
                </div>
            </div>
            <div class="p-3">
                <div class="grid grid-cols-3 gap-2">
                    <InputGroup @name="Name" @wrapperClass="col-span-2">
                        <Input @value={{section.name}} @type="text" class="w-full form-input" placeholder="Name" />
                    </InputGroup>
                    <InputGroup @name="Description" @helpText="Additional description text of section." @wrapperClass="col-span-2 mb-2 onChange">
                        <Textarea @value={{section.description}} type="text" class="w-full form-input" placeholder="Description" />
                    </InputGroup>
                </div>
            </div>
            {{#each section.aisles as |aisle|}}
                <div class="flex flex-row items-center px-4 py-2 border border-gray-700 rounded-md">
                    <div class="flex flex-row items-center justify-end">
                        <Button @icon="trash" @type="danger" @onClick={{fn this.removeAisle aisle}} />
                        <Button @text="Add Racks" @icon="plus" @onClick={{fn this.addRacks aisle}} />
                    </div>
                </div>
                <div class="p-3">
                    <div class="grid grid-cols-3 gap-2">
                        <InputGroup @name="Aisle Number" @wrapperClass="col-span-2">
                            <Input @value={{aisle.aisle_number}} @type="text" class="w-full form-input" placeholder="Aisle Number" />
                        </InputGroup>
                    </div>
                </div>
                {{#each aisle.racks as |rack|}}
                    <div class="flex flex-row items-center px-4 py-2 border border-gray-700 rounded-md">
                        <div class="flex flex-row items-center justify-end">
                            <Button @icon="trash" @type="danger" @onClick={{fn this.removeRack rack}} />
                            <Button @text="Add Bins" @icon="plus" @onClick={{fn this.addBins rack}} />
                        </div>
                    </div>
                    <div class="p-3">
                        <div class="grid grid-cols-3 gap-2">
                            <InputGroup @name="Rack Number" @wrapperClass="col-span-2">
                                <Input @value={{rack.rack_number}} @type="text" class="w-full form-input" placeholder="Rack Number" />
                            </InputGroup>
                            <InputGroup @name="Rack Capacity" @wrapperClass="col-span-2">
                                <Input @value={{rack.capacity}} @type="text" class="w-full form-input" placeholder="Rack Capacity" />
                            </InputGroup>
                        </div>
                    </div>
                    {{#each rack.bins as |bin|}}
                        <div class="flex flex-row items-center px-4 py-2 border border-gray-700 rounded-md">
                            <div class="flex flex-row items-center justify-end">
                                <Button @icon="trash" @type="danger" @onClick={{fn this.removeBin bin}} />
                            </div>
                        </div>
                        <div class="p-3">
                            <div class="grid grid-cols-3 gap-2">
                                <InputGroup @name="Bin Number" @wrapperClass="col-span-2">
                                    <Input @value={{bin.bin_number}} @type="text" class="w-full form-input" placeholder="Bin Number" />
                                </InputGroup>
                                <InputGroup @name="Size" @wrapperClass="col-span-2">
                                    <Input @value={{bin.size}} @type="text" class="w-full form-input" placeholder="Size" />
                                </InputGroup>
                                <InputGroup @name="Max Weight" @wrapperClass="col-span-2">
                                    <Input @value={{bin.max_weight}} @type="text" class="w-full form-input" placeholder="Max Weight" />
                                </InputGroup>
                            </div>
                        </div>
                    {{/each}}
                {{/each}}
            {{/each}}
        {{/each}}
    </div>
    <div class="content-panel mb-2">
        <div class="content-panel-header items-center">
            <h3 class="text-lg font-semibold dark:text-gray-100">
                Docks
            </h3>
            <Button @text="Add Dock" @icon="plus" @iconPrefix="fas" @onClick={{this.addDock}} />
        </div>
        <div class="content-panel-body">
            {{#each this.warehouse.docks as |dock|}}
                <div class="flex flex-row items-center px-4 py-2 border border-gray-700 rounded-md">
                    <div class="flex flex-row items-center justify-end">
                        <Button @icon="trash" @type="danger" @onClick={{fn this.removeDock dock}} />
                    </div>
                    <div class="p-3">
                        <div class="grid grid-cols-3 gap-2">
                            <InputGroup @name="Dock Number" @wrapperClass="col-span-2">
                                <Input @value={{dock.dock_number}} @type="text" class="w-full form-input" placeholder="Dock Number" />
                            </InputGroup>
                            <InputGroup @name="Direction" @wrapperClass="col-span-2">
                                <Input @value={{dock.direction}} @type="text" class="w-full form-input" placeholder="Direction" />
                            </InputGroup>
                            <InputGroup @name="Capacity" @wrapperClass="col-span-2">
                                <Input @value={{dock.capacity}} @type="text" class="w-full form-input" placeholder="Capacity" />
                            </InputGroup>
                            <InputGroup @name="Status">
                                <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                                    <PowerSelect
                                        @options={{dock.statusOptions}}
                                        @selected={{dock.status}}
                                        @onChange={{fn (mut dock.status)}}
                                        @placeholder="Select dock status"
                                        @triggerClass="form-select form-input"
                                        as |status|
                                    >
                                        {{smart-humanize status}}
                                    </PowerSelect>
                                </div>
                            </InputGroup>
                            <InputGroup @name="Type">
                                <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                                    <PowerSelect
                                        @options={{dock.typeOptions}}
                                        @selected={{dock.type}}
                                        @onChange={{fn (mut dock.type)}}
                                        @placeholder="Select dock type"
                                        @triggerClass="form-select form-input"
                                        as |type|
                                    >
                                        {{smart-humanize type}}
                                    </PowerSelect>
                                </div>
                            </InputGroup>
                        </div>
                    </div>
                </div>
            {{/each}}
        </div>
    </div>
</div> --}}