<?php
/**
 * Copyright 2014 Adobe
 * All Rights Reserved.
 */

/** @var \Magento\Captcha\Block\Captcha\DefaultCaptcha $block */
/** @var \Magento\Captcha\Model\DefaultModel $captcha */
/** @var \Magento\Framework\View\Helper\SecureHtmlRenderer $secureRenderer */

$captcha = $block->getCaptchaModel();
/** @var bool $validationEnabled */
$validationEnabled = $block->hasData('frontend_validation') ? $block->getData('frontend_validation') : true;
?>
<div class="admin__field<?php if ($validationEnabled): ?> _required<?php endif; ?>">
    <label for="captcha" class="admin__field-label">
        <span><?= $block->escapeHtml(__('Please enter the letters and numbers from the image')) ?></span>
    </label>
    <div class="admin__field-control">
        <input
            id="captcha"
            class="admin__control-text"
            type="text"
            name="<?= $block->escapeHtmlAttr(\Magento\Captcha\Helper\Data::INPUT_NAME_FIELD_VALUE)
            ?>[<?= $block->escapeHtml($block->getFormId()) ?>]"
            <?php if ($validationEnabled): ?>data-validate="{required:true}"<?php endif; ?>/>
        <?php if ($captcha->isCaseSensitive()):?>
            <div class="admin__field-note">
                <span><?= $block->escapeHtml(__('<strong>Attention</strong>: Captcha is case sensitive.'), ['strong'])
                ?></span>
            </div>
        <?php endif; ?>
    </div>
</div>
<div class="admin__field field-captcha">
    <img
        id="captcha-reload"
        class="captcha-reload"
        src="<?= $block->escapeUrl($block->getViewFileUrl('Magento_Captcha::reload.png')) ?>"
        alt="<?= $block->escapeHtmlAttr(__('Reload captcha')) ?>"/>
    <img
        id="<?= $block->escapeHtmlAttr($block->getFormId()) ?>"
        width="<?= /* @noEscape */ (float) $block->getImgWidth() ?>"
        height="<?= /* @noEscape */ (float) $block->getImgHeight() ?>"
        src="<?= $block->escapeUrl($captcha->getImgSrc()) ?>" />
</div>

<?php
$url = $block->escapeJs($block->getRefreshUrl());
$formId = $block->escapeJs($block->escapeHtml($block->getFormId()));
$scriptString = <<<script

    require(["prototype", "mage/captcha"], function(){

//<![CDATA[
        var captcha = new Captcha('{$url}', '{$formId}');

        $('captcha-reload').observe('click', function () {
            captcha.refresh(this);
        });

//]]>

    });
script;
?>
<?= /* @noEscape */ $secureRenderer->renderTag('script', [], $scriptString, false) ?>
