<!-- Emergency Login Options -->
  <div class="card admin-auth-card my-profile-container">
    <h1>Emergency Login Setup</h1>
    <h4>Setup an emergency login URL for organization admins, so you can regain access after local login is disabled</h4>

    <div class="main-cta-btn button-style btn" ng-click="setPassword()" ng-show="showSetPasswordButton">
      <div>
        <span class="btn-txt-icon">
          {{ localLogin.isPasswordSet ? 'Change password' : 'Set Password and Generate URL' }}
        </span>
      </div>
    </div>

    <div class="emergency-password-section" ng-show="showEmergencyPasswordSection" style="margin-top: 25px;">

      <form name="emergencyPassword" class="form-horizontal panel-inner" role="form" ng-submit="saveEmergencyPassword()">

        <div class="form-group" ng-class="{'has-error': errors.password}" ng-if="localLogin.isPasswordSet">
          <label class="col-sm-3 control-label">Current Password</label>
          <div class="col-sm-6">
            <input type="password" class="form-control" placeholder="Type your current password" ng-model="localLogin.password" ng-required="true">
            <span class="help-block" ng-show="errors.password">{{errors.password}}</span>
          </div>
        </div>

        <div class="form-group" ng-class="{'has-error': errors.newPassword1 || emergencyPassword.newPassword1.$error.minlength}">
          <label class="col-sm-3 control-label">New Password</label>
          <div class="col-sm-6">
            <input type="password" class="form-control" placeholder="Type your new password" name="newPassword1"
                   ng-model="localLogin.newPassword1" ng-required="true" ng-minlength="10">
            <p class="text-danger" ng-show="emergencyPassword.newPassword1.$error.minlength">Your password is required to be at least 10 characters.</p>
            <p class="text-danger" ng-show="!specCase">Your password is required to be upper and lower case.</p>
            <span class="help-block" ng-show="errors.newPassword1">{{errors.newPassword1}}</span>
          </div>
        </div>

        <div class="form-group" ng-class="{'has-error': errors.newPassword2 || localLogin.newPassword1 !== localLogin.newPassword2 && localLogin.newPassword1 && localLogin.newPassword2}">
          <label class="col-sm-3 control-label">Verify Password</label>
          <div class="col-sm-6">
            <input type="password" class="form-control" placeholder="Verify your new password" name="newPassword2"
                   ng-required="true" ng-model="localLogin.newPassword2" ng-minlength="10">
            <span class="help-block " ng-show="errors.newPassword2">{{errors.newPassword2}}</span>
            <p class="text-danger" ng-show="localLogin.newPassword1 !== localLogin.newPassword2 && localLogin.newPassword1 && localLogin.newPassword2">
              Passwords do not match
            </p>
          </div>
        </div>

        <div class="form-group">
          <div class="control-label col-sm-6">
            <button type="submit" class="btn btn-primary"
                    ng-disabled="emergencyPassword.$invalid || localLogin.newPassword1 !== localLogin.newPassword2 || !specCase">
              Set Password
            </button>
          </div>
        </div>

      </form>

    </div>

    <div ng-show="localLogin.url" class="form-control emergency-url">
      Emergency Login URL: <strong>{{ localLogin.url }}</strong>
    </div>

  </div>