
<div class="row">
    <div class="col-md-2 fusio-sidebar" ng-include src="'app/account/nav.html'"></div>
    <div class="col-md-10">
        <div class="fusio-content">
            <h2>Contracts</h2>
            <div uib-alert ng-class="'alert-info'">
              List of available contracts. 
            </div>

            <table class="table">
                <colgroup>
                    <col width="*" />
                    <col width="150" />
                    <col width="100" />
                    <col width="100" />
                    <col width="100" />
                    <col width="50" />
                </colgroup>
                <thead>
                <tr>
                    <th>Plan</th>
                    <th>Period</th>
                    <th>Amount</th>
                    <th>Points</th>
                    <th>Date</th>
                    <th></th>
                </tr>
                </thead>
                <tbody>
                <tr ng-repeat="contract in contracts">
                    <td>{{ contract.plan.name }}</td>
                    <td>
                      <span ng-switch="contract.period">
                        <span ng-switch-when="0">None</span>
                        <span ng-switch-when="1">1 Month</span>
                        <span ng-switch-when="2">3 Month</span>
                        <span ng-switch-when="3">6 Month</span>
                        <span ng-switch-when="4">12 Month</span>
                      </span>
                    </td>
                    <td>{{ contract.amount | currency : symbol : 2 }}</td>
                    <td>{{ contract.points }}</td>
                    <td>{{ contract.insertDate | date: 'shortDate' }}</td>
                    <td>
                      <button class="btn btn-default" ng-click="showContract(contract)">Show</button>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
