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

  {{#form-row label=(gettext "Username:") for="id_username" label-class="col-md-4" control-class="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" label-class="col-md-4" control-class="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:") help_text=passwordHelpText for="id_password" label-class="col-md-4" control-class="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">
        <span class="fa fa-check fa-lg"></span>
        {{gettext "Anti-spam test completed."}}
      </p>
    {{else}}
      {{component captcha.field validation=validation.captcha label-class="col-md-4" control-class="col-md-8"}}
    {{/if}}
  {{/if}}

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

    {{#if isLoading}}
    <button type="button" class="btn btn-primary" disabled="disabled">
      <span class="fa fa-cog fa-spin"></span>
      {{gettext "Registering..."}}
    </button>
    {{else}}
    <button type="submit" class="btn btn-primary">
      {{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 isErrored}}
<div class="modal-body modal-message">

  <p class="lead">
    <span class="fa fa-warning fa-lg"></span>
    {{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">
  <div class="loader"></div>
</div>
{{/if}}