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

<?php
$difficulty = $block->getParentBlock()->getDifficulty();
?>

<div class="wtai-serp-popup">
    <table>
        <thead>
            <tr>
                <th colspan="2">
                    <p data-bind="i18n: 'Search Engine Results Page (SERP) Overview'"></p>
                    <span data-bind="text: $parent.getSerpDateText(
                                '<?= $escaper->escapeHtmlAttr($difficulty) ?>',
                                $pipeline.keywords)
                    ">SERP data as of Sep 23, 2024, 6:02:20 AM</span>
                    <span class="wtai-close-serp" data-bind="
                        click: $parent.closeSERP,
                        clickBubble: false
                    "></span>
                </th>
            </tr>
        </thead>
        <tbody data-bind="foreach: $parent.getKeywordData(
            '<?= $escaper->escapeHtmlAttr($difficulty) ?>',
            $pipeline.keywords,
            'serpItems'
        )">
            <tr data-bind="
                css: {
                    'wtai-my-site': $parents[1].isMySite(domain),
                }
            ">
                <td class="wtai-rank" data-bind="text: position"></td>
                <td class="wtai-site">
                    <p data-bind="
                        text: snippet,
                    "></p>
                    <a class="wtai-name" target="_blank" data-bind="
                        text: title,
                        attr: { href: url },
                        click: function() { return true; },
                        clickBubble: false
                    "></a>
                    <a class="wtai-domain" target="_blank" data-bind="
                        text: domain,
                        attr: { href: $parents[1].getDomain(domain) },
                        click: function() {  return true; },
                        clickBubble: false
                    "></a>
                </td>
            </tr>
        </tbody>
    </table>
</div>