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

<?php
use Magento\Store\Model\Store;
use WriteTextAI\WriteTextAI\Model\OptionSource\Filter\Fields;

/** @var \WriteTextAI\WriteTextAI\ViewModel\Tooltip $tooltip */
/** @var \WriteTextAI\WriteTextAI\ViewModel\Wysiwyg $wysiwyg */
/** @var \WriteTextAI\WriteTextAI\ViewModel\Fields $fields */
/** @var \WriteTextAI\WriteTextAI\ViewModel\Permissions $permissions */
/** @var \WriteTextAI\WriteTextAI\ViewModel\TransferSettings $transferSettings */
/** @var \WriteTextAI\WriteTextAI\ViewModel\Premium $premium */
/** @var \WriteTextAI\WriteTextAI\ViewModel\Settings $settings */

$tooltip = $block->getTooltip();
$wysiwyg = $block->getWysiwyg();
$fields = $block->getFields();
$fieldLabels = $fields->getFieldLabels();
$customOpenGraph = $fields->getCustomOpenGraph();
$permissions = $block->getPermissions();
$transferSettings = $block->getTransferSettings();
$maxPageTitle = $block->getData('max_page_title');
$maxPageDesc = $block->getData('max_page_desc');
$maxOpenGraph = $block->getData('max_open_graph');
$premium = $block->getPremium();
$settings = $block->getSettings();
$attrScope = $block->getAttrScope();
$pageTitleScope = $attrScope->getAttrScope('page_title');
$pageDescScope = $attrScope->getAttrScope('page_description');
$productDescScope = $attrScope->getAttrScope('product_description');
$shortDescScope = $attrScope->getAttrScope('short_product_description');
$openGraphScope = $attrScope->getAttrScope('open_graph');
$templateSettings = $block->getTemplateSettings();

$transferText = __('Transfer');
?>

