<div>
    <div class="modal-header">
      <img ng-src="{{logoBlack.custom_asset_file_attributes.attachment_url}}" alt="{{logo.custom_asset_file_attributes.attachment}}" class="modal-logo"/>
      <h1 translate>{{ 'app.public.common.change_your_password' }}</h1>
    </div>
    <div class="modal-body">
      <uib-alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</uib-alert>
      <div class="panel panel-default bg-light">
        <div class="panel-body">
          <form name="passwordEditForm" class="form-horizontal" ng-keydown="passwordEditForm.$valid && $event.which == 13 && changePassword()">
            <div class="form-group" ng-class="{'has-error': passwordEditForm.password.$dirty && passwordEditForm.password.$invalid}">
              <div class="col-sm-12">
                <div class="input-group">
                  <span class="input-group-addon"><i class="fa fa-key"></i></span>
                  <input type="password"
                         name="password"
                         ng-model="user.password"
                         class="form-control"
                         placeholder="{{ 'app.public.common.your_new_password' | translate }}"
                         required
                         ng-minlength="8">
                </div>
                <span class="help-block" ng-show="passwordEditForm.password.$dirty && passwordEditForm.password.$error.required" translate>{{ 'app.public.common.password_is_required' }}</span>
                <span class="help-block" ng-show="passwordEditForm.password.$dirty && passwordEditForm.password.$error.minlength" translate>{{ 'app.public.common.password_is_too_short' }}</span>
              </div>
            </div>

            <div class="form-group" ng-class="{'has-error': passwordEditForm.password_confirmation.$dirty && passwordEditForm.password_confirmation.$invalid}">
              <div class="col-sm-12">
                <div class="input-group">
                  <span class="input-group-addon"><i class="fa fa-key"></i></span>
                  <input type="password"
                         name="password_confirmation"
                         ng-model="user.password_confirmation"
                         class="form-control"
                         placeholder="{{ 'app.public.common.type_your_password_again' | translate }}"
                         required
                         ng-minlength="8"
                         match="user.password">
                </div>
                <span class="help-block" ng-show="passwordEditForm.password_confirmation.$dirty && passwordEditForm.password_confirmation.$error.required" translate>{{ 'app.public.common.password_confirmation_is_required' }}</span>
                <span class="help-block" ng-show="passwordEditForm.password_confirmation.$error.match" translate>{{ 'app.public.common.password_does_not_match_with_confirmation' }}</span>
              </div>
            </div>
          </form>

        </div>
        <div class="panel-footer no-padder">
          <button class="btn btn-valid btn-warning btn-block p-l btn-lg text-u-c r-b" ng-click="changePassword()" ng-disabled="passwordEditForm.$invalid" translate>{{ 'app.shared.buttons.confirm'}}</button>
        </div>
      </div>
    </div>

  </div>