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

<?php
$difficulty = $block->getDifficulty();
$triggerSettingsBlock = 'wtai.trigger.settings.' . strtolower($difficulty);
$serpBlock = 'wtai.serp.popup.' . strtolower($difficulty);
?>

<?php if ($difficulty !== 'High'): ?>
<div class="wtai-pipeline-between-keywords" data-bind="
    hidden: $parent.isSkipped(
        '<?= $block->escapeHtmlAttr($difficulty) ?>',
        $pipeline.keywords
    ),
    css: {
        'wtai-previous-was-skipped': $parent.isPreviousSkipped(
            '<?= $block->escapeHtmlAttr($difficulty) ?>',
            $pipeline.keywords
        ),
        'wtai-all-above-skipped': $parent.areAllKeywordsAboveSkipped(
            '<?= $block->escapeHtmlAttr($difficulty) ?>',
            $pipeline.keywords
        )
    },
    attr: { 'wtai-data-skipped-count': $parent.countSkippedKeywords(
        '<?= $block->escapeHtmlAttr($difficulty) ?>',
        $pipeline.keywords
    )}
">
    <div class="wtai-arrow-head" data-bind="
        css: {
            'wtai-active': $parent.isCurrent(
                '<?= $block->escapeHtmlAttr($difficulty) ?>',
                $pipeline.currentLevel
            ),
            'wtai-previous-none': $parent.isPreviousNone(
                '<?= $block->escapeHtmlAttr($difficulty) ?>',
                $pipeline.id
            )
        },
        visible: $parent.isNext(
            '<?= $block->escapeHtmlAttr($difficulty) ?>',
            $pipeline.currentLevel
        ) || $parent.isCurrent(
            '<?= $block->escapeHtmlAttr($difficulty) ?>',
            $pipeline.currentLevel
        )
    "></div>
    <div class="wtai-trigger-settings-wrapper" data-bind="
        css: { 
            'wtai-custom': !$pipeline.autogenerated,
            'wtai-cluster': $pipeline.autogenerated,
            'wtai-previous-none': $parent.isPreviousNone(
                '<?= $block->escapeHtmlAttr($difficulty) ?>',
                $pipeline.id
            )
        },
        visible: $parent.isNext(
            '<?= $block->escapeHtmlAttr($difficulty) ?>',
            $pipeline.currentLevel
        ) || $parent.isCurrent(
            '<?= $block->escapeHtmlAttr($difficulty) ?>',
            $pipeline.currentLevel
        )
    ">
        <?= $block->getChildHtml($triggerSettingsBlock) ?>
    </div>
    <div class="wtai-arrow-tail wtai-active" data-bind="
        css: {
            'wtai-active': $parent.isCurrent(
                '<?= $block->escapeHtmlAttr($difficulty) ?>',
                $pipeline.currentLevel
            ),
            'wtai-previous-none': $parent.isPreviousNone(
                '<?= $block->escapeHtmlAttr($difficulty) ?>',
                $pipeline.id
            )
        },
        visible: $parent.isNext(
            '<?= $block->escapeHtmlAttr($difficulty) ?>',
            $pipeline.currentLevel
        ) || $parent.isCurrent(
            '<?= $block->escapeHtmlAttr($difficulty) ?>',
            $pipeline.currentLevel
        )
    "></div>
    <div class="wtai-arrow-tail wtai-active wtai-full" data-bind="visible: $parent.isPrevious(
        '<?= $block->escapeHtmlAttr($difficulty) ?>',
        $pipeline.currentLevel
    )"></div>
</div>
<?php endif; ?>
<li class="wtai-keyword"  
    data-bind="
        css: {
            'wtai-current': $parent.isCurrent(
                '<?= $block->escapeHtmlAttr($difficulty) ?>',
                $pipeline.currentLevel
            ),
            'wtai-previous': $parent.isPrevious(
                '<?= $block->escapeHtmlAttr($difficulty) ?>',
                $pipeline.currentLevel
            ),
            'wtai-has-popup': $parent.hasSerp(
                '<?= $block->escapeHtmlAttr($difficulty) ?>',
                $pipeline.keywords
            )
        },
        hidden: $parent.isSkipped(
            '<?= $block->escapeHtmlAttr($difficulty) ?>',
            $pipeline.keywords
        ),
        click: function(data, event) { $parent.seeMoreData(data, event) }
    "