<div class="wtai-textfields" data-bind="scope: 'wtaiTextFields'">
    <div class="wtai-fieldset wtai-text-editor wtai-accordions">
        <?php
        /**
         * meta title
         */
        ?>
        <div class="wtai-accordion-block wtai-text-block">
            <div data-role="collapsible" class="admin__collapsible-block-wrapper">
                <div class="admin__collapsible-title">
                    <div class="wtai-field">
                        <input type="checkbox" class="admin__control-checkbox" name="selectedFields[]"
                               id="wtaiUsePageTitle" value="page_title" data-bind="checked: selectedFields"/>
                        <label for="wtaiUsePageTitle" class="admin__field-label"
                        ><?= $escaper->escapeHtml(__('Meta title')) ?>
                    </label>
                    </div>
                    <div class="admin__field-tooltip wtai-small">
                        <a class="admin__field-tooltip-action" href="#" data-toggle="dropdown"></a>
                        <div class="admin__field-tooltip-content" data-target="dropdown">
                            <div class="wtai-content-wrapper">
                                <?= /* @noEscape */ $tooltip->getTooltip('wtai.page.title') ?>
                            </div>
                        </div>
                    </div>
                    <!-- ko template: reviewStatusTemplates.pageTitle --><!-- /ko -->
                    <div class="wtai-trigger" data-role="trigger"></div>
                </div>
            </div>
            <div data-role="content">
                <?= $block->getChildBlock('wtai.select.template')->setField('page_title')->toHtml(); ?>
                <div class="wtai-field admin__field">
                    <label class="admin__field-label">
                        <span class="wtai-text-label wtai-long-text">
                            <?= $escaper->escapeHtml(__('WriteText.ai meta title')) ?>
                        </span>
                        <span class="wtai-generate-status"
                            data-bind="hidden: statuses().pageTitleGenerateStatus">
                            <?= $escaper->escapeHtml(sprintf('(%s)', __('Not generated'))) ?>
                        </span>
                        <span class="wtai-generate-status"
                            data-bind="visible: statuses().pageTitleGenerateStatus">
                            <?= $escaper->escapeHtml(sprintf('(%s)', __('Generated'))) ?>
                        </span>
                        <span class="wtai-transfer-status wtai-not-transferred"
                            data-bind="visible:
                                !statuses().pageTitleTransferStatus &&
                                statuses().pageTitleGenerateStatus">
                            <?= $escaper->escapeHtml(sprintf('(%s)', __('Not transferred'))) ?>
                        </span>
                        <div class="wtai-feedback-visibility" data-bind="
                                    visible: statuses().pageTitleGenerateStatus
                                ">
                            <?= /* @noEscape */ $block->getChildBlock('wtai.feedback')
                                ->setTextType('page_title')
                                ->toHtml();
                            ?>
                        </div>
                    </label>
                    <div class="wtai-control" data-bind="css: {
                        'wtai-disabled' : isNotEditable(!statuses().pageTitleGenerateStatus)
                    }">
                        <div id="wtaiPageTitleMask" class="wtai-highlight-mask wtai-small" data-bind="
                            css: { 'wtai-disabled' : isNotEditable(!statuses().pageTitleGenerateStatus) },
                            highlightWords: {
                                keywords: keywordsUsed().pageTitle,
                                text: pageTitle,
                                formalLanguages: formalLanguages,
                                formalLanguageSupport: formalLanguageSupport,
                                highlightPronouns: highlightPronouns,
                                formal: formal,
                                informal: informal,
                                language: language,
                                highlighted: highlighted,
                                optimizationData: optimizationData,
                                selectedKeywords: selectedKeywords
                            }
                        "></div>
                        <textarea name="new_page_title"
                            class="admin__control-textarea wtai-small"
                            data-bind="textInput: pageTitle,
                                css: { 'wtai-disabled' : isNotEditable(!statuses().pageTitleGenerateStatus) },
                                disable: isNotEditable(!statuses().pageTitleGenerateStatus),
                                event: { 
                                    scroll: function(data, event) { 
                                        syncScroll(data, event, 'wtaiPageTitleMask')
                                    }
                                }"
                            <?= $permissions->isEditAllowed() ? '' : 'readonly' ?>
                        ></textarea>
                        <div class="wtai-disabled-tooltip-wrapper" data-bind="
                            visible: isNotEditable(!statuses().pageTitleGenerateStatus)
                        ">
                            <div class="wtai-disabled-tooltip">
                                <div class="wtai-disabled-tooltip-content" data-bind="
                                    visible: !statuses().pageTitleGenerateStatus
                                ">
                                    <?= $escaper->escapeHtml(__('No text generated yet.')) ?>
                                </div>
                                <div class="wtai-disabled-tooltip-content" data-bind="
                                    visible: keywordAnalysisOngoing() && statuses().pageTitleGenerateStatus
                                ">
                                    <?= $escaper->escapeHtml(
                                        __('Editing is unavailable when keyword analysis is ongoing.')
                                    ) ?>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="wtai-text-length wtai-mg">
                                <span class="wtai-char-count" data-bind="
                                    css: { 'wtai-over-limit': isOverLimit(pageTitle(), maxPageTitle) },
                                    text: getCharCount(
                                        pageTitle(),
                                        maxPageTitle
                                )"></span> | <span
                                    class="wtai-word-count"
                                    data-bind="text: getWordCount(pageTitle())"
                                ></span>
                            </div>
                        </div>
                    </div>
                </div>
                <?php if ($permissions->isTransferAllowed()): ?>
                    <div class="wtai-field-transfer-wrapper" data-bind="attr: {
                        title: (pageTitle() !== '' && statuses().pageTitleGenerateStatus) ?
                            '<?= $escaper->escapeHtmlAttr($transferText) ?>' :
                            '<?= $escaper->escapeHtmlAttr(__('Nothing to transfer')) ?>'
                    }">
                        <button type="button"
                            class="wtai-field-transfer"
                            data-bind="
                                enable:
                                    pageTitle() !== '' &&
                                    statuses().pageTitleGenerateStatus &&
                                    !keywordAnalysisOngoing() &&
                                    !isKoRefreshing(),
                                click: function() {
                                    transfer('page_title', pageTitle())
                                }">
                        </button>
                    </div>
                <?php endif; ?>
                <div class="wtai-field admin__field">
                    <label class="admin__field-label wtai-strong">
                        <?= $escaper->escapeHtml(__('Magento meta title')) ?>
                        <span data-config-scope="<?= $escaper->escapeHtmlAttr(
                            $pageTitleScope
                        ) ?>"></span>
                    </label>
                    <div class="wtai-control wtai-current">
                        <div class="wtai-value-wrapper wtai-small"
                            id="wtaiPageTitle"
                            data-bind="html: mgPageTitle"
                        ></div>
                        <?php if (!$attrScope->isAttributeGlobal($pageTitleScope)): ?>
                            <div class="wtai-field-content" data-bind="visible: !isAllStoreView()">
                                <input type="checkbox"
                                    id="wtaiPageTitleUseDefault"
                                    class="admin__control-checkbox"
                                    data-bind="checked: useDefault().pageTitle"
                                    disabled
                                />
                                <label class="wtai-label admin__field-label" for="wtaiPageTitleUseDefault">
                                    <?= $escaper->escapeHtml(__('Use default value')) ?>
                                </label>
                            </div>
                        <?php endif; ?>
                        <p class="wtai-text-length wtai-mg">
                            <span class="wtai-char-count"
                                id="wtaiPageTitleChar"
                                data-bind="text: getCharCount(mgPageTitle())"></span> | <span class="wtai-word-count"
                                id="wtaiPageTitleWords"
                                data-bind="text: getWordCount(mgPageTitle())"></span>
                        </p>
                    </div>
                </div>
                <div class="wtai-page-title-loading-mask"></div>
            </div>
        </div>
        <?php
        /**
         * meta description
         */
        ?>
        <div class="wtai-accordion-block wtai-text-block">
            <div data-role="collapsible" class="admin__collapsible-block-wrapper">
                <div class="admin__collapsible-title">
                    <div class="wtai-field">
                        <input type="checkbox"
                               class="admin__control-checkbox"
                               name="selectedFields[]"
                               id="wtaiUsePageDescription"
                               value="page_description"
                               data-bind="checked: selectedFields"/>
                        <label for="wtaiUsePageDescription" class="admin__field-label">
                            <?= $escaper->escapeHtml(__('Meta description')) ?>
                        </label>
                    </div>
                    <div class="admin__field-tooltip wtai-small">
                        <a class="admin__field-tooltip-action" href="#" data-toggle="dropdown"></a>
                        <div class="admin__field-tooltip-content" data-target="dropdown">
                            <div class="wtai-content-wrapper">
                                <?= /* @noEscape */ $tooltip->getTooltip('wtai.page.description') ?>
                            </div>
                        </div>
                    </div>
                    <!-- ko template: reviewStatusTemplates.pageDescription --><!-- /ko -->
                    <div class="wtai-trigger" data-role="trigger"></div>
                </div>
            </div>
            <div data-role="content">
                <div class="wtai-field admin__field">
                    <label class="admin__field-label">
                        <span class="wtai-text-label wtai-long-text">
                            <?= $escaper->escapeHtml(__('WriteText.ai meta description')) ?>
                        </span>
                        <span class="wtai-generate-status"
                            data-bind="hidden: statuses().pageDescriptionGenerateStatus">
                            <?= $escaper->escapeHtml(sprintf('(%s)', __('Not generated'))) ?>
                        </span>
                        <span class="wtai-generate-status"
                            data-bind="visible: statuses().pageDescriptionGenerateStatus">
                            <?= $escaper->escapeHtml(sprintf('(%s)', __('Generated'))) ?>
                        </span>
                        <span class="wtai-transfer-status wtai-not-transferred"
                            data-bind="visible:
                                !statuses().pageDescriptionTransferStatus &&
                                statuses().pageDescriptionGenerateStatus">
                            <?= $escaper->escapeHtml(sprintf('(%s)', __('Not transferred'))) ?>
                        </span>
                        <div class="wtai-feedback-visibility" data-bind="
                                    visible: statuses().pageDescriptionGenerateStatus
                                ">
                            <?= /* @noEscape */ $block->getChildBlock('wtai.feedback')
                                ->setTextType('page_description')
                                ->toHtml();
                            ?>
                        </div>
                    </label>
                    <div class="wtai-control" data-bind="css: {
                        'wtai-disabled' : isNotEditable(!statuses().pageDescriptionGenerateStatus)
                    }">
                        <div id="wtaiPageDescMask" class="wtai-highlight-mask wtai-medium" data-bind="
                            css: { 'wtai-disabled' : isNotEditable(!statuses().pageDescriptionGenerateStatus) },
                            highlightWords: {
                                keywords: keywordsUsed().pageDescription,
                                text: pageDescription,
                                formalLanguages: formalLanguages,
                                formalLanguageSupport: formalLanguageSupport,
                                highlightPronouns: highlightPronouns,
                                formal: formal,
                                informal: informal,
                                language: language,
                                highlighted: highlighted,
                                optimizationData: optimizationData,
                                selectedKeywords: selectedKeywords
                            }
                        "></div>
                        <textarea name="new_page_description"
                            class="admin__control-textarea wtai-medium"
                            data-bind="textInput: pageDescription,
                                css: { 'wtai-disabled' : isNotEditable(!statuses().pageDescriptionGenerateStatus) },
                                disable: isNotEditable(!statuses().pageDescriptionGenerateStatus),
                                event: { 
                                    scroll: function(data, event) { 
                                        syncScroll(data, event, 'wtaiPageDescMask')
                                    }
                                }"
                            <?= $permissions->isEditAllowed() ? '' : 'readonly' ?>
                        ></textarea>
                        <div class="wtai-disabled-tooltip-wrapper" data-bind="
                            visible: isNotEditable(!statuses().pageDescriptionGenerateStatus)
                        ">
                            <div class="wtai-disabled-tooltip">
                                <div class="wtai-disabled-tooltip-content" data-bind="
                                    visible: !statuses().pageDescriptionGenerateStatus
                                ">
                                    <?= $escaper->escapeHtml(__('No text generated yet.')) ?>
                                </div>
                                <div class="wtai-disabled-tooltip-content" data-bind="
                                    visible: keywordAnalysisOngoing() && statuses().pageDescriptionGenerateStatus
                                ">
                                    <?= $escaper->escapeHtml(
                                        __('Editing is unavailable when keyword analysis is ongoing.')
                                    ) ?>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="wtai-text-length wtai-mg">
                                <span class="wtai-char-count" data-bind="
                                    css: { 'wtai-over-limit': isOverLimit(pageDescription(), maxPageDesc) },
                                    text: getCharCount(
                                        pageDescription(),
                                        maxPageDesc
                                )"></span> | <span class="wtai-word-count" data-bind="
                                    text: getWordCount(pageDescription())
                                "></span>
                            </div>
                        </div>
                    </div>
                </div>
                <?php if ($permissions->isTransferAllowed()): ?>
                    <div class="wtai-field-transfer-wrapper" data-bind="attr: {
                        title: (pageDescription() !== '' && statuses().pageDescriptionGenerateStatus) ?
                            '<?= $escaper->escapeHtmlAttr($transferText) ?>' :
                            '<?= $escaper->escapeHtmlAttr(__('Nothing to transfer')) ?>'
                    }">
                        <button type="button"
                            class="wtai-field-transfer"
                            data-bind="
                                enable:
                                    pageDescription() !== '' &&
                                    statuses().pageDescriptionGenerateStatus &&
                                    !keywordAnalysisOngoing() &&
                                    !isKoRefreshing(),
                                click: function() {
                                    transfer('page_description', pageDescription())
                                }">
                        </button>
                    </div>
                <?php endif; ?>
                <div class="wtai-field admin__field">
                    <label class="admin__field-label wtai-strong">
                        <?= $escaper->escapeHtml(__('Magento meta description')) ?>
                        <span data-config-scope="<?= $escaper->escapeHtmlAttr(
                            $pageDescScope
                        ) ?>"></span>
                    </label>
                    <div class="wtai-control wtai-current">
                        <div class="wtai-value-wrapper wtai-medium"
                            id="wtaiPageDescription" 
                            data-bind="html: mgPageDescription"></div>
                        <?php if (!$attrScope->isAttributeGlobal($pageDescScope)): ?>
                            <div class="wtai-field-content" data-bind="visible: !isAllStoreView()">
                                <input type="checkbox"
                                    id="wtaiPageDescUseDefault"
                                    class="admin__control-checkbox"
                                    data-bind="checked: useDefault().pageDescription"
                                    disabled
                                />
                                <label class="wtai-label admin__field-label" for="wtaiPageDescUseDefault">
                                    <?= $escaper->escapeHtml(__('Use default value')) ?>
                                </label>
                            </div>
                        <?php endif; ?>
                        <p class="wtai-text-length wtai-mg">
                            <span class="wtai-char-count"
                                id="wtaiPageDescriptionChar"
                                data-bind="text: getCharCount(mgPageDescription())"></span> | <span
                                class="wtai-word-count"
                                id="wtaiPageDescriptionWords"
                                data-bind="text: getWordCount(mgPageDescription())"></span>
                        </p>
                    </div>
                </div>
                <div class="wtai-page-description-loading-mask"></div>
            </div>
        </div>
        <?php
        /**
         * description
         */
        ?>
        <div class="wtai-accordion-block wtai-text-block">
            <div data-role="collapsible" class="admin__collapsible-block-wrapper">
                <div class="admin__collapsible-title">
                    <div class="wtai-field">
                        <input type="checkbox"
                               class="admin__control-checkbox"
                               name="selectedFields[]"
                               id="wtaiUseProductDescription"
                               value="product_description"
                               data-bind="checked: selectedFields"/>
                        <label for="wtaiUseProductDescription" class="admin__field-label">
                            <?= $escaper->escapeHtml(__('Description')) ?>
                        </label>
                    </div>
                    <div class="admin__field-tooltip wtai-small">
                        <a class="admin__field-tooltip-action" href="#" data-toggle="dropdown"></a>
                        <div class="admin__field-tooltip-content" data-target="dropdown">
                            <div class="wtai-content-wrapper">
                                <?= /* @noEscape */ $tooltip->getTooltip('wtai.product.description') ?>
                            </div>
                        </div>
                    </div>
                    <!-- ko template: reviewStatusTemplates.productDescription --><!-- /ko -->
                    <div class="wtai-trigger" data-role="trigger"></div>
                </div>
            </div>
            <div data-role="content">
                <?= $block->getChildBlock('wtai.custom.text.warning')->toHtml(); ?>
                <div class="wtai-row">
                    <div class="wtai-flex-container">
                        <?= $block->getChildBlock('wtai.select.template')->setField('product_description')->toHtml(); ?>
                        <div class="wtai-field admin__field row">
                            <label class="admin__field-label wtai-medium">
                                <?= $escaper->escapeHtml(__('Target length (in words)')) ?>
                            </label>
                            <div class="wtai-control">
                                <label class="wtai-label"><?= $escaper->escapeHtml(__('Min')) ?></label>
                                <input type="number"
                                    name="product_description_min"
                                    class="admin__control-text wtai-input-number" 
                                    data-bind="
                                        value: descMin,
                                        event: {
                                            blur: validateMinMax,
                                            keypress: ensureNumerical
                                        },
                                        attr: {
                                            min: rules.minOutputWords,
                                            max: descMax() - 1
                                        }"
                                    <?= $permissions->isWordsAllowed() ? '' : 'disabled' ?>
                                />
                            </div>
                            <div class="wtai-control">
                                <label class="wtai-label"><?= $escaper->escapeHtml(__('Max')) ?></label>
                                <input type="number"
                                    name="product_description_max"
                                    class="admin__control-text wtai-input-number" 
                                    data-bind="
                                        value: descMax,
                                        event: {
                                            blur: validateMinMax,
                                            keypress: ensureNumerical
                                        },
                                        attr: {
                                            min: Number(descMin()) + 1,
                                            max: rules.maxOutputWords
                                        }"
                                    <?= $permissions->isWordsAllowed() ? '' : 'disabled' ?>
                                />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="wtai-field admin__field">
                    <label class="admin__field-label">
                        <span class="wtai-text-label wtai-long-text">
                            <?= $escaper->escapeHtml(__('WriteText.ai description')) ?>
                        </span>
                        <span class="wtai-generate-status"
                            data-bind="hidden: statuses().productDescriptionGenerateStatus">
                            <?= $escaper->escapeHtml(sprintf('(%s)', __('Not generated'))) ?>
                        </span>
                        <span class="wtai-generate-status"
                            data-bind="visible: statuses().productDescriptionGenerateStatus">
                            <?= $escaper->escapeHtml(sprintf('(%s)', __('Generated'))) ?>
                        </span>
                        <span class="wtai-transfer-status wtai-not-transferred"
                            data-bind="visible:
                                !statuses().productDescriptionTransferStatus &&
                                statuses().productDescriptionGenerateStatus">
                            <?= $escaper->escapeHtml(sprintf('(%s)', __('Not transferred'))) ?>
                        </span>
                        <div class="wtai-feedback-visibility" data-bind="
                                    visible: statuses().productDescriptionGenerateStatus
                                ">
                            <?= /* @noEscape */ $block->getChildBlock('wtai.feedback')
                                ->setTextType('product_description')
                                ->toHtml();
                            ?>
                        </div>
                    </label>
                    <div class="wtai-control wtai-editor-wrapper"
                        data-target="product-description"
                        data-bind="css: {
                            'wtai-disabled': isNotEditable(!statuses().productDescriptionGenerateStatus)
                        }"
                    >
                        <div id="wtaiProductDescMask" class="wtai-highlight-mask wtai-large" data-bind="
                            highlightWords: {
                                keywords: keywordsUsed().productDescription,
                                text: productDescription,
                                formalLanguages: formalLanguages,
                                formalLanguageSupport: formalLanguageSupport,
                                highlightPronouns: highlightPronouns,
                                formal: formal,
                                informal: informal,
                                language: language,
                                highlighted: highlighted,
                                optimizationData: optimizationData,
                                selectedKeywords: selectedKeywords
                            }
                        "></div>
                        <textarea name="new_product_description"
                            id="wtaiNewProductDescription"
                            class="admin__control-textarea wtai-large"
                            data-bind="textInput: productDescription"
                            <?= $permissions->isEditAllowed() ? '' : 'readonly' ?>
                        ></textarea>
                        <div class="wtai-disabled-tooltip-wrapper" data-bind="
                            visible: isNotEditable(!statuses().productDescriptionGenerateStatus)
                        ">
                            <div class="wtai-disabled-tooltip">
                                <div class="wtai-disabled-tooltip-content" data-bind="
                                    visible: !statuses().productDescriptionGenerateStatus
                                ">
                                    <?= $escaper->escapeHtml(__('No text generated yet.')) ?>
                                </div>
                                <div class="wtai-disabled-tooltip-content" data-bind="
                                    visible: keywordAnalysisOngoing() && statuses().productDescriptionGenerateStatus
                                ">
                                    <?= $escaper->escapeHtml(
                                        __('Editing is unavailable when keyword analysis is ongoing.')
                                    ) ?>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="wtai-text-length wtai-mg">
                                <span class="wtai-char-count" data-bind="
                                    text: getCharCount(productDescription())
                                "></span> | <span class="wtai-word-count" data-bind="
                                    text: getWordCount(productDescription())
                                "></span>
                            </div>
                        </div>
                    </div>
                </div>
                <?php if ($permissions->isTransferAllowed()): ?>
                    <div class="wtai-field-transfer-wrapper" data-bind="attr: {
                        title: (productDescription() !== '' && statuses().productDescriptionGenerateStatus) ?
                            '<?= $escaper->escapeHtmlAttr($transferText) ?>' :
                            '<?= $escaper->escapeHtmlAttr(__('Nothing to transfer')) ?>'
                    }">
                        <!--
                            Note: Once the WYSIWYG is edited, the transfer will always be enabled.
                            This is because the WYSIWYG encloses the text within a paragraph,
                            which makes the edited text different from the original text.
                        -->
                        <button type="button"
                            class="wtai-field-transfer"
                            data-bind="
                                enable:
                                    productDescription() !== '' &&
                                    statuses().productDescriptionGenerateStatus &&
                                    !keywordAnalysisOngoing() &&
                                    !isKoRefreshing(),
                                click: function() {
                                    transfer('product_description', productDescription())
                                }">
                        </button>
                    </div>
                <?php endif; ?>
                <div class="wtai-field admin__field">
                    <label class="admin__field-label wtai-strong">
                        <?= $escaper->escapeHtml(__('Magento description')) ?>
                        <span data-config-scope="<?= $escaper->escapeHtmlAttr(
                            $productDescScope
                        ) ?>"></span>
                    </label>
                    <div class="wtai-control wtai-current">
                        <div class="wtai-value-wrapper wtai-large"
                            id="wtaiProductDescription"
                            data-bind="html: mgProductDescription"></div>
                        <?php if (!$attrScope->isAttributeGlobal($productDescScope)): ?>
                            <div class="wtai-field-content" data-bind="visible: !isAllStoreView()">
                                <input type="checkbox"
                                    id="wtaiProductDescUseDefault"
                                    class="admin__control-checkbox"
                                    data-bind="checked: useDefault().productDescription"
                                    disabled
                                />
                                <label class="wtai-label admin__field-label" for="wtaiProductDescUseDefault">
                                    <?= $escaper->escapeHtml(__('Use default value')) ?>
                                </label>
                            </div>
                        <?php endif; ?>
                        <p class="wtai-text-length wtai-mg">
                            <span class="wtai-char-count"
                                id="wtaiProductDescriptionChar"
                                data-bind="
                                    text: getCharCount(mgProductDescription())
                                "></span> | <span class="wtai-word-count"
                                id="wtaiProductDescriptionWords"
                                data-bind="text: getWordCount(mgProductDescription())"></span>
                        </p>
                    </div>
                </div>
                <div class="wtai-product-description-loading-mask"></div>
            </div>
        </div>
        <?php
        /**
         * product short description
         */
        $collapsibleLabel = __('Short description');
        $aiLabel = __('WriteText.ai short description');
        $platformLabel = __('Magento short description');
        ?>
        <div class="wtai-accordion-block wtai-text-block">
            <div data-role="collapsible" class="admin__collapsible-block-wrapper">
                <div class="admin__collapsible-title">
                    <div class="wtai-field">
                        <input type="checkbox"
                               class="admin__control-checkbox"
                               name="selectedFields[]"
                               id="wtaiUseShortDescription"
                               value="short_product_description"
                               data-bind="checked: selectedFields"/>
                        <label for="wtaiUseShortDescription" class="admin__field-label">
                            <?= $escaper->escapeHtml($collapsibleLabel) ?>
                        </label>
                    </div>
                    <div class="admin__field-tooltip wtai-small">
                        <a class="admin__field-tooltip-action" href="#" data-toggle="dropdown"></a>
                        <div class="admin__field-tooltip-content" data-target="dropdown">
                            <div class="wtai-content-wrapper">
                                <?= /* @noEscape */ $tooltip->getTooltip('wtai.short.description') ?>
                            </div>
                        </div>
                    </div>
                    <!-- ko template: reviewStatusTemplates.productExcerpt --><!-- /ko -->
                    <div class="wtai-trigger" data-role="trigger"></div>
                </div>
            </div>
            <div data-role="content">
                <?= $block->getChildBlock('wtai.custom.text.warning')->toHtml(); ?>
                <div class="wtai-row">
                    <div class="wtai-flex-container">
                        <?= $block->getChildBlock('wtai.select.template')
                            ->setField('short_product_description')
                            ->toHtml();
                        ?>
                        <div class="wtai-field admin__field row">
                            <label class="admin__field-label wtai-medium">
                                <?= $escaper->escapeHtml(__('Target length (in words)')) ?>
                            </label>
                            <div class="wtai-control">
                                <label class="wtai-label"><?= $escaper->escapeHtml(__('Min')) ?></label>
                                <input type="number"
                                    name="short_description_min"
                                    class="admin__control-text wtai-input-number"
                                    data-bind="
                                        value: excMin,
                                        event: {
                                            blur: validateMinMax,
                                            keypress: ensureNumerical
                                        },
                                        attr: {
                                            min: rules.minOutputWords,
                                            max: excMax() -1
                                        }"
                                    <?= $permissions->isWordsAllowed() ? '' : 'disabled' ?>
                                />
                            </div>
                            <div class="wtai-control">
                                <label class="wtai-label"><?= $escaper->escapeHtml(__('Max')) ?></label>
                                <input type="number"
                                    name="short_description_max"
                                    class="admin__control-text wtai-input-number"
                                    data-bind="
                                        value: excMax,
                                        event: {
                                            blur: validateMinMax,
                                            keypress: ensureNumerical
                                        },
                                        attr: {
                                            min: Number(excMin()) + 1,
                                            max: rules.maxOutputWords
                                        }"
                                    <?= $permissions->isWordsAllowed() ? '' : 'disabled' ?>
                                />
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="wtai-field admin__field">
                    <label class="admin__field-label">
                        <span class="wtai-text-label wtai-long-text"><?= $escaper->escapeHtml($aiLabel) ?></span>
                        <span class="wtai-generate-status"
                            data-bind="hidden: statuses().productShortDescriptionGenerateStatus">
                            <?= $escaper->escapeHtml(sprintf('(%s)', __('Not generated'))) ?>
                        </span>
                        <span class="wtai-generate-status"
                            data-bind="visible: statuses().productShortDescriptionGenerateStatus">
                            <?= $escaper->escapeHtml(sprintf('(%s)', __('Generated'))) ?>
                        </span>
                        <span class="wtai-transfer-status wtai-not-transferred"
                            data-bind="visible:
                                !statuses().productShortDescriptionTransferStatus &&
                                statuses().productShortDescriptionGenerateStatus">
                            <?= $escaper->escapeHtml(sprintf('(%s)', __('Not transferred'))) ?>
                        </span>
                        <div class="wtai-feedback-visibility" data-bind="
                                    visible: statuses().productShortDescriptionGenerateStatus
                                ">
                            <?= /* @noEscape */ $block->getChildBlock('wtai.feedback')
                                ->setTextType('short_product_description')
                                ->toHtml();
                            ?>
                        </div>
                    </label>
                    <div class="wtai-control wtai-editor-wrapper"
                        data-target="short-description"
                        data-bind="css: {
                            'wtai-disabled': isNotEditable(!statuses().productShortDescriptionGenerateStatus)
                        }"
                    >
                        <div id="wtaiExcerptMask" class="wtai-highlight-mask wtai-large" data-bind="
                            highlightWords: {
                                keywords: keywordsUsed().shortProductDescription,
                                text: productShortDescription,
                                formalLanguages: formalLanguages,
                                formalLanguageSupport: formalLanguageSupport,
                                highlightPronouns: highlightPronouns,
                                formal: formal,
                                informal: informal,
                                language: language,
                                highlighted: highlighted,
                                optimizationData: optimizationData,
                                selectedKeywords: selectedKeywords
                            }
                        "></div>
                        <textarea name="new_short_description"
                            id="wtaiNewShortDescription"
                            class="admin__control-textarea wtai-large"
                            data-bind="textInput: productShortDescription"
                            <?= $permissions->isEditAllowed() ? '' : 'readonly' ?>
                        ></textarea>
                        <div class="wtai-disabled-tooltip-wrapper" data-bind="
                            visible: isNotEditable(!statuses().productShortDescriptionGenerateStatus)
                        ">
                            <div class="wtai-disabled-tooltip">
                                <div class="wtai-disabled-tooltip-content" data-bind="
                                    visible: !statuses().productShortDescriptionGenerateStatus
                                ">
                                    <?= $escaper->escapeHtml(__('No text generated yet.')) ?>
                                </div>
                                <div class="wtai-disabled-tooltip-content" data-bind="
                                    visible: keywordAnalysisOngoing() &&
                                        statuses().productShortDescriptionGenerateStatus
                                ">
                                    <?= $escaper->escapeHtml(
                                        __('Editing is unavailable when keyword analysis is ongoing.')
                                    ) ?>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="wtai-text-length wtai-mg">
                                <span class="wtai-char-count" data-bind="
                                    text: getCharCount(productShortDescription())
                                "></span> | <span class="wtai-word-count" data-bind="
                                    text: getWordCount(productShortDescription())
                                "></span>
                            </div>
                        </div>
                    </div>
                </div>
                <?php if ($permissions->isTransferAllowed()): ?>
                    <div class="wtai-field-transfer-wrapper" data-bind="attr: {
                        title: (productShortDescription() !== '' && statuses().productShortDescriptionGenerateStatus) ?
                            '<?= $escaper->escapeHtmlAttr($transferText) ?>' :
                            '<?= $escaper->escapeHtmlAttr(__('Nothing to transfer')) ?>'
                    }">
                        <!--
                            Note: Once the WYSIWYG is edited, the transfer will always be enabled.
                            This is because the WYSIWYG encloses the text within a paragraph,
                            which makes the edited text different from the original text.
                        -->
                        <button type="button"
                            class="wtai-field-transfer"
                            data-bind="
                                enable: 
                                    productShortDescription() !== '' &&
                                    statuses().productShortDescriptionGenerateStatus &&
                                    !keywordAnalysisOngoing() &&
                                    !isKoRefreshing(),
                                click: function() {
                                    transfer('short_product_description', productShortDescription())
                                }">
                        </button>
                    </div>
                <?php endif; ?>
                <div class="wtai-field admin__field">
                    <label class="admin__field-label wtai-strong">
                        <?= $escaper->escapeHtml($platformLabel) ?>
                        <span data-config-scope="<?= $escaper->escapeHtmlAttr(
                            $shortDescScope
                        ) ?>"></span>
                    </label>
                    <div class="wtai-control wtai-current">
                        <div class="wtai-value-wrapper wtai-large"
                            id="wtaiShortDescription"
                            data-bind="html: mgProductShortDescription"></div>
                        <?php if (!$attrScope->isAttributeGlobal($shortDescScope)): ?>
                            <div class="wtai-field-content" data-bind="visible: !isAllStoreView()">
                                <input type="checkbox"
                                    id="wtaiShortDescUseDefault"
                                    class="admin__control-checkbox"
                                    data-bind="checked: useDefault().productShortDescription"
                                    disabled
                                />
                                <label class="label admin__field-label" for="wtaiShortDescUseDefault">
                                    <?= $escaper->escapeHtml(__('Use default value')) ?>
                                </label>
                            </div>
                        <?php endif; ?>
                        <p class="wtai-text-length wtai-mg">
                            <span class="wtai-char-count"
                                id="wtaiShortDescriptionChar"
                                data-bind="
                                    text: getCharCount(mgProductShortDescription())
                                "></span> | <span class="wtai-word-count"
                                id="wtaiShortDescriptionWords"
                                data-bind="text: getWordCount(mgProductShortDescription())"></span>
                        </p>
                    </div>
                </div>
                <div class="wtai-short-description-loading-mask"></div>
            </div>
        </div>
        <?php
        /**
         * open graph
         */
        if ($customOpenGraph): ?>
            <div class="wtai-accordion-block wtai-text-block">
                <div data-role="collapsible" class="admin__collapsible-block-wrapper">
                    <div class="admin__collapsible-title">
                        <div class="wtai-field">
                            <input type="checkbox" class="admin__control-checkbox" name="selectedFields[]"
                                id="wtaiUseOpenGraph" value="open_graph" data-bind="checked: selectedFields"/>
                            <label for="wtaiUseOpenGraph" class="admin__field-label">
                                <?= $escaper->escapeHtml(__('Open Graph text')) ?>
                            </label>
                        </div>
                        <div class="admin__field-tooltip wtai-small">
                            <a class="admin__field-tooltip-action" href="#" data-toggle="dropdown"></a>
                            <div class="admin__field-tooltip-content" data-target="dropdown">
                                <div class="wtai-content-wrapper">
                                    <?= /* @noEscape */ $tooltip->getTooltip('wtai.open.graph') ?>
                                </div>
                            </div>
                        </div>
                        <!-- ko template: reviewStatusTemplates.openGraph --><!-- /ko -->
                        <div class="wtai-trigger" data-role="trigger"></div>
                    </div>
                </div>
                <div data-role="content">
                    <div class="wtai-field admin__field">
                        <label class="admin__field-label">
                            <span class="wtai-text-label wtai-long-text">
                                <?= $escaper->escapeHtml(__('WriteText.ai Open Graph text')) ?>
                            </span>
                            <span class="wtai-generate-status"
                                data-bind="hidden: statuses().openGraphGenerateStatus">
                                <?= $escaper->escapeHtml(sprintf('(%s)', __('Not generated'))) ?>
                            </span>
                            <span class="wtai-generate-status"
                                data-bind="visible: statuses().openGraphGenerateStatus">
                                <?= $escaper->escapeHtml(sprintf('(%s)', __('Generated'))) ?>
                            </span>
                            <span class="wtai-transfer-status wtai-not-transferred"
                                data-bind="visible:
                                    !statuses().openGraphTransferStatus &&
                                    statuses().openGraphGenerateStatus">
                                <?= $escaper->escapeHtml(sprintf('(%s)', __('Not transferred'))) ?>
                            </span>
                            <div class="wtai-feedback-visibility" data-bind="
                                    visible: statuses().openGraphGenerateStatus
                                ">
                                <?= /* @noEscape */ $block->getChildBlock('wtai.feedback')
                                    ->setTextType('open_graph')
                                    ->toHtml();
                                ?>
                            </div>
                        </label>
                        <div class="wtai-control" data-bind="css: { 
                            'wtai-disabled' : isNotEditable(!statuses().openGraphGenerateStatus)
                        }">
                            <div id="wtaiOpenGraphMask" class="wtai-highlight-mask wtai-medium" data-bind="
                                css: { 'wtai-disabled' : isNotEditable(!statuses().openGraphGenerateStatus) },
                                highlightWords: {
                                    keywords: keywordsUsed().openGraph,
                                    text: openGraph,
                                    formalLanguages: formalLanguages,
                                    formalLanguageSupport: formalLanguageSupport,
                                    highlightPronouns: highlightPronouns,
                                    formal: formal,
                                    informal: informal,
                                    language: language,
                                    highlighted: highlighted,
                                    optimizationData: optimizationData,
                                    selectedKeywords: selectedKeywords
                                }
                            "></div>
                            <textarea name="new_open_graph"
                                class="admin__control-textarea wtai-medium"
                                data-bind="textInput: openGraph,
                                    css: { 'wtai-disabled' : isNotEditable(!statuses().openGraphGenerateStatus) },
                                    disable: isNotEditable(!statuses().openGraphGenerateStatus),
                                    event: { 
                                            scroll: function(data, event) { 
                                                syncScroll(data, event, 'wtaiOpenGraphMask')
                                            }
                                    }"
                                <?= $permissions->isEditAllowed() ? '' : 'readonly' ?>
                            ></textarea>
                            <div class="wtai-disabled-tooltip-wrapper" data-bind="
                                visible: isNotEditable(!statuses().openGraphGenerateStatus)
                            ">
                                <div class="wtai-disabled-tooltip">
                                    <div class="wtai-disabled-tooltip-content" data-bind="
                                        visible: !statuses().openGraphGenerateStatus
                                    ">
                                        <?= $escaper->escapeHtml(__('No text generated yet.')) ?>
                                    </div>
                                    <div class="wtai-disabled-tooltip-content" data-bind="
                                        visible: keywordAnalysisOngoing() && statuses().openGraphGenerateStatus
                                    ">
                                        <?= $escaper->escapeHtml(
                                            __('Editing is unavailable when keyword analysis is ongoing.')
                                        ) ?>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="wtai-text-length wtai-mg">
                                    <span class="wtai-char-count" data-bind="
                                        css: { 'wtai-over-limit': isOverLimit(openGraph(), maxOpenGraph) },
                                        text: getCharCount(
                                            openGraph(),
                                            maxOpenGraph
                                    )"></span> | <span class="wtai-word-count" data-bind="
                                        text: getWordCount(openGraph())
                                    "></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <?php if ($permissions->isTransferAllowed()): ?>
                        <div class="wtai-field-transfer-wrapper" data-bind="attr: {
                            title: (openGraph() !== '' && statuses().openGraphGenerateStatus) ?
                                '<?= $escaper->escapeHtmlAttr($transferText) ?>' :
                                '<?= $escaper->escapeHtmlAttr(__('Nothing to transfer')) ?>'
                        }">
                            <button type="button"
                                class="wtai-field-transfer"
                                data-bind="
                                    enable:
                                        openGraph() !== '' &&
                                        statuses().openGraphGenerateStatus &&
                                        !keywordAnalysisOngoing() &&
                                        !isKoRefreshing(),
                                    click: function() {
                                        transfer('open_graph', openGraph())
                                    }">
                            </button>
                        </div>
                    <?php endif; ?>
                    <div class="wtai-field admin__field">
                        <label class="admin__field-label wtai-strong">
                            <?= $escaper->escapeHtml(__('Magento Open Graph text')) ?>
                            <span data-config-scope="
                                <?= $escaper->escapeHtmlAttr($openGraphScope) ?>
                            "></span>
                        </label>
                        <div class="wtai-control wtai-current">
                            <div class="wtai-value-wrapper wtai-medium"
                                id="wtaiOpenGraph"
                                data-bind="html: mgOpenGraph"></div>
                                
                            <?php if (!$attrScope->isAttributeGlobal($openGraphScope)): ?>
                                <div class="wtai-field-content" data-bind="visible: !isAllStoreView()">
                                    <input type="checkbox"
                                        id="wtaiOgUseDefault"
                                        class="admin__control-checkbox"
                                        data-bind="checked: useDefault().openGraph"
                                        disabled
                                    />
                                    <label class="wtai-label admin__field-label" for="wtaiOgUseDefault">
                                        <?= $escaper->escapeHtml(__('Use default value')) ?>
                                    </label>
                                </div>
                            <?php endif; ?>
                            <p class="wtai-text-length wtai-mg">
                                <span class="wtai-char-count"
                                    id="wtaiOpenGraphChar"
                                    data-bind="text: getCharCount(mgOpenGraph())"></span> | <span
                                    class="wtai-word-count"
                                    id="wtaiOpenGraphWords"
                                    data-bind="text: getWordCount(mgOpenGraph())"
                                ></span>
                            </p>
                        </div>
                    </div>
                    <div class="wtai-open-graph-loading-mask"></div>
                </div>
            </div>
        <?php endif; ?>
    </div>
