<div class="row" ng-if="model.question">
  <div class="col-sm-5">
    <ng-include src="'/o/bgp-theme/angular/partials/bg-authentication/field-question.html'"></ng-include>
  </div>
</div>

<p>
  {{'common-enter-the-number-with-coordinates' | t}}

  <span class="font-weight-semibold">
    {{"common-link-card" | t}} &#35;{{model.deviceCode}}
  </span>
</p>

<div class="row mtm">
  <div class="col-sm-5">
    <div class="row">
      <div class="col-md-2 col-sm-3" ng-repeat="image in model.imagePaths">
        <div class="form-group text-center">
          <label for="codeCardAuthenticationCode{{$index}}">
            <img ng-src="{{model.imagePaths[$index]}}" />
          </label>

          <input
            name="codeCardAuthenticationCode{{$index}}"
            id="codeCardAuthenticationCode{{$index}}"
            type="text"
            class="form-control field-required"
            autocomplete="off"
            maxlength="2"
            ng-pattern-restrict="^[0-9]*$"
            ng-blur="onBlurCoordinatesInputAuthenticateStep($index)"
            ng-change="model.invalidAuthAnswer = false"
            bg-focus-me="!model.question && ($index===0 || model.codeCardAnswers[$index-1].length === 2)"
            ng-model="model.codeCardAnswers[$index]"
            ng-required="true"
            ng-class="{ 'error-field': (form['codeCardAuthenticationCode' + $index].$touched
              && form['codeCardAuthenticationCode' + $index].$invalid)
              || ((form['codeCardAuthenticationCode' + $index].$invalid
              || model.invalidAuthAnswer) && form.$submitted)}"/>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-sm-12 form-validator-stack help-block"
        ng-show="
        ((form['codeCardAuthenticationCode0'].$error.required && (form['codeCardAuthenticationCode0'].$touched || form.$submitted))
        || (form['codeCardAuthenticationCode1'].$error.required && (form['codeCardAuthenticationCode1'].$touched || form.$submitted))
        || (form['codeCardAuthenticationCode2'].$error.required && (form['codeCardAuthenticationCode2'].$touched || form.$submitted)))">

        <div role="alert" class="required">
          {{'common-required-validation-message' | t}}
        </div>
      </div>

      <div class="col-sm-12 form-validator-stack help-block"
          ng-show="form.$submitted && model.invalidAuthAnswer">

        <div role="alert" class="required">
          {{'common-validation-invalid-code-card-authentication' | t}}
        </div>
      </div>
    </div>
  </div>

  <div class="col-sm-12 mtm">
    <span
      popover-class="bgp-popover-img-m"
      popover-placement="right"
      popover-trigger="'hover'"
      uib-popover-template="'/o/bgp-theme/angular/partials/bg-authentication/credit-cart-img.html'">

      <i class="fa fa-info-circle text-primary cursor-pointer"></i>

      <label>
        {{'common-what-is-this' | t}}
      </label>
    </span>
  </div>
</div>
