<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <script data-require="angular.js@*" data-semver="1.3.7" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script>
    <script data-require="angular-credit-cards@*" data-semver="3.0.1" src="https://rawgit.com/bendrucker/angular-credit-cards/v3.0.1/release/angular-credit-cards.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="app.js"></script>
  </head>

  <body ng-app="ccDemoApp">
    <div class="container">
      <h1>
        <a href="https://github.com/bendrucker/angular-credit-cards">
          angular-credit-cards
        </a>
        Demo
      </h1>
      <form name="ccForm">
        <div class="form-group">
          <label for="card-number">Card Number</label>
          <input type="text" class="form-control" id="cardNumber" cc-number cc-eager-type name="ccNumber" ng-model="card.number">
        </div>
        <table class="table">
          <tr>
            <th>Valid</th>
            <th>Eager Type</th>
            <th>Type</th>
          </tr>
          <tr>
            <td>
              {{ccForm.ccNumber.$valid | yesNo}}
            </td>
            <td>
              {{ccForm.ccNumber.$ccEagerType || 'Unknown'}}
            </td>
            <td>
              {{ccForm.ccNumber.$ccType || 'Unknown'}}
            </td>
          </tr>
        </table>
        <div class="form-group">
          <label for="cvc">CVC</label>
          <input type="text" class="form-control" id="cvc" cc-cvc cc-type="ccForm.ccNumber.$ccType" name="ccCvc" ng-model="card.cvc">
        </div>
        <table class="table">
          <tr>
            <th>Valid</th>
          </tr>
          <tr>
            <td>
              {{ccForm.ccCvc.$valid | yesNo}}
            </td>
          </tr>
        </table>
        <div class="form-group">
          <label for="card-number">Expiration</label>
          <div class="row" cc-exp>
            <div class="col-xs-3">
              <input placeholder="MM" type="text" class="form-control" cc-exp-month name="ccExpMonth" ng-model="card.expiration.month">
            </div>
            <div class="col-xs-3">
              <input placeholder="YY" type="text" class="form-control" cc-exp-year name="ccExpYear" ng-model="card.expiration.year">
            </div>
          </div>
        </div>
        <table class="table">
          <tr>
            <th>Valid Month</th>
            <th>Valid Year</th>
            <th>Valid Pair</th>
          </tr>
          <tr>
            <td>
              {{ccForm.ccExpMonth.$valid | yesNo}}
            </td>
            <td>
              {{ccForm.ccExpYear.$valid | yesNo}}
            </td>
            <td>
              {{!ccForm.$error.ccExp | yesNo}}
            </td>
          </tr>
        </table>
      </form>
    </div>
  </body>

</html>
angular.module('ccDemoApp', [
  'credit-cards'
])
.filter('yesNo', function () {
  return function (boolean) {
    return boolean ? 'Yes' : 'No';
  }
})
/* Styles go here */