<?php $this->extend('form_row'); ?>

<?php $this->block('label'); ?>
<?php if ($this->label) : ?>
  <label for="ctrl_<?= $this->id ?>" <?php if ($this->class) : ?> class="<?= $this->class ?>" <?php endif; ?>>
    <span class="invisible"><?= $this->mandatoryField ?> </span><?= $this->label ?><span class="mandatory">*</span>
  </label>
<?php endif; ?>
<?php $this->endblock(); ?>

<?php $this->block('field'); ?>

<span id="captcha_text_<?= $this->id ?>" class="d-block captcha_text<?php if ($this->class) : ?> <?= $this->class ?><?php endif; ?>"><?= $this->getQuestion() ?></span>
<input type="text" name="<?= $this->name ?>" id="ctrl_<?= $this->id ?>" class="captcha mandatory form-control <?php if ($this->class) : ?> <?= $this->class ?><?php endif; ?>" value="" aria-describedby="captcha_text_<?= $this->id ?>" <?= $this->getAttributes() ?>>

<input type="hidden" name="<?= $this->name ?>_hash" value="<?= $this->getHash() ?>">

<?php if ($this->hasErrors()) : ?>
  <p class="error"><?= $this->getErrorAsString() ?></p>
<?php endif; ?>

<?php if (!$this->hasErrors()) : ?>
  <div style="display:none">
    <label for="ctrl_<?= $this->id ?>_hp">Do not fill in this field</label>
    <input type="text" class="form-control" name="<?= $this->name ?>_name" id="ctrl_<?= $this->id ?>_hp" value="">
  </div>
  <script>
    (function() {
      var e = document.getElementById('ctrl_<?= $this->id ?>'),
        p = e.parentNode,
        f = p.parentNode;

      if (f.classList.contains('widget-captcha') || 'fieldset' === f.nodeName.toLowerCase() && 1 === f.children.length) {
        p = f;
      }

      e.required = false;
      p.style.display = 'none';

      setTimeout(function() {
        e.value = '<?= $this->getSum() ?>';
      }, 5000);
    })();
  </script>
<?php endif ?>

<?php $this->endblock(); ?>