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

<?php
use Magento\Store\Model\Store;

/** @var \WriteTextAI\WriteTextAI\ViewModel\Tooltip $tooltip */
/** @var \WriteTextAI\WriteTextAI\ViewModel\Permissions $permissions */
/** @var \WriteTextAI\WriteTextAI\ViewModel\AttrScope $attrScope */
/** @var \WriteTextAI\WriteTextAI\ViewModel\Settings $settings */
/** @var \WriteTextAI\WriteTextAI\ViewModel\Wysiwyg $wysiwyg */
/** @var \WriteTextAI\WriteTextAI\ViewModel\TransferSettings $transferSettings */

$tooltip = $block->getTooltip();
$permissions = $block->getPermissions();
$attrScope = $block->getAttrScope();
$settings = $block->getSettings();
$wysiwyg = $block->getWysiwyg();
$transferSettings = $block->getTransferSettings();
$maxPageTitle = $block->getData('max_page_title');
$maxPageDesc = $block->getData('max_page_desc');

$pageTitleScope = $attrScope->getCatAttrScope('page_title');
$pageDescScope = $attrScope->getCatAttrScope('page_description');
$categoryDescScope = $attrScope->getCatAttrScope('category_description');

$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"
                        ><?= $block->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.category') ?>
                            </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('category_page_title')->toHtml(); ?>
                <div class="wtai-field admin__field">
                    <label class="admin__field-label">
                        <span class="wtai-text-label wtai-long-text"><?= $block->escapeHtml(__('WriteText.ai meta title')) ?></span>
                        <span class="wtai-generate-status" data-bind="hidden: statuses().pageTitleGenerateStatus">
                            <?= $block->escapeHtml(sprintf('(%s)', __('Not generated'))) ?>
                        </span>
                        <span class="wtai-generate-status" data-bind="visible: statuses().pageTitleGenerateStatus">
                            <?= $block->escapeHtml(sprintf('(%s)', __('Generated'))) ?>
                        </span>
                        <span class="wtai-transfer-status wtai-not-transferred" data-bind="
                            visible:
                                !statuses().pageTitleTransferStatus &&
                                statuses().pageTitleGenerateStatus
                        ">
                            <?= $block->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"
                            data-bind="
                            textInput: pageTitle,
                                css: { 'wtai-disabled' : isNotEditable(!statuses().pageTitleGenerateStatus) },
                                disable: isNotEditable(!statuses().pageTitleGenerateStatus),
                                event: { 
                                    scroll: function(data, event) { 
                                        syncScroll(data, event, 'wtaiPageTitleMask')
                                    }
                                }
                            "
                            class="admin__control-textarea wtai-small"
                            <?= $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
                                ">
                                    <?= $block->escapeHtml(__('No text generated yet.')) ?>
                                </div>
                                <div class="wtai-disabled-tooltip-content" data-bind="
                                    visible: keywordAnalysisOngoing() && statuses().pageTitleGenerateStatus
                                ">
                                    <?= $block->escapeHtml(
                                        __('Editing is unavailable when keyword analysis is ongoing.')
                                    ) ?>
                                </div>
                            </div>
                        </div>
                        <p class="wtai-text-length">
                            <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>
                        </p>
                    </div>
                </div>
                <?php if ($permissions->isTransferAllowed()): ?>
                    <div class="wtai-field-transfer-wrapper" data-bind="attr: {
                        title: (pageTitle() !== '' && statuses().pageTitleGenerateStatus) ?
                            '<?= $block->escapeHtmlAttr($transferText) ?>' : '<?= $block->escapeHtmlAttr(__('Nothing to transfer')) ?>'
                    }">
                        <button type="button"
                            class="wtai-field-transfer"
                            data-bind="
                                enable:
                                    pageTitle() !== '' &&
                                    statuses().pageTitleGenerateStatus &&
                                    !keywordAnalysisOngoing(),
                                click: function() {
                                    transfer('page_title', pageTitle())
                                }
                            "
                        >
                        </button>
                    </div>
                <?php endif; ?>
                <div class="wtai-field admin__field">
                    <label class="admin__field-label wtai-strong">
                        <?= $block->escapeHtml(__('Magento meta title')) ?>
                        <span data-config-scope="<?= $block->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">
                                    <?= $block->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">
                            <?= $block->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.category') ?>
                            </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"><?= $block->escapeHtml(__('WriteText.ai meta description')) ?></span>
                        <span class="wtai-generate-status"data-bind="hidden: statuses().pageDescriptionGenerateStatus">
                            <?= $block->escapeHtml(sprintf('(%s)', __('Not generated'))) ?>
                        </span>
                        <span class="wtai-generate-status" data-bind="
                            visible: statuses().pageDescriptionGenerateStatus
                        ">
                            <?= $block->escapeHtml(sprintf('(%s)', __('Generated'))) ?>
                        </span>
                        <span class="wtai-transfer-status wtai-not-transferred" data-bind="visible:
                            !statuses().pageDescriptionTransferStatus &&
                            statuses().pageDescriptionGenerateStatus
                        ">
                            <?= $block->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"
                            data-bind="
                                textInput: pageDescription,
                                css: { 'wtai-disabled' : isNotEditable(!statuses().pageDescriptionGenerateStatus) },
                                disable: isNotEditable(!statuses().pageDescriptionGenerateStatus),
                                event: { 
                                    scroll: function(data, event) { 
                                        syncScroll(data, event, 'wtaiPageDescMask')
                                    }
                                }
                            "
                            class="admin__control-textarea wtai-medium" data-bind="
                                css: { 'wtai-disabled' : !statuses().pageDescriptionGenerateStatus }
                            "
                            <?= $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
                                ">
                                    <?= $block->escapeHtml(__('No text generated yet.')) ?>
                                </div>
                                <div class="wtai-disabled-tooltip-content" data-bind="
                                    visible: keywordAnalysisOngoing() && statuses().pageDescriptionGenerateStatus
                                ">
                                    <?= $block->escapeHtml(
                                        __('Editing is unavailable when keyword analysis is ongoing.')
                                    ) ?>
                                </div>
                            </div>
                        </div>
                        <p class="wtai-text-length">
                            <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>
                        </p>
                    </div>
                </div>
                <?php if ($permissions->isTransferAllowed()): ?>
                    <div class="wtai-field-transfer-wrapper" data-bind="attr: {
                        title: (pageDescription() !== '' && statuses().pageDescriptionGenerateStatus) ?
                            '<?= $block->escapeHtmlAttr($transferText) ?>' : '<?= $block->escapeHtmlAttr(__('Nothing to transfer')) ?>'
                    }">
                        <button type="button"
                            class="wtai-field-transfer"
                            data-bind="
                                enable:
                                    pageDescription() !== '' &&
                                    statuses().pageDescriptionGenerateStatus &&
                                    !keywordAnalysisOngoing(),
                                click: function() {
                                    transfer('page_description', pageDescription())
                                }
                            ">
                        </button>
                    </div>
                <?php endif; ?>
                <div class="wtai-field admin__field">
                    <label class="admin__field-label wtai-strong">
                        <?= $block->escapeHtml(__('Magento meta description')) ?>
                        <span data-config-scope="<?= $block->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">
                                    <?= $block->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="wtaiUseCategoryDescription"
                            value="category_description"
                            data-bind="checked: selectedFields"
                        />
                        <label for="wtaiUseCategoryDescription" class="admin__field-label">
                            <?= $block->escapeHtml(__('Category 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.category.description') ?>
                            </div>
                        </div>
                    </div>
                    <!-- ko template: reviewStatusTemplates.categoryDescription --><!-- /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('category_description')->toHtml(); ?>
                        <div class="wtai-field admin__field row">
                            <label class="admin__field-label wtai-medium">
                                <?= $block->escapeHtml(__('Target length (in words)')) ?>
                            </label>
                            <div class="wtai-control">
                                <label class="wtai-label"><?= $block->escapeHtml(__('Min')) ?></label>
                                <input type="number"
                                    name="category_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"><?= $block->escapeHtml(__('Max')) ?></label>
                                <input type="number"
                                    name="category_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"><?= $block->escapeHtml(__('WriteText.ai category description')) ?></span>
                        <span class="wtai-generate-status" data-bind="
                            hidden: statuses().categoryDescriptionGenerateStatus
                        ">
                            <?= $block->escapeHtml(sprintf('(%s)', __('Not generated'))) ?>
                        </span>
                        <span class="wtai-generate-status" data-bind="
                            visible: statuses().categoryDescriptionGenerateStatus
                        ">
                            <?= $block->escapeHtml(sprintf('(%s)', __('Generated'))) ?>
                        </span>
                        <span class="wtai-transfer-status wtai-not-transferred"
                            data-bind="visible:
                                !statuses().categoryDescriptionTransferStatus &&
                                statuses().categoryDescriptionGenerateStatus">
                            <?= $block->escapeHtml(sprintf('(%s)', __('Not transferred'))) ?>
                        </span>
                        <div class="wtai-feedback-visibility" data-bind="
                            visible: statuses().categoryDescriptionGenerateStatus
                        ">
                            <?= /* @noEscape */ $block->getChildBlock('wtai.feedback')
                                ->setTextType('category_description')
                                ->toHtml();
                            ?>
                        </div>
                    </label>
                    <div class="wtai-control wtai-editor-wrapper"
                        data-target="category-description"
                        data-bind="css: {
                            'wtai-disabled': isNotEditable(!statuses().categoryDescriptionGenerateStatus)
                        }"
                    >
                        <div id="wtaiCategoryDescMask" class="wtai-highlight-mask wtai-large" data-bind="
                            highlightWords: {
                                keywords: keywordsUsed().categoryDescription,
                                text: categoryDescription,
                                formalLanguages: formalLanguages,
                                formalLanguageSupport: formalLanguageSupport,
                                highlightPronouns: highlightPronouns,
                                formal: formal,
                                informal: informal,
                                language: language,
                                highlighted: highlighted,
                                optimizationData: optimizationData,
                                selectedKeywords: selectedKeywords
                            }
                        "></div>
                        <textarea name="new_category_description"
                            data-bind="textInput: categoryDescription"
                            id="wtaiNewCategoryDescription"
                            class="admin__control-textarea wtai-large"
                            <?= $permissions->isEditAllowed() ? '' : 'readonly' ?>
                        ></textarea>
                        <div class="wtai-disabled-tooltip-wrapper" data-bind="
                            visible: isNotEditable(!statuses().categoryDescriptionGenerateStatus)
                        ">
                            <div class="wtai-disabled-tooltip">
                                <div class="wtai-disabled-tooltip-content" data-bind="
                                    visible: !statuses().categoryDescriptionGenerateStatus
                                ">
                                    <?= $block->escapeHtml(__('No text generated yet.')) ?>
                                </div>
                                <div class="wtai-disabled-tooltip-content" data-bind="
                                    visible: keywordAnalysisOngoing() && statuses().categoryDescriptionGenerateStatus
                                ">
                                    <?= $block->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(categoryDescription())
                                "></span> | <span class="wtai-word-count" data-bind="
                                    text: getWordCount(categoryDescription())
                                "></span>
                            </div>
                        </div>
                    </div>
                </div>
                <?php if ($permissions->isTransferAllowed()): ?>
                    <div class="wtai-field-transfer-wrapper" data-bind="attr: {
                        title: (categoryDescription() !== '' && statuses().categoryDescriptionGenerateStatus) ?
                            '<?= $block->escapeHtmlAttr($transferText) ?>' : '<?= $block->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:
                                    categoryDescription() !== '' &&
                                    statuses().categoryDescriptionGenerateStatus &&
                                    !keywordAnalysisOngoing(),
                                click: function() {
                                    transfer('category_description', categoryDescription())
                                }
                            ">
                        </button>
                    </div>
                <?php endif; ?>
                <div class="wtai-field admin__field">
                    <label class="admin__field-label wtai-strong">
                        <?= $block->escapeHtml(__('Magento description')) ?>
                        <span data-config-scope="<?= $block->escapeHtmlAttr(
                            $categoryDescScope
                        ) ?>"></span>
                    </label>
                    <div class="wtai-control wtai-current">
                        <div class="wtai-value-wrapper wtai-large"
                            id="wtaiCategoryDescription"
                            data-bind="html: mgCategoryDescription"></div>
                        <?php if (!$attrScope->isAttributeGlobal($categoryDescScope)): ?>
                            <div class="wtai-field-content" data-bind="visible: !isAllStoreView()">
                                <input type="checkbox"
                                    id="wtaiCategoryDescUseDefault"
                                    class="admin__control-checkbox"
                                    data-bind="checked: useDefault().categoryDescription"
                                    disabled
                                />
                                <label class="wtai-label admin__field-label" for="wtaiCategoryDescUseDefault">
                                    <?= $block->escapeHtml(__('Use default value')) ?>
                                </label>
                            </div>
                        <?php endif; ?>
                        <p class="wtai-text-length wtai-mg">
                            <span class="wtai-char-count"
                                id="wtaiCategoryDescriptionChar" 
                                data-bind="text: getCharCount(mgCategoryDescription())"
                            ></span> | <span class="wtai-word-count"
                                id="wtaiCategoryDescriptionWords" 
                                data-bind="text: getWordCount(mgCategoryDescription())"
                            ></span>
                        </p>
                    </div>
                </div>
                <div class="wtai-category-description-loading-mask"></div>
            </div>
        </div>
    </div>
