<div class="modal-header">
	<h3 class="modal-title">Customer's Licenses</h3>
</div>
<div class="modal-body">
	<table class="table table-striped">
		<thead ng-if="licenses.length > 0">
			<th>Product</th>
			<th>Key</th>
			<th>Expiry Date</th>
		</thead>
		<tbody>
			<tr data-ng-repeat="license in licenses">
				<td><span editable-text="license.product" onbeforesave="update(license, 'product', $data)">{[{ license.product || 'No value' }]}</span></td>
				<td><span editable-text="license.key" onbeforesave="update(license, 'key', $data)">{[{ license.key || 'No value' }]}</span></td>
				<td>
					<span ng-model="license.expiry_date" ng-change="update(license, 'expiry_date', license.expiry_date)" bs-datepicker data-date-format="DD-MM-YYYY">
						<i class="fa fa-calendar"></i> {[{ (license.expiry_date | date:"dd/MM/yyyy") || 'No expiry date' }]}
					</span>
				</td>
			</tr>
			<tr data-ng-show="! licenses.length">
				<td colspan="2">No licenses stored.</td>
			</tr>
		</tbody>
	</table>

	<br>
	<div class="headline">
		<h4><i class="fa fa-plus"></i> Add a new entry</h4>
	</div>
	<div class="well">
		<form name="newEntry" class="form-inline" ng-submit="add()">
			<input type="text" class="form-control" name="product" placeholder="Product" data-ng-model="new.product"autocomplete="off" required>
			<input type="text" class="form-control" name="key" placeholder="Key" data-ng-model="new.key" data-ng-required="new.product" autocomplete="off">
			<button class="btn btn-primary" type="submit" ng-disabled="newEntry.$invalid">Add</button>
		</form>
	</div>

</div>
<div class="modal-footer">
	<button class="btn btn-default" ng-click="cancel()">Close</button>
</div>