Misago/misago/emberapp/app/templates/components/forms/change-username-form.hbs

<div class="panel panel-form">
  <div class="panel-heading">
    <h3 class="panel-title">{{gettext "Change username"}}</h3>
  </div>
  {{#if isLoaded}}
    {{#if changesLeft}}
    <div class="panel-body">

      {{#form-row
          label=(gettext "New username:")
          helpText=changesLeftMessage
          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}}

    </div>
    <div class="panel-footer">
      <div class="row">
        <div class="col-md-8 col-md-offset-4">

          {{#if isBusy}}
          <button type="button" class="btn btn-primary btn-raised btn-block-sm btn-busy" disabled="disabled">
            {{gettext "Change username"}}
            {{loader-compact}}
          </button>
          {{else}}
          <button type="submit" class="btn btn-primary btn-raised btn-block-sm">
            {{gettext "Change username"}}
          </button>
          {{/if}}

        </div>
      </div>
    </div>
    {{else}}
    <div class="panel-body">
      <p>{{gettext "You can't change your username now."}}</p>
      {{#if nextChange}}
      <p>{{gettext "Next change will be possible %(next_change)s." next_change=(from-now nextChange tick=clock.tick)}}</p>
      {{/if}}
    </div>
    {{/if}}
  {{else if loadError}}
  <div class="panel-error">

    <div class="error-icon">
      <i class="material-icons">error_outline</i>
    </div>

    <div class="error-message">
      <p>{{loadError.detail}}</p>
    </div>

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