<div class="order-config-meta-fields-editor" ...attributes>
    <div class="content-panel">
        <div class="content-panel-header items-center">
            <h3 class="text-lg font-semibold dark:text-gray-100">
                {{t "fleet-ops.component.order-config.fields-editor.field-title"}}
            </h3>
            <div>
                <Button @icon="plus" @iconPrefix="fas" @text={{t "fleet-ops.component.order-config.fields-editor.new-field"}} @size="sm" @onClick={{this.addField}} />
                <Button @icon="plus" @iconPrefix="fas" @text={{t "fleet-ops.component.order-config.fields-editor.new-custom-field"}} @size="sm" @onClick={{this.addMetaFieldGroup}} />
            </div>
        </div>
        <div class="content-panel-body">
            <div class="mb-6">
                <p>{{t "fleet-ops.component.order-config.fields-editor.field-text"}}</p>
            </div>

            <Dragula @onDrop={{this.moveMetaField}} as |Container|>
                {{#each this.groupedMetaFields as |group|}}
                    <div class="content-panel">
                        <div class="content-panel-header items-center">
                            <div class="font-semibold dark:text-gray-100">
                                <span class="mr-1">{{t "fleet-ops.component.order-config.fields-editor.custom-field-group"}}:</span>
                                {{#if group.value}}
                                    <span>{{smart-humanize group.value}}</span>
                                {{else}}
                                    <span>{{t "fleet-ops.component.order-config.fields-editor.default-field"}}</span>
                                {{/if}}
                            </div>

                            <div>
                                <Button @icon="plus" @iconPrefix="fas" @text={{t "fleet-ops.component.order-config.fields-editor.new-field"}} @size="sm" @onClick={{fn this.addField group.value}} />
                                {{#if group.value}}
                                    <Button @type="danger" @icon="times" @iconPrefix="fas" @size="sm" @onClick={{fn this.removeGroup group.value}} />
                                {{/if}}
                            </div>
                        </div>

                        <div class="content-panel-body">
                            <Container data-meta-group-key={{or group.value "default"}} class="space-y-2">
                                {{#each group.items as |metaField|}}
                                    <div class="content-panel cursor-move">
                                        <div class="content-panel-header items-center">
                                            <div class="font-semibold dark:text-gray-100">
                                                <span class="mr-1">{{t "fleet-ops.component.order-config.fields-editor.custom-field"}}:</span>
                                                <span>{{metaField.label}}</span>
                                            </div>
                                            <a href="javascript:;" {{on "click" (fn this.removeField metaField)}} class="btn btn-danger btn-sm">
                                                <FaIcon @icon="trash" />
                                            </a>
                                        </div>
                                        <div class="content-panel-body">
                                            <div class="grid grid-cols-1 lg:grid-cols-3 gap-2" data-meta-field-key={{metaField.key}}>
                                                <InputGroup @name="Label" @value={{metaField.label}} {{on "keyup" (fn this.setFieldLabel metaField)}} />
                                                <div class="input-group {{if (eq metaField.type "select") 'col-span-2'}}">
                                                    <div class="flex items-center justify-between">
                                                        <label class="font-medium flex-1">{{t "fleet-ops.component.order-config.fields-editor.type"}}</label>
                                                    </div>
                                                    <div class="flex items-center justify-between">
                                                        <Select class="w-full" @value={{metaField.type}} @options={{this.metaFieldTypes}} @optionLabel="label" @optionValue="key" @placeholder={{t "fleet-ops.component.order-config.fields-editor.select-type"}} @onSelect={{fn (mut metaField.type)}} />
                                                        {{#if (eq metaField.type "select")}}
                                                            <div class="pl-2">
                                                                <BasicDropdown @renderInPlace={{false}} as |dd|>
                                                                    <dd.Trigger class="btn btn-default py-2.5 cursor-pointer">
                                                                        <FaIcon @icon="cog" class="mr-1" /> Options
                                                                    </dd.Trigger>
                                                                    <dd.Content class="bg-transparent">
                                                                        <div class="w-80 mt-2 rounded shadow-md be-white dark:bg-gray-800">
                                                                            <div class="border border-gray-300 shdaow-sm rounded dark:border-gray-900">
                                                                                <div class="flex items-start justify-between mb-1 p-3">
                                                                                    <Button @type="primary" @size="xs" @text={{t "fleet-ops.component.order-config.fields-editor.add-option"}} @onClick={{fn this.addMetaFieldOption metaField}} />
                                                                                    <div class="flex flex-col space-y-3">
                                                                                        <Toggle @label="Key-Value" @isToggled={{metaField.useKvOptions}} @onToggle={{fn this.toggleMetaFieldKv metaField}} />
                                                                                        {{#unless metaField.useKvOptions}}
                                                                                            <Toggle @label="Humanize" @isToggled={{metaField.humanizeOptions}} @onToggle={{fn this.toggleMetaFieldHumanizeOptions metaField}} />
                                                                                        {{/unless}}
                                                                                    </div>
                                                                                </div>
                                                                                <Dragula @onDrop={{fn this.sortMetaFieldOptions metaField}} as |SubContainer|>
                                                                                    <SubContainer>
                                                                                        {{#each metaField.options as |option index|}}
                                                                                            <div id={{option.id}} class="meta-field-option z-50 py-2 px-3 cursor-move border-b border-gray-300 dark:border-gray-900 last:border-b-0" data-index={{index}}>
                                                                                                <div class="flex items-start justify-between">
                                                                                                    <FaIcon @icon="grip-lines" class="mr-2" />
                                                                                                    <div class="flex items-start flex-1">
                                                                                                        <div class="space-y-3 flex flex-col pr-2 flex-1">
                                                                                                            {{#if metaField.useKvOptions}}
                                                                                                                <Input @type="text" @value={{option.key}} class="form-input form-input-sm" placeholder={{t "fleet-ops.common.key"}} />
                                                                                                            {{/if}}
                                                                                                            <Input @type="text" @value={{option.value}} class="form-input form-input-sm" placeholder={{t "fleet-ops.common.value"}} />
                                                                                                        </div>
                                                                                                        <Button @size="xs" @type="danger" @icon="trash" @onClick={{fn this.removeMetaFieldOption metaField option}} />
                                                                                                    </div>
                                                                                                </div>
                                                                                            </div>
                                                                                        {{/each}}
                                                                                    </SubContainer>
                                                                                </Dragula>
                                                                            </div>
                                                                        </div>
                                                                    </dd.Content>
                                                                </BasicDropdown>
                                                            </div>
                                                        {{/if}}
                                                    </div>
                                                </div>
                                                <InputGroup @name={{t "fleet-ops.common.description"}} @value={{metaField.description}} />
                                                <div class="input-group">
                                                    <Checkbox @label="Required" @onToggle={{fn (mut metaField.required)}} @value={{metaField.required}} />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                {{/each}}
                            </Container>
                        </div>
                    </div>
                {{/each}}
            </Dragula>
        </div>
    </div>
    {{yield}}
</div>