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

<?php $this->block('label'); ?>
<?php if ($this->hasErrors()): ?>
  <span class="errortip" title="<?= htmlspecialchars($this->getErrorsAsString()); ?>" data-tooltip="position: top; offsetY: 10; theme: tooltipster-error; contentAsHTML: true;">?</span>
<?php endif; ?>
<?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'); ?>
<input type="text" name="<?= $this->name ?>" id="ctrl_<?= $this->id ?>" class="captcha mandatory<?php if ($this->class) echo ' ' . $this->class; ?>" value="" aria-describedby="captcha_text_<?= $this->id ?>"<?= $this->getAttributes() ?>>
<span id="captcha_text_<?= $this->id ?>" class="captcha_text<?php if ($this->class) echo ' ' . $this->class; ?>"><?= $this->getQuestion() ?></span>

<?php if (!$this->hasErrors()): ?>
  <div style="display:none">
    <label for="ctrl_<?= $this->id ?>_hp">Do not fill in this field</label>
    <input type="text" name="<?= $this->name ?>_name" id="ctrl_<?= $this->id ?>_hp" value="">
  </div>
  <script>
    document.getElementById('ctrl_<?= $this->id ?>').parentNode.style.display = 'none';
    document.getElementById('ctrl_<?= $this->id ?>').value = '<?= $this->getSum() ?>';
  </script>
<?php endif ?>

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