<?php
/**
 * @author 1902 Software
 * @copyright Copyright © 2023 1902 Software (https://1902software.com/magento/)
 * @package WriteTextAI_WriteTextAI
 */
?>
<div class="wtai-edit-keyword-ranking-wrapper" data-bind="visible: editKeywordRankingVisible">
    <div class="wtai-pipelines wtai-custom-pipeline wtai-custom-block wtai-edit-keyword-ranking-container"
    >
        <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 () { closeEditKeywordRanking() }"></button>
                    <div class="wtai-save-wrapper">
                        <button class="wtai-action wtai-save"
                            data-bind="disable: saveDisabled, click: saveEditKeywordRanking"></button>
                    </div>
                </div>
            </div>
            <div class="wtai-custom-pipeline-sortable-title">
                <?= $escaper->escapeHtml(__('Keywords you are currently ranking for')) ?>
            </div>
            <ul class="wtai-keyword-edit-pipeline" id="wtaiKeywordEditPipeline" data-bind="
                foreach: { data: editKeywordRankingItems, as: '$keyword' }">
                <!-- Start of editable keywords -->
                <li class="wtai-edit-keyword-item"
                    data-bind="css: { '_wtai-hidden': $keyword.removed },
                        attr: {
                            'title': $parent.getKeywordTitle($keyword)
                        }">
                    <div class="wtai-not-dragging">
                        <span class="wtai-keyword-text wtai-edit-pipeline-keyword-text"
                            data-bind="text: $keyword.keyword,
                            css: {
                                'wtai-edit-pipeline-keyword-text-primary': $parent.isPrimaryKeyword($keyword.keyword)
                            }"
                        ></span>
                        <button class="wtai-close"
                            data-bind="click: function () { $parent.removeKeyword($index()) }"></button>
                        <div class="wtai-keyword-data wta-summary-data">
                            <span data-bind="
                                text: $parent.getDifficulty($keyword.difficulty, true)
                            "></span>
                            <span class="wtai-volume">
                                <?= $escaper->escapeHtml(__("Volume")) ?>
                                <span data-bind="text: $keyword.searchVolume"></span>
                            </span>
                        </div>
                    </div>  
                </li>
                <!-- End of editable keywords -->
            </ul>
            <div class="wtai-custom-pipeline-sortable-actions wtai-sortable-actions-bottom">
                <button class="wtai-action wtai-close"
                    data-bind="click: function () { closeEditKeywordRanking() }"></button>
                <div class="wtai-save-wrapper">
                    <button class="wtai-action wtai-save"
                        data-bind="disable: saveDisabled, click: saveEditKeywordRanking"></button>
                </div>
            </div>
            <div class="wtai-edit-pipeline-loading-mask"></div>
        </div>
    </div>
</div>