<div id="change-password-container" class="col-md-12">
    <h3>{{'profile.headers.CHANGE_PASSWORD' | translate}}</h3>
    <div class="alert alert-info">
        <span class="glyphicon glyphicon-info-sign"></span>
        {{'profile.forms.messages.PASSWORD_CHARACTERS' | translate}}
    </div>
    <form>
        <div class="change-passwd-list col-md-12">
            <div id="old-password-container" class="passwords-container col-md-12">
                <label class="col-md-2">{{'profile.forms.labels.OLD_PASSWORD' | translate}}</label>
                <input class="col-md-2" type="password" ng-model="data.oldPassword" required />
            </div>
            <div id="new-password-container" class="passwords-container col-md-12">
                <label class="col-md-2">{{'profile.forms.labels.NEW_PASSWORD' | translate}}</label>
                <input class="col-md-2" pattern="(?=^.{8,}$)((?=.*\d)(?=.*\w+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$" type="password" ng-model="data.newPassword" required />
            </div>
            <div id="confirm-password-container" class="passwords-container col-md-12">
                <label class="col-md-2">{{'profile.forms.labels.CONFIRM_PASSWORD' | translate}}</label>
                <input class="col-md-2" type="password" ng-model="data.confirmPassword" required />
            </div>
        </div>

        <div class="col-md-12">
            <input type="submit"
                id="change-password-button"
                class="btn btn-success"
                ng-click="showHideDialog()" />
        </div>
    </form>
</div>

<div id="change-password-dialog-confirm"
     dialog
     ng-if="isDialogVisible"
     on-confirmation="changePassword"
     on-close="showHideDialog"
     is-modal="true"
     has-buttons="true"
     parameters="data"
     title="{{'profile.headers.CHANGE_PASSWORD' | translate}}">
  <p><span class="glyphicon glyphicon-warning-sign"></span>{{'profile.forms.messages.PASSWORD_CONFIRMATION' | translate}} <b>{{passwordChanges.username}}</b>?</p>
</div>
