<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item" translate>NAVIGATION.HEADER.SETTINGS</li>
        <li class="breadcrumb-item active" translate>NAVIGATION.SETTINGS.CHANGE_PASSWORD</li>
    </ol>
</nav>

<div ng-controller="ChangePasswordController as formCtrl">
    <div translate ng-hide="passwordChangeAvailable" class="alert alert-warning" role="alert">SETTINGS.TEXT.PASSWORD_CHANGE_NOT_AVAILABLE</div>
    <form name="changePasswordForm" ng-submit="formCtrl.submit()" novalidate ng-show="passwordChangeAvailable">

        <div class="form-group row">
            <label for="inputCurrentPassword" class="col-sm-2 col-form-label" translate>WORDS.CURRENT_PASSWORD</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" id="inputCurrentPassword" name="inputCurrentPassword" ng-model="formCtrl.data.current_password" ng-minlength=5 ng-maxlength=64 required>
                <div class="invalid-feedback d-block" ng-if="changePasswordForm.inputCurrentPassword.$error.required" ng-show="changePasswordForm.$submitted" translate>VALIDATION.REQUIRED</div>
                <div class="invalid-feedback d-block" ng-if="changePasswordForm.inputCurrentPassword.$error.minlength" ng-show="changePasswordForm.$submitted" translate-value-characters="5" translate>VALIDATION.MIN_LENGTH</div>
                <div class="invalid-feedback d-block" ng-if="changePasswordForm.inputCurrentPassword.$error.maxlength" ng-show="changePasswordForm.$submitted" translate-value-characters="64" translate>VALIDATION.MAX_LENGTH</div>
                <div class="invalid-feedback d-block" ng-if="formCtrl.formErrors.current_password">{{formCtrl.formErrors.current_password}}</div>
            </div>
        </div>

        <div class="form-group row">
            <label for="inputPassword" class="col-sm-2 col-form-label" translate>WORDS.PASSWORD</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" id="inputPassword" name="inputPassword" ng-model="formCtrl.data.new_password" ng-minlength=5 ng-maxlength=64 required>
                <div class="invalid-feedback d-block" ng-if="changePasswordForm.inputPassword.$error.required" ng-show="changePasswordForm.$submitted" translate>VALIDATION.REQUIRED</div>
                <div class="invalid-feedback d-block" ng-if="changePasswordForm.inputPassword.$error.minlength" ng-show="changePasswordForm.$submitted" translate-value-characters="5" translate>VALIDATION.MIN_LENGTH</div>
                <div class="invalid-feedback d-block" ng-if="changePasswordForm.inputPassword.$error.maxlength" ng-show="changePasswordForm.$submitted" translate-value-characters="64" translate>VALIDATION.MAX_LENGTH</div>
                <div class="invalid-feedback d-block" ng-if="formCtrl.formErrors.new_password">{{formCtrl.formErrors.new_password}}</div>
            </div>
        </div>

        <div class="form-group row">
            <label for="inputPasswordRepeat" class="col-sm-2 col-form-label" translate>WORDS.PASSWORD_REPEAT</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" id="inputPasswordRepeat" name="inputPasswordRepeat" ng-model="formCtrl.data.new_password_repeat" ng-minlength=5 ng-maxlength=64 required>
                <div class="invalid-feedback d-block" ng-if="changePasswordForm.inputPasswordRepeat.$error.required" ng-show="changePasswordForm.$submitted" translate>VALIDATION.REQUIRED</div>
                <div class="invalid-feedback d-block" ng-if="changePasswordForm.inputPasswordRepeat.$error.minlength" ng-show="changePasswordForm.$submitted" translate-value-characters="5" translate>VALIDATION.MIN_LENGTH</div>
                <div class="invalid-feedback d-block" ng-if="changePasswordForm.inputPasswordRepeat.$error.maxlength" ng-show="changePasswordForm.$submitted" translate-value-characters="64" translate>VALIDATION.MAX_LENGTH</div>
                <div class="invalid-feedback d-block" ng-if="formCtrl.formErrors.new_password_repeat">{{formCtrl.formErrors.new_password_repeat}}</div>
            </div>
        </div>

        <div class="form-group row">
            <div class="col-sm-offset-2 col-sm-10">
                <button class="btn btn-primary" type="submit" ladda="formCtrl.laddaLoading">{{ 'WORDS.EDIT'|translate }}</button>
            </div>
        </div>


    </form>
</div>
