<div class="row">
  <div class="col-xs-offset-1 col-xs-10 col-sm-offset-2 col-sm-8">
    <form class="form-horizontal" name="form" novalidate>
      <div class="form-group" ng-class="{ 'has-error': !form.password.$valid && form.$dirty }">
        <label for="inputPassword" class="col-sm-4 control-label">{{ 'passwordreset.message' | translate }}</label>
        <div class="col-sm-4">
          <input type="password" name="password" ng-model="password" required ng-minlength="8" ng-maxlength="50" class="form-control" id="inputPassword">
        </div>
        <div class="col-sm-4">
          <span class="help-block" ng-show="form.password.$error.required && form.$dirty">{{ 'validation.required' | translate }}</span>
          <span class="help-block" ng-show="form.password.$error.minlength && form.$dirty">{{ 'validation.too_short' | translate }}</span>
          <span class="help-block" ng-show="form.password.$error.maxlength && form.$dirty">{{ 'validation.too_long' | translate }}</span>
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-4 col-sm-5">
          <button class="btn btn-primary" ng-disabled="!form.$valid" ng-click="submit()">
            <span class="fas fa-lock"></span>
            {{ 'passwordreset.submit' | translate }}
          </button>
        </div>
      </div>
    </form>
  </div>
</div>