<div ng-init="VCDC.showSecret = false;" class="auth-modal">
  <div class="modal-header">
    <h4 class="modal-title">Verify your LDS Account</h4>
    <div ng-if="VCDC.flashMessage"><br/>
      <div ng-class="[ VCDC.flashMessageClass ]" class="alert"><span ng-bind="VCDC.flashMessage"></span></div>
    </div>
  </div>
  <div class="modal-body">
    <div class="row">
      <div class="col-sm-8">
        <div class="form-group">
          <label for="phonecode">SMS verification for {{ VCDC.phone }}. </label>
        </div>
      </div>
      <div class="col-sm-4">
        <button ng-click="VCDC.sendCode('phone', VCDC.phone)" ng-disabled="VCDC.codes.phone" class="btn btn-default">Send Code to Phone</button>
      </div>
    </div>
    <div class="row">
      <form ng-submit="VCDC.validateCode(VCDC.phoneCode)">
        <div class="col-sm-8">
          <div class="form-group">
            <input type="text" placeholder="ex: SMS 098-765" ng-model="VCDC.phoneCode" ng-disabled="!VCDC.codes.phone || VCDC.phoneVerified" min-length="6" required="required" class="form-control"/>
            <div ng-if="VCDC.phoneFlashMessage" class="help-block">{{ VCDC.phoneFlashMessage }}</div>
          </div>
        </div>
        <div class="col-sm-4">
          <button type="submit" ng-disabled="!VCDC.codes.phone || VCDC.phoneVerified" class="btn btn-success">Verify Phone Code</button>
        </div>
      </form>
    </div>
    <div class="row">
      <div class="col-xs-12">
        <div ng-if="VCDC.validationErrorMessages.phone" class="alert alert-danger">{{ VCDC.validationErrorMessages.phone }}</div>
        <div ng-if="VCDC.phoneVerified" class="alert alert-success">Phone Verified! :-D</div>
        <div class="help-block">code will be sent from +1 (801) 788-4599</div>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-8">
        <div class="form-group">
          <label for="emailcode">EMAIL verification code for {{ VCDC.email }}.</label>
        </div>
      </div>
      <div class="col-sm-4">
        <button ng-click="VCDC.sendCode('email', VCDC.email)" ng-disabled="VCDC.codes.email" class="btn btn-default">Send Code to Email</button>
      </div>
    </div>
    <div class="row">
      <form ng-submit="VCDC.validateCode(VCDC.emailCode)">
        <div class="col-sm-8">
          <div class="form-group">
            <input type="text" placeholder="ex: Email fluffy-bunny-77" ng-model="VCDC.emailCode" ng-disabled="!VCDC.codes.email || VCDC.emailVerified" min-length="9" required="required" class="form-control"/>
            <div ng-if="VCDC.emailFlashMessage" class="help-block">{{ VCDC.emailFlashMessage }}</div>
          </div>
        </div>
        <div class="col-sm-4">
          <button type="submit" ng-disabled="!VCDC.codes.email || VCDC.emailVerified" class="btn btn-success">Verify Email Code</button>
        </div>
      </form>
    </div>
    <div class="row">
      <div class="col-xs-12">
        <div ng-if="VCDC.validationErrorMessages.email" class="alert alert-danger">{{ VCDC.validationErrorMessages.email }}</div>
        <div ng-if="VCDC.emailVerified" class="alert alert-success">Email Verified! :-D</div>
        <div class="help-block">code will be sent by woof@hellabit.com</div>
      </div>
    </div>
    <div class="modal-footer">
      <div class="row">
        <div class="col-xs-12">
          <div class="form-group">
            <button ng-disabled="!VCDC.phoneVerified || !VCDC.emailVerified" ng-click="VCDC.verifyAccount()" type="button" class="btn btn-primary"><span ng-if="!VCDC.phoneVerified || !VCDC.emailVerified">Verify your Account</span><span ng-if="VCDC.phoneVerified &amp;&amp; VCDC.emailVerified">Continue</span></button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>