<!doctype html>
<html ng-app="symbolTestApp">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    .symbol-table td {
      vertical-align: top;
    }

    .list-of-symbols img.symbol-sm {
      vertical-align: middle;
    }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
  <script src="../../dist/milsymbol.js"></script>
  <script src="app.js"></script>
</head>

<body>


  <p>Example:</p>
  <code>
<pre>
    &lt;milsymbol sic="SFG-UCIZ---B" size="40"&gt;&lt;/milsymbol&gt;
</pre>
</code>

  <p>
    <milsymbol sic="SFG-UCIZ---B" size="40"></milsymbol>
  </p>



  <div ng-controller="ListSymbolsController" class="list-of-symbols">
    <span ng-repeat="symbol in symbols">
      <milsymbol sic="{{symbol}}" size="40"></milsymbol>
    </span>
  </div>

  <h2>Two way bindings</h2>

  <div ng-controller="SymbolController">
    <table class="symbol-table">
      <tr>
        <td>
          <form>
            Size:
            <br>
            <input type="number" ng-model="symbolSize" placeholder="Symbol size" ng-model-options="{ debounce: 500 }">
            <br> SIDC:
            <br>
            <input type="text" ng-model="sidc" placeholder="Symbol identification code" ng-model-options="{ debounce: 500 }">
            <br> Unique designation:
            <br>
            <input type="text" ng-model="uniqueDesignation" placeholder="uniqueDesignation" ng-model-options="{ debounce: 500 }">
            <br>

          </form>
        </td>
        <td>
          <milsymbol sic="{{sidc}}" size="{{symbolSize}}" unique-designation="{{uniqueDesignation}}"></milsymbol>
        </td>
      </tr>
    </table>
  </div>
</body>

</html>