>
    <div class="wtai-keyword-title">
        <span class="wtai-primary-badge" data-bind="visible: $parent.isPrimaryKeyword($parent.getKeywordData(
            '<?= $block->escapeHtmlAttr($difficulty) ?>',
            $pipeline.keywords,
            'keyword'
        ))">
            <?= $block->escapeHtml(__('Primary')) ?>
        </span>
        <span class="wtai-star-badge" data-bind="visible: $parent.getKeywordData(
            '<?= $block->escapeHtmlAttr($difficulty) ?>',
            $pipeline.keywords,
            'position'
        ) > 0"></span>
        <span class="wtai-keyword-title-text" data-bind="text: $parent.getKeywordData(
            '<?= $block->escapeHtmlAttr($difficulty) ?>',
            $pipeline.keywords,
            'keyword'
        )"></span>
        <span class="wtai-data-movement" data-bind="
            visible: $parent.getKeywordData(
                '<?= $block->escapeHtmlAttr($difficulty) ?>',
                $pipeline.keywords,
                'positionDelta'
            ),
            text: $parent.getKeywordData(
                '<?= $block->escapeHtmlAttr($difficulty) ?>',
                $pipeline.keywords,
                'positionDelta'
            ),
            css: {
                'wtai-down': $parent.getKeywordData(
                    '<?= $block->escapeHtmlAttr($difficulty) ?>',
                    $pipeline.keywords,
                    'positionDelta'
                ) < 0
            }
        "></span>
    </div>
    <div class="wtai-keyword-data wta-summary-data">
        <span data-bind="
            text: $parent.getCurrentState($pipeline.currentState),
            visible: $parent.isCurrent(
                '<?= $block->escapeHtmlAttr($difficulty) ?>',
                $pipeline.currentLevel
            )
        "></span>
        <span data-bind="visible: $parent.isPrevious(
            '<?= $block->escapeHtmlAttr($difficulty) ?>',
            $pipeline.currentLevel
        )"><?= $block->escapeHtml(__("Optimized")) ?></span>
        <span data-bind="
            text: $parent.getDifficulty($parent.getKeywordData(
                '<?= $block->escapeHtmlAttr($difficulty) ?>',
                $pipeline.keywords,
                'difficulty'
            ), true),
            visible: $parent.isNext(
                '<?= $block->escapeHtmlAttr($difficulty) ?>',
                $pipeline.currentLevel
            )
        "></span>
        <span class="wtai-volume" data-bind="
            visible: $parent.isNext(
                '<?= $block->escapeHtmlAttr($difficulty) ?>',
                $pipeline.currentLevel
            )
        ">
            <?= $block->escapeHtml(__("Volume")) ?>
            <span data-bind="text: $parent.getKeywordData(
                '<?= $block->escapeHtmlAttr($difficulty) ?>',
                $pipeline.keywords,
                'searchVolume'
            )"></span>
        </span>
        <button class="wtai-see-more"></button>
    </div>
    <div class="wtai-keyword-more-data">
        <span class="wtai-keyword-title-text" data-bind="text: $parent.getKeywordData(
            '<?= $block->escapeHtmlAttr($difficulty) ?>',
            $pipeline.keywords,
            'keyword'
        )"></span>
        <div class="wtai-keyword-data">
            <span class="wtai-data-label">
                <?= $block->escapeHtml(__("Status")) ?>
            </span>
            <span class="wtai-data-value" data-bind="
                text: $parent.getCurrentState($pipeline.currentState),
                visible: $parent.isCurrent(
                    '<?= $block->escapeHtmlAttr($difficulty) ?>',
                    $pipeline.currentLevel
                )
            "></span>
            <span class="wtai-data-value" data-bind="visible: $parent.isPrevious(
                '<?= $block->escapeHtmlAttr($difficulty) ?>',
                $pipeline.currentLevel
            )"><?= $block->escapeHtml(__("Optimized")) ?></span>
        </div>
        <div class="wtai-keyword-data" data-bind="visible: $parent.getKeywordData(
            '<?= $block->escapeHtmlAttr($difficulty) ?>',
            $pipeline.keywords,
            'position'
        )">
            <span class="wtai-data-label">
                <?= $block->escapeHtml(__("Position")) ?>
            </span>
            <span class="wtai-data-value">
                <span data-bind="text: $parent.getKeywordData(
                    '<?= $block->escapeHtmlAttr($difficulty) ?>',
                    $pipeline.keywords,
                    'position'
                )"></span>
                <span class="wtai-data-movement wtai-inner-movement" data-bind="
                    visible: $parent.getKeywordData(
                        '<?= $block->escapeHtmlAttr($difficulty) ?>',
                        $pipeline.keywords,
                        'positionDelta'
                    ),
                    text: $parent.getKeywordData(
                        '<?= $block->escapeHtmlAttr($difficulty) ?>',
                        $pipeline.keywords,
                        'positionDelta'
                    ),
                    css: {
                        'wtai-down': $parent.getKeywordData(
                            '<?= $block->escapeHtmlAttr($difficulty) ?>',
                            $pipeline.keywords,
                            'positionDelta'
                        ) < 0
                    }
                "></span>
            </span>
        </div>
        <div class="wtai-keyword-data" data-bind="hidden: $parent.getKeywordData(
            '<?= $block->escapeHtmlAttr($difficulty) ?>',
            $pipeline.keywords,
            'position'
        )">
            <span class="wtai-data-label">
                <?= $block->escapeHtml(__("Position")) ?>
            </span>
            <span class="wtai-data-value">
                <?= $block->escapeHtml(__("Not available")) ?>
            </span>
        </div>
        <div class="wtai-keyword-data" data-bind="visible: $parent.hasSerp(
            '<?= $block->escapeHtmlAttr($difficulty) ?>',
            $pipeline.keywords
        )">
            <span class="wtai-data-label">
                <?= $block->escapeHtml(__("SERP")) ?>
            </span>
            <span class="wtai-data-value">
                <a href="#"
                    class="wtai-data-trigger-serp"
                    data-bind="
                        click: $parent.viewSERP,
                        clickBubble: false
                ">View</a>
            </span>
            <?= $block->getChildHtml($serpBlock) ?>
        </div>
        <div class="wtai-keyword-data" data-bind="hidden: $parent.hasSerp(
            '<?= $block->escapeHtmlAttr($difficulty) ?>',
            $pipeline.keywords
        )">
            <span class="wtai-data-label">
                <?= $block->escapeHtml(__("SERP")) ?>
            </span>
            <span class="wtai-data-value">
                <?= $block->escapeHtml(__("Not available")) ?>
            </span>
        </div>
        <div class="wtai-keyword-data">
            <span class="wtai-data-label">
                <?= $block->escapeHtml(__("Difficulty")) ?>
            </span>
            <span class="wtai-data-value" data-bind="text: $parent.getDifficulty($parent.getKeywordData(
                '<?= $block->escapeHtmlAttr($difficulty) ?>',
                $pipeline.keywords,
                'difficulty'
            ), true)"></span>
        </div>
        <div class="wtai-keyword-data">
            <span class="wtai-data-label">
                <?= $block->escapeHtml(__("Search volume")) ?>
            </span>
            <span class="wtai-data-value" data-bind="text: $parent.getKeywordData(
                '<?= $block->escapeHtmlAttr($difficulty) ?>',
                $pipeline.keywords,
                'searchVolume'
            )"></span>
        </div>
        <div class="wtai-keyword-data">
            <span class="wtai-data-label">
                <?= $block->escapeHtml(__("Traffic potential")) ?>
            </span>
            <span class="wtai-data-value" data-bind="text: $parent.getKeywordData(
                '<?= $block->escapeHtmlAttr($difficulty) ?>',
                $pipeline.keywords,
                'trafficPotential'
            )"></span>
        </div>
        <div class="wtai-keyword-data">
            <span class="wtai-data-label">
                <?= $block->escapeHtml(__("Intent")) ?>
            </span>
            <span class="wtai-data-value" data-bind="text: $parent.getKeywordData(
                '<?= $block->escapeHtmlAttr($difficulty) ?>',
                $pipeline.keywords,
                'intentDisplay'
            )"></span>
        </div>
    </div>
</li>