</div>
<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Ui/js/core/app": {
                "components": {
                    "wtaiTextFields": {
                        "component": "WriteTextAI_WriteTextAI/js/edit/textfields",
                        "reviewStatusTemplates": {
                            "pageTitle": "WriteTextAI_WriteTextAI/edit/review-status/page-title",
                            "pageDescription": "WriteTextAI_WriteTextAI/edit/review-status/page-description",
                            "productDescription": "WriteTextAI_WriteTextAI/edit/review-status/product-description",
                            "productExcerpt": "WriteTextAI_WriteTextAI/edit/review-status/product-excerpt",
                            "openGraph": "WriteTextAI_WriteTextAI/edit/review-status/open-graph"
                        },
                        "wysiwygConfig":  <?= /* @noEscape */ json_encode($wysiwyg->getWysiwygConfig()) ?>,
                        "disabledWysiwygConfig":  <?= /* @noEscape */ json_encode(
                            $wysiwyg->getDisabledWysiwygConfig()
                        ) ?>,
                        "wordsAllowed": <?= /* @noEscape */ $permissions->isWordsAllowed() ? 'true' : 'false' ?>,
                        "confirmContent": "<?= $escaper->escapeJs($transferSettings->getConfirmContent()) ?>",
                        "maxPageTitle": <?= /* @noEscape */ $maxPageTitle ?>,
                        "maxPageDesc": <?= /* @noEscape */ $maxPageDesc ?>,
                        "maxOpenGraph": <?= /* @noEscape */ $maxOpenGraph ?>,
                        "transferUrl": "<?= $escaper->escapeJs($block->getUrl('wtai/edit/transfer')) ?>",
                        "rules": <?= /* @noEscape */ json_encode($settings->getSettings('rules')) ?>,
                        "saveUrl": "<?= $escaper->escapeJs($block->getUrl('wtai/settings/save')) ?>",
                        "reviewUrl": "<?= $escaper->escapeJs($block->getUrl('wtai/edit/review')) ?>",
                        "defaultStoreId" : <?= $escaper->escapeJs(Store::DEFAULT_STORE_ID) ?>,
                        "isEditAllowed": <?= /* @noEscape */ $permissions->isEditAllowed() ? 'true' : 'false' ?>
                    }
                }
            }
        }
    }
</script>
