<div class="order-config-activity-flow-editor" {{did-insert this.setupComponent}} ...attributes>
    <div class="content-panel mb-20">
        <div class="content-panel-header items-center">
            <h3 class="text-lg font-semibold dark:text-gray-100">
                {{t "fleet-ops.component.order-config.activity-flow-editor.title"}}
            </h3>

            <Button @icon="plus" @iconPrefix="fas" @text="New Status" @size="sm" @onClick={{this.newStatus}} />
        </div>
        <div class="content-panel-body no-padding">
            <div class="my-6 px-5">
                <p>{{t "fleet-ops.component.order-config.activity-flow-editor.message"}}</p>
            </div>

            <div class="ui-tabs mb-4">
                <nav>
                    <a href="javascript:;" class="ui-tab {{if (eq this.activeTab 'order') 'active'}}" {{on "click" (fn (mut this.activeTab) "order")}}>
                        {{t "fleet-ops.component.order-config.activity-flow-editor.order-flow"}}
                    </a>
                    <a href="javascript:;" class="ui-tab {{if (eq this.activeTab 'waypoint') 'active'}}" {{on "click" (fn (mut this.activeTab) "waypoint")}}>
                        {{t "fleet-ops.component.order-config.activity-flow-editor.waypoint-flow"}}
                    </a>
                </nav>
            </div>

            {{#if @orderConfig.meta.flow}}
                <div class="px-5">
                    {{#if this.flow}}
                        <Dragula @onDrop={{this.moveStatus}} @onReady={{this.setDragulaInstance}} as |Container|>
                            <Container class="activity-flow-connector">
                                {{#each-in this.activeFlow as |status activity|}}
                                    <div data-status={{status}} class="activity-flow-sub-connector {{dasherize (flow-raw-status status)}}-flow pb-6">
                                        <div class="activity-status relative cursor-move flex items-center justify-center mb-6">
                                            <div
                                                class="relative px-3 py-2 status-element
                                                    {{dasherize (flow-raw-status status)}}-status-element rounded-md flex flex-col items-center justify-center"
                                            >
                                                <Badge @status={{flow-raw-status status}} class="status-badge-lg shadow-none" />
                                                <Button
                                                    @text={{t "fleet-ops.component.order-config.activity-flow-editor.new-activity"}}
                                                    @icon="plus"
                                                    @iconPrefix="fas"
                                                    @wrapperClass="my-2"
                                                    @onClick={{fn this.addNewActivity status}}
                                                />
                                                {{#if (not (includes status (w "created dispatched completed")))}}
                                                    <div class="absolute top-0 right-0">
                                                        <button
                                                            type="button"
                                                            class="flex items-center justify-center rounded-full w-6 h-6 bg-gray-900 font-semibold text-white -mt-3 -mr-3 shadow-sm"
                                                            {{on "click" (fn this.removeStatus status)}}
                                                        >
                                                            <FaIcon @prefix="fas" @icon="times" class="text-white" />
                                                        </button>
                                                    </div>
                                                {{/if}}
                                            </div>
                                        </div>
                                        <div class="activity-events-list">
                                            {{#each activity.events as |event|}}
                                                <div class="shadow-sm border-2 status-element-border {{dasherize (flow-raw-status status)}}-status-element dark:bg-gray-800 bg-gray-100">
                                                    <div class="p-3 border-b border-gray-300 dark:border-gray-900">
                                                        <div class="mb-4 flex items-center justify-between">
                                                            <div>
                                                                <FaIcon @icon="sitemap" class="mr-2 dark:text-sky-300" />
                                                                <span class="dark:text-gray-100 text-sm">{{t "fleet-ops.component.order-config.activity-flow-editor.activity-details"}}</span>
                                                            </div>
                                                            <a href="javascript:;" class="btn btn-danger btn-sm" {{on "click" (fn this.removeActivity status event)}}>
                                                                <FaIcon @icon="trash" />
                                                            </a>
                                                        </div>
                                                        <div class="grid grid-cols-3 gap-2">
                                                            <InputGroup @name={{t "fleet-ops.common.status"}} @value={{event.status}} />
                                                            <InputGroup @name={{t "fleet-ops.common.code"}} @value={{event.code}} />
                                                            <InputGroup @name={{t "fleet-ops.common.details"}} @value={{event.details}} />
                                                        </div>
                                                    </div>
                                                    <div class="p-3">
                                                        <div class="mb-4 flex items-center justify-between">
                                                            <div>
                                                                <FaIcon @icon="project-diagram" class="mr-2 dark:text-sky-300" />
                                                                <span class="dark:text-gray-100 text-sm">{{t "fleet-ops.component.order-config.activity-flow-editor.logic-stack"}}</span>
                                                            </div>
                                                            <Button
                                                                @text={{t "fleet-ops.component.order-config.activity-flow-editor.add-logic"}}
                                                                @icon="plus"
                                                                @iconPrefix="fas"
                                                                @onClick={{fn this.addLogicCondition status event}}
                                                            />
                                                        </div>
                                                        <div class="space-y-3 mb-3">
                                                            {{#each event.if as |logic conditionIndex|}}
                                                                <div class="grid grid-cols-5 gap-2">
                                                                    <div class="flex items-center col-span-2">
                                                                        <div
                                                                            class="py-2 px-3 rounded flex items-center justify-center text-center text-sm font-bold text-mono mr-3 dark:text-gray-50 border border-gray-50 dark:border-gray-900"
                                                                        >
                                                                            if
                                                                        </div>
                                                                        <Select
                                                                            @options={{this.configFields}}
                                                                            @value={{get logic 0}}
                                                                            @placeholder="Select field"
                                                                            class="flex-1 w-full"
                                                                            @onSelect={{fn this.updateActivityLogic status event conditionIndex 0}}
                                                                        />
                                                                    </div>
                                                                    <Select
                                                                        @options={{this.logicOperators}}
                                                                        @value={{get logic 1}}
                                                                        @optionLabel="label"
                                                                        @optionValue="value"
                                                                        @onSelect={{fn this.updateActivityLogic status event conditionIndex 1}}
                                                                        @placeholder={{t "fleet-ops.component.order-config.activity-flow-editor.select-operator"}}
                                                                    />
                                                                    <div class="flex items-center col-span-2">
                                                                        <Input
                                                                            @type="text"
                                                                            @value={{get logic 2}}
                                                                            {{on "keyup" (fn this.updateActivityLogic status event conditionIndex 2)}}
                                                                            placeholder={{t "fleet-ops.component.order-config.activity-flow-editor.enter-value"}}
                                                                            class="form-input w-full flex-1 mr-3"
                                                                        />
                                                                        <Button @size="sm" @icon="trash" @onClick={{fn this.removeLogicCondition event logic}} />
                                                                    </div>
                                                                </div>
                                                            {{else}}
                                                                <div class="flex items-center justify-center">
                                                                    <div
                                                                        class="rounded bg-gray-300 dark:bg-gray-700 shadow-sm text-sm text-center px-6 py-3 dark:text-gray-100 border border-dashed border-gray-500 dark:border-gray-900"
                                                                    >{{t "fleet-ops.component.order-config.activity-flow-editor.no-logic"}}</div>
                                                                </div>
                                                            {{/each}}
                                                        </div>
                                                    </div>

                                                </div>
                                            {{/each}}
                                        </div>
                                    </div>
                                {{/each-in}}
                            </Container>
                        </Dragula>
                    {{/if}}
                </div>
            {{/if}}
        </div>
    </div>
</div>