<div class="page-header">
    <h1 id="pageTitle">{{'changePasswordHtmlTitle' | translate}}</h1>
</div>

<div class="col-sm-12 card-pf">
  <div class="card-pf-body p-b" id="passwordLastUpdate">
    <span class="i pficon pficon-info"></span>
    {{'passwordLastUpdateMessage' | translate}} <strong>{{lastPasswordUpdate | date:'medium'}}</strong>
  </div>
</div>

<div class="col-sm-12 card-pf">
    <div class="card-pf-body row">
        <div class="col-sm-4 col-md-4">
            <div class="card-pf-subtitle" id="updatePasswordSubTitle">
                {{'updatePasswordTitle' | translate}}
            </div>
            <div class="introMessage" id="updatePasswordSubMessage">
                <strong>{{'updatePasswordMessageTitle' | translate}}</strong>
                <p>{{'updatePasswordMessage' | translate}}</p>
            </div>
            <div class="subtitle"><span class="required">*</span> {{'requiredFields' | translate}}</div>
        </div>
        <div class="col-sm-6 col-md-6">
          <form #formGroup="ngForm" (ngSubmit)="changePassword()" class="form-horizontal">
            <input readonly="" value="this is not a login form" style="display: none;" type="text">
            <input readonly="" value="this is not a login form" style="display: none;" type="password">
            <div class="form-group">
                <label for="password" class="control-label">{{'currentPassword' | translate}}</label><span class="required">*</span>
                <input ngModel required class="form-control" #password id="password" name="currentPassword" autofocus="" autocomplete="off" type="password">
            </div>

            <div class="form-group">
                <label for="password-new" class="control-label">{{'passwordNew' | translate}}</label><span class="required">*</span>
                <input ngModel required class="form-control" id="newPassword" name="newPassword" autocomplete="off" type="password">
            </div>

            <div class="form-group">
                <label for="password-confirm" class="control-label">{{'passwordConfirm' | translate}}</label><span class="required">*</span>
                <input ngModel required class="form-control" id="confirmation" name="confirmation" autocomplete="off" type="password">
            </div>

            <div class="form-group">
                <div id="kc-form-buttons" class="submit">
                    <div class="">
                        <button [disabled]="!formGroup.form.valid" type="submit" class="btn btn-primary btn-lg" name="submitAction">{{'doSave' | translate}}</button>
                    </div>
                </div>
            </div>
          </form>
      </div>
  </div>
</div>
