<?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'); ?>

  <input type="text" name="<?= $this->name ?>" id="ctrl_<?= $this->id ?>" class="captcha mandatory<?php if ($this->class): ?> <?= $this->class ?><?php endif; ?>" value="" aria-describedby="captcha_text_<?= $this->id ?>"<?= $this->getAttributes() ?>>
  <span id="captcha_text_<?= $this->id ?>" class="captcha_text<?php if ($this->class): ?> <?= $this->class ?><?php endif; ?>"><?= $this->getQuestion() ?></span>
  <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" name="<?= $this->name ?>_name" id="ctrl_<?= $this->id ?>_hp" value="">
  </div>
  <script>
    var e = document.getElementById('ctrl_<?= $this->id ?>'),
      p = e.parentNode, f = p.parentNode;

    if ('fieldset' === f.nodeName.toLowerCase() && 1 === f.children.length) {
      p = f;
    }

    p.style.display = 'none';
    e.value = '<?= $this->getSum() ?>';
  </script>
<?php endif ?>

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