<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>