<section class="col-12">
  <h1>{{ pageHeader }}</h1>
  <p>{{ msgRegistrationCredentials }} {{ msgRegistrationNote }}</p>

  <div id="registrations"></div>

  <form id="formValues" method="post" action="#" accept-charset="utf-8">
    <input type="hidden" name="lang" id="lang" value="{{ lang }}" />

    <div class="form-group row">
      <label class="col-3 form-control-label" for="realname">{{ realname }}</label>
      <div class="col-9">
        <input type="text" name="realname" id="realname" required class="form-control" />
      </div>
    </div>

    <div class="form-group row">
      <label class="col-3 form-control-label" for="name">{{ loginname }}</label>
      <div class="col-9">
        <input type="text" name="name" id="name" required class="form-control" />
      </div>
    </div>

    <div class="form-group row">
      <label class="col-3 form-control-label" for="email">{{ email }}</label>
      <div class="col-9">
        <input type="email" name="email" id="email" required class="form-control" />
      </div>
    </div>

    <div class="form-group row">
      <div class="offset-3 col-sm-9">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="is_visible" name="is_visible" />
          <label class="form-check-label" for="is_visible"> {{ is_visible }} </label>
        </div>
      </div>
    </div>

    {{ captchaFieldset }}

    <div id="loader"></div>

    <div class="form-group row">
      <div class="col-12 text-right">
        <button class="btn btn-primary" type="submit" id="submitregistration">{{ submitRegister }}</button>
      </div>
    </div>
  </form>
  <script type="text/javascript">
    document.addEventListener('DOMContentLoaded', () => {
      'use strict';
      $('#submitregistration').on('click', () => {
        saveFormValues('saveregistration', 'registration');
      });
      $('form#formValues').submit(() => {
        return false;
      });
    });
  </script>
</section>