<?php
/**
 * @author 1902 Software
 * @copyright Copyright © 2023 1902 Software (https://1902software.com/magento/)
 * @package WriteTextAI_WriteTextAI
 */

 $parentBlock = $block->getParentBlock()->getParentBlock()->getParentBlock();
 $tooltipViewModel = $parentBlock->getTooltip();
?>
<div class="wtai-pipeline-wrapper"
    data-bind="attr: {
        id: 'wtai-wrapper-'+$pipeline.id
    }"
>
    <div class="wtai-pipeline"
        data-bind="css: {
            'wtai-pipeline-locked': $parent.isPipelineLocked($pipeline.id),
            'wtai-custom-pipeline-sortable-container': !$pipeline.autogenerated,
            'wtai-no-actions': $parent.hidePipelineActions()
        },  attr: {
            id: 'wtai-id-'+$pipeline.id,
            hidden: $parent.isPipelineActiveEdit($pipeline.id)
        }"
    >
        <div class="wtai-actions wtai-pipeline-header-actions" data-bind="css: {
            'wtai-hidden-actions': $parent.hidePipelineActions()
        }">
            <button class="wtai-action wtai-delete"
                data-bind="disable: $parent.disableAction,
                    click: function () { $parent.deleteKeywordPipeline($pipeline.id) }"></button>
            <div class="wtai-lock-actions">
                <button class="wtai-action wtai-lock wtai-upper-lock"
                    data-bind="
                        disable: $parent.disableAction,
                        css: {
                            'wtai-locked': $parent.isPipelineLocked($pipeline.id),
                            'wtai-disabled': $parent.disableAction,
                        },
                        click: function () { $parent.toggleLockPipeline($pipeline.id, $pipeline.locked) },
                        visible: $pipeline.autogenerated,
                        attr: {
                            title: $parent.isPipelineLocked($pipeline.id) ?
                                '<?= /* @noEscape */ $tooltipViewModel->getTooltip('wtai.pipeline.unlocked')?>' :
                                '<?= /* @noEscape */ $tooltipViewModel->getTooltip('wtai.pipeline.locked') ?>'
                        }
                    "
                >
                </button>
            </div>
            <button class="wtai-action wtai-edit" 
                data-bind="click: function () { $parent.editPipeline($pipeline.id) },
                    disable: $parent.disableAction,
                    attr: {
                        title: $pipeline.autogenerated ?
                            '<?= $block->escapeHtmlAttr(
                                __('Any edits you make are automatically saved as a custom pipeline.')
                            ) ?>' :
                            ''
                    }
                ">
            </button>
        </div>
        <div class="wtai-topic" data-bind="text: $pipeline.autogenerated ? $pipeline.name : $t('Custom')"></div>
        <div class="wtai-custom-pipeline-text" data-bind="visible: !$pipeline.autogenerated">
            <?= $block->escapeHtml(__('Difficulty levels do not apply to custom keywords')) ?>
        </div>
        <ul class="wtai-keyword-pipeline" data-bind="
            afterRender: $parent.afterRenderPipeline($index(), !$pipeline.autogenerated)
        ">
            <?= $block->getChildHtml('wtai.pipeline.keyword.high') ?>
            <?= $block->getChildHtml('wtai.pipeline.keyword.midhigh') ?>
            <?= $block->getChildHtml('wtai.pipeline.keyword.mid') ?>
            <?= $block->getChildHtml('wtai.pipeline.keyword.lowmid') ?>
            <?= $block->getChildHtml('wtai.pipeline.keyword.low') ?>
        </ul>
        <div class="wtai-actions wtai-actions-bottom" data-bind="css: {
            'wtai-hidden-actions': $parent.hidePipelineActions()
        }">
            <button class="wtai-action wtai-delete wtai-delete-bottom"
                data-bind="disable: $parent.disableAction,
                    click: function () { $parent.deleteKeywordPipeline($pipeline.id) }"></button>
            <div class="wtai-lock-actions">
                <button class="wtai-action wtai-lock"
                    data-bind="
                        disable: $parent.disableAction,
                        css: {
                            'wtai-locked': $parent.isPipelineLocked($pipeline.id),
                            'wtai-disabled': $parent.disableAction,
                        },
                        click: function () { $parent.toggleLockPipeline($pipeline.id, $pipeline.locked) },
                        visible: $pipeline.autogenerated,
                        attr: {
                            title: $parent.isPipelineLocked($pipeline.id) ?
                                '<?= /* @noEscape */ $tooltipViewModel->getTooltip('wtai.pipeline.unlocked')?>' :
                                '<?= /* @noEscape */ $tooltipViewModel->getTooltip('wtai.pipeline.locked') ?>'
                        }
                    "
                >
                </button>
            </div>
            <button class="wtai-action wtai-edit wtai-edit-bottom" 
                data-bind="click: function () { $parent.editPipeline($pipeline.id) },
                    disable: $parent.disableAction,
                    attr: {
                        title: $pipeline.autogenerated ?
                            '<?= $block->escapeHtmlAttr(
                                __('Any edits you make are automatically saved as a custom pipeline.')
                            ) ?>' :
                            ''
                    }
                ">
            </button>
        </div>
        <div class="wtai-pipeline-edit-active-mask" data-bind="visible: $parent.isEditMaskVisible"></div>
        <div class="wtai-pipeline-loading-mask" data-bind="attr: { id: 'wtai-loader-' + $pipeline.id }"></div>
    </div>
</div>