<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

/** @var \Magento\Captcha\Block\Captcha\DefaultCaptcha $block */

/** @var \Magento\Captcha\Model\DefaultModel $captcha */
$captcha = $block->getCaptchaModel();
$name = $block->escapeHtmlAttr(\Magento\Captcha\Helper\Data::INPUT_NAME_FIELD_VALUE);
/** @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="<?= /** @noEscape */ $name ?>[<?= $block->escapeHtmlAttr($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>
<script>
    require(["prototype", "mage/captcha"], function(){

//<![CDATA[
        var captcha = new Captcha(
            '<?= $block->escapeJs($block->getRefreshUrl()) ?>',
            '<?= $block->escapeJs($block->getFormId()) ?>'
        );

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

//]]>

    });
</script>
