<?php
/**
 * @author 1902 Software
 * @copyright Copyright © 2023 1902 Software (https://1902software.com/magento/)
 * @package WriteTextAI_WriteTextAI
 */
?>
<div class="wtai-edit-pipelines-wrapper">
    <div class="wtai-pipelines wtai-custom-pipeline wtai-custom-block wtai-edit-pipeline-container"
        data-bind="visible: editKeywordPipelineVisible,
            css: {'wtai-clustered': editKeywordPipeline().autogenerated}"
    >
        <div class="wtai-pipeline wtai-pipeline-edit wtai-custom-pipeline-sortable-container">
            <div class="wtai-custom-pipeline-sortable-header">
                <div class="wtai-custom-pipeline-sortable-actions">
                    <button class="wtai-action wtai-close" data-bind="
                        click: function () { closeEditPipeline() },
                        disable: disableCloseAction
                    "></button>
                    <div class="wtai-dropdown-arrange-container" data-bind="hidden: editKeywordPipeline().autogenerated,
                        css: {'wtai-disabled': autoArrangeDisabled}">
                        <button data-toggle="dropdown"
                            class="wtai-action wtai-auto-arrange wtai-arrange-top"
                            id="wtaiDropdownArrangeBtn"
                            data-bind="
                                disable: autoArrangeDisabled,
                                css: {
                                    'wtai-disabled': autoArrangeDisabled
                                }
                            "
                        >
                        </button>
                        <div class="wtai-dropdown-arrange-dialog" id="wtaiDropdownArrangeDialog"
                                data-target="dropdown">
                            <ul>
                                <li data-bind="
                                    click: function() { arrangePipeline('difficulty')}
                                ">
                                    <?= $escaper->escapeHtml(__('Auto-arrange by difficulty')) ?>
                                </li>
                                <li data-bind="click: function() { arrangePipeline('volume')}">
                                    <?= $escaper->escapeHtml(__('Auto-arrange by volume')) ?>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="wtai-save-wrapper" data-bind="css: {
                                'wtai-disabled': saveDisabled
                            }">
                        <button class="wtai-action wtai-save" data-bind="
                            css: {
                                'wtai-disabled': saveDisabled
                            },
                            click: function () { saveEditPipeline() },
                            disable: saveDisabled
                        "></button>
                    </div>
                </div>
            </div>
            <div class="wtai-custom-pipeline-sortable-title"
                data-bind="text: editKeywordPipeline().autogenerated ? editKeywordPipeline().name : $t('Custom')">
                <?= $escaper->escapeHtml(__('Custom')) ?>
            </div>
            <div class="wtai-custom-pipeline-text" data-bind="visible: !editKeywordPipeline().autogenerated">
                <?= $escaper->escapeHtml(__('Difficulty levels do not apply to custom keywords')) ?>
            </div>
            <ul class="wtai-pipeline-edit wtai-keyword-edit-pipeline" id="wtaiKeywordEditPipeline" data-bind="
                foreach: { data: pipelineDifficulties, as: '$difficulty' }">
                <!-- Start of uneditable keywords -->
                <li class="wtai-keyword"  
                    data-bind="
                        visible: $parent.isPrevious($difficulty, $parent.editKeywordPipeline().currentLevel) &&
                            !$parent.isSkipped($difficulty, $parent.editKeywordPipeline().keywords ?? []),
                        css: {
                            'wtai-previous': $parent.isPrevious(
                                $difficulty, $parent.editKeywordPipeline().currentLevel
                            ),
                            'wtai-current': $difficulty === $parent.editKeywordPipeline().currentLevel
                        }
                    "
                >
                    <div class="wtai-keyword-title">
                        <span class="wtai-keyword-title-text wtai-edit-pipeline-keyword-text" data-bind="
                            text: $parent.getKeywordToEdit($difficulty)
                        "></span>
                    </div>
                    <div class="wtai-keyword-data wta-summary-data">
                        <span><?= $escaper->escapeHtml(__("Optimized")) ?></span>
                        <button class="wtai-see-more" data-bind="click: $parent.seeMoreData"></button>
                    </div>
                    <span class="tooltip-toggle"></span>
                    <span class="tooltip-content"
                        data-bind="visible: $parent.isPrevious(
                            $difficulty, $parent.editKeywordPipeline().currentLevel
                        )">
                        <?= /* @noEscape */ __('This keyword has already been used for optimization.') ?>
                    </span>
                </li>
                <!-- End of uneditable keywords -->
                <!-- Start of editable keywords -->
                <li class="wtai-edit-keyword-item"
                    data-bind="
                        visible:!$parent.isPrevious($difficulty, $parent.editKeywordPipeline().currentLevel) &&
                            !$parent.isSkipped($difficulty, $parent.editKeywordPipeline().keywords ?? []),
                        css: {
                            'wtai-visible':
                                !$parent.isPrevious(
                                    $difficulty, $parent.editKeywordPipeline().currentLevel
                                ) && !$parent.isSkipped(
                                    $difficulty, $parent.editKeywordPipeline().keywords ?? []
                                ),
                            'wtai-disabled': $parent.disableCloseAction()
                        },
                        attr: {
                            'data-wtai-difficulty': $difficulty,
                            'title': $parent.getKeywordTitle($difficulty, $parent.editKeywordPipeline().keywords ?? [])
                        }
                    "
                >
                    <div class="wtai-dragging">
                        <span data-bind="text: $parent.getKeywordToEdit($difficulty)"></span>
                    </div>
                    <div class="wtai-not-dragging">
                        <button class="wtai-keyword-input-btn"
                            data-bind="click: function (data, event) {
                                $parent.editKeywordItem(data, event, $difficulty)
                            }"
                        ></button>
                        <span class="wtai-keyword-text wtai-edit-pipeline-keyword-text"
                            data-bind="text: $parent.getKeywordToEdit($difficulty),
                                css: {
                                    'wtai-edit-pipeline-keyword-text-primary': $parent.isPrimaryKeyword(
                                        $parent.getKeywordData(
                                            $difficulty,
                                            $parent.editKeywordPipeline().keywords ?? [],
                                            'keyword'
                                        )
                                    )
                                }
                            "
                        ></span>
                        <button class="wtai-close"
                            data-bind="click: function () {
                                $parent.removeKeyword($difficulty)
                            }"
                        ></button>
                        <div class="wtai-keyword-data wta-summary-data">
                            <span data-bind="
                                text: $parent.getDifficulty($parent.getKeywordData(
                                    $difficulty,
                                    $parent.editKeywordPipeline().keywords ?? [],
                                    'difficulty'
                                ), true)
                            "></span>
                            <span class="wtai-volume">
                                <?= $escaper->escapeHtml(__("Volume")) ?>
                                <span data-bind="text: $parent.getKeywordData(
                                    $difficulty,
                                    $parent.editKeywordPipeline().keywords ?? [],
                                    'searchVolume'
                                )"></span>
                            </span>
                        </div>
                        <div class="wtai-input-fieldset">
                            <div class="wtai-keyword-input">
                                <input type="text" class="admin__control-text"
                                    placeholder="<?= $escaper->escapeHtmlAttr(__('Write your own keyword...')) ?>"
                                    data-bind="value: $parent.getKeywordInputActive($difficulty),
                                        event: {
                                            keyup: function (data, event) {
                                                $parent.updateKeyword(data, event, $difficulty) 
                                            },
                                            paste: $parent.onPaste,
                                            blur: function (data, event) {
                                                $parent.updateKeywordOnBlur(data, event, $difficulty);
                                            }
                                        },
                                        clickBubble: false" />
                                <span class="wtai-close-input"
                                    data-bind="click: function (data, event) {
                                        $parent.closeInputKeyword(data, event, $difficulty) 
                                    },
                                    event: {mousedown: function () { $parent.preventBlur() }}"
                                ></span>
                                <div class="wtai-input-keywords-error"></div>
                                <div class="wtai-edit-keyword-loading-mask"></div>
                            </div>
                            <span class="wtai-char-count" data-bind="text: $parent.getKeywordLength()"></span>
                        </div>
                    </div>  
                </li>
                <!-- End of editable keywords -->
                <!-- Start of placeholder keywords -->
                <li class="wtai-placeholder" data-bind="
                    attr: { 'wtai-placeholder-difficulty': $difficulty },
                    visible:
                        !$parent.isPrevious($difficulty, $parent.editKeywordPipeline().currentLevel) &&
                        $parent.isSkipped($difficulty, $parent.editKeywordPipeline().keywords ?? []),
                    css: { 
                        'wtai-previous-placeholder': $parent.isPrevious(
                            $difficulty,
                            $parent.editKeywordPipeline().currentLevel
                        )
                    },
                    click: function (data, event) {
                        $parent.addKeywordItemManually(data, event, $difficulty)
                    }
                ">
                    <span class="wtai-keyword-text wtai-edit-pipeline-keyword-text" data-wtai-placeholder-text="true">
                        <?= $escaper->escapeHtml(__("Type or drag from pool")); ?>
                    </span>
                </li>
                <!-- End of placeholder keywords -->
            </ul>
            <div class="wtai-custom-pipeline-sortable-actions wtai-sortable-actions-bottom">
                <button class="wtai-action wtai-close" data-bind="click: function () { closeEditPipeline() }"></button>
                <div class="wtai-dropdown-arrange-container" data-bind="hidden: editKeywordPipeline().autogenerated,
                    css: {'wtai-disabled': autoArrangeDisabled}">
                    <button data-toggle="dropdown"
                        class="wtai-action wtai-auto-arrange wtai-arrange-bottom"
                        id="wtaiDropdownArrangeBtnBottom"
                        data-bind="
                            disable: autoArrangeDisabled,
                            css: {
                                'wtai-disabled': autoArrangeDisabled
                            }
                        "
                    >
                    </button>
                    <div class="wtai-dropdown-arrange-dialog-bottom" id="wtaiDropdownArrangeDialogBottom"
                            data-target="dropdown">
                        <ul>
                            <li data-bind="
                                click: function() { arrangePipeline('difficulty')}
                            ">
                                <?= $escaper->escapeHtml(__('Auto-arrange by difficulty')) ?>
                            </li>
                            <li data-bind="click: function() { arrangePipeline('volume')}">
                                <?= $escaper->escapeHtml(__('Auto-arrange by volume')) ?>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="wtai-save-wrapper" data-bind="css: {
                            'wtai-disabled': saveDisabled
                        }">
                    <button class="wtai-action wtai-save" data-bind="
                        css: {
                            'wtai-disabled': saveDisabled
                        },
                        click: function () { saveEditPipeline() },
                        disable: saveDisabled
                    "></button>
                </div>
            </div>
            <div class="wtai-edit-pipeline-loading-mask"></div>
        </div>
    </div>
</div>