{{#if isLoaded}}
<div class="modal-body">

  {{#form-row
      label=(gettext "Username:")
      for="id_username"
      labelClass="col-md-4"
      controlClass="col-md-8"
      validation=validation.username}}

    {{input id="id_username" type="text" class="form-control" autocomplete="off" value=username}}
  {{/form-row}}

  {{#form-row
      label=(gettext "E-mail:")
      for="id_email"
      labelClass="col-md-4"
      controlClass="col-md-8"
      validation=validation.email}}

    {{input id="id_email" type="text" class="form-control" autocomplete="off" value=email}}
  {{/form-row}}

  {{#form-row
      label=(gettext "Password:")
      helpText=passwordHelpText
      for="id_password"
      labelClass="col-md-4"
      controlClass="col-md-8"
      validation=validation.password}}

    {{input id="id_password" type="password" class="form-control" autocomplete="off" value=password}}

    {{#if passwordHelpText}}
    <div class="progress password-strength">
      <div class="progress-bar {{passwordBarClass}}" role="progressbar" aria-valuenow="{{passwordScore}}" aria-valuemin="0" aria-valuemax="4" style="width: 20%;"></div>
    </div>
    {{/if}}
  {{/form-row}}

  {{#if captcha.field}}
  <hr>
    {{#if captcha.passed}}
      <p class="lead text-success text-center">
        <i class="material-icons">check</i>
        {{gettext "Anti-spam test completed."}}
      </p>
    {{else}}
      {{component captcha.field validation=validation.captcha labelClass="col-md-4" controlClass="col-md-8"}}
    {{/if}}
  {{/if}}

</div>
<div class="modal-footer">
  <div class="text-center">

    {{#if isBusy}}
    <button type="button" class="btn btn-primary btn-raised btn-busy" disabled="disabled">
      &nbsp;
      {{loader-compact}}
    </button>
    {{else}}
    <button type="submit" class="btn btn-primary btn-raised">
      {{gettext "Register account"}}
    </button>
    {{/if}}

    {{#if showTermsFootnote}}
    <div class="footer-extra">
      <p class="text-muted">
        {{#link-to "terms-of-service" class="site-link" target="_blank"}}
          <strong>{{gettext "Notice:"}}</strong>
          {{gettext "By registering account you accept site's terms of service."}}
        {{/link-to}}
      </p>
    </div>
    {{/if}}

  </div>
</div>
{{else if loadError}}
<div class="modal-body modal-message">

  <p class="lead">
    <i class="material-icons">info_outline</i>
    {{gettext "This form is not avaialable at the moment."}}
  </p>

  <p>{{gettext "Please contact board administrator."}}</p>

</div>
{{else}}
<div class="modal-body modal-message">
  {{loader-compact}}
</div>
{{/if}}