</div>

<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Ui/js/core/app": {
                "components": {
                    "wtaiTextFields": {
                        "component": "WriteTextAI_WriteTextAI/js/categories/edit/textfields",
                        "reviewStatusTemplates": {
                            "pageTitle": "WriteTextAI_WriteTextAI/categories/edit/review-status/page-title",
                            "pageDescription": "WriteTextAI_WriteTextAI/categories/edit/review-status/page-description",
                            "categoryDescription":
                                "WriteTextAI_WriteTextAI/categories/edit/review-status/category-description"
                        },
                        "wordsAllowed": <?= /* @noEscape */ $permissions->isWordsAllowed() ? 'true' : 'false' ?>,
                        "maxPageTitle": <?= /* @noEscape */ $maxPageTitle ?>,
                        "maxPageDesc": <?= /* @noEscape */ $maxPageDesc ?>,
                        "rules": <?= /* @noEscape */ json_encode($settings->getSettings('rules')) ?>,
                        "wysiwygConfig":  <?= /* @noEscape */ json_encode($wysiwyg->getWysiwygConfig()) ?>,
                        "disabledWysiwygConfig":  <?= /* @noEscape */ json_encode(
                            $wysiwyg->getDisabledWysiwygConfig()
                        ) ?>,
                        "transferUrl":
                            "<?= $block->escapeJs($block->getUrl('wtai/categories/edit_transfer')) ?>",
                        "saveUrl": "<?= $block->escapeJs($block->getUrl('wtai/settings/save')) ?>",
                        "reviewUrl": "<?= $block->escapeJs($block->getUrl('wtai/categories/edit_review')) ?>",
                        "confirmContent": "<?= $block->escapeJs($transferSettings->getConfirmContent()) ?>",
                        "defaultStoreId" : <?= $block->escapeJs(Store::DEFAULT_STORE_ID) ?>
                    }
                }
            }
        }
    }
</script>
