<div class="page-wrapper">
  <!--  box -->
  <div class="container simple-box">
    <div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1">
      <!--  panel -->
      <div class="panel panel-default">
        <div class="panel-body">
          <form class="simple-box-form form-horizontal" name="updatePasswordForm">
            <!-- note -->
            <div class="form-group">
              <div class="col-sm-12">
                <span class="small text-muted">
                  Your password must be updated.
                </span>
              </div>
            </div>
            <!-- !note -->
            <!-- current-password-input -->
            <div class="form-group">
              <label for="current_password" class="col-sm-4 control-label text-left">Current password</label>
              <div class="col-sm-8">
                <input type="password" class="form-control" ng-model="formValues.CurrentPassword" id="current_password" auto-focus required />
              </div>
            </div>
            <!-- !current-password-input -->
            <!-- new-password-input -->
            <div class="form-group">
              <label for="password" class="col-sm-4 control-label text-left">Password</label>
              <div class="col-sm-8">
                <input type="password" class="form-control" ng-model="formValues.Password" id="password" required />
              </div>
            </div>
            <!-- !new-password-input -->
            <!-- confirm-password-input -->
            <div class="form-group">
              <label for="confirm_password" class="col-sm-4 control-label text-left">Confirm password</label>
              <div class="col-sm-8">
                <div class="input-group">
                  <input type="password" class="form-control" ng-model="formValues.ConfirmPassword" id="confirm_password" required />
                  <span class="input-group-addon"
                    ><i
                      ng-class="{ true: 'fa fa-check green-icon', false: 'fa fa-times red-icon' }[formValues.Password !== '' && formValues.Password === formValues.ConfirmPassword]"
                      aria-hidden="true"
                    ></i
                  ></span>
                </div>
              </div>
            </div>
            <!-- !confirm-password-input -->
            <!-- note -->
            <div class="form-group">
              <div class="col-sm-12">
                <span class="small text-muted">
                  <i ng-class="{ true: 'fa fa-check green-icon', false: 'fa fa-times red-icon' }[formValues.Password.length >= 8]" aria-hidden="true"></i>
                  The password must be at least 8 characters long
                </span>
              </div>
            </div>
            <!-- !note -->
            <!-- actions -->
            <div class="form-group">
              <div class="col-sm-12">
                <button
                  type="submit"
                  class="btn btn-primary btn-sm"
                  ng-disabled="state.actionInProgress || !updatePasswordForm.$valid || formValues.Password.length < 8 || formValues.Password !== formValues.ConfirmPassword"
                  ng-click="updatePassword()"
                  button-spinner="state.actionInProgress"
                >
                  <span ng-hide="state.actionInProgress">Update password</span>
                  <span ng-show="state.actionInProgress">Updating password...</span>
                </button>
              </div>
            </div>
            <!-- !actions -->
          </form>
        </div>
      </div>
      <!-- ! panel -->
    </div>
  </div>
  <!-- ! box -->
</div>
