<div class="modal-header">
    <button type="button" class="close" ng-click="cancel()">&times;</button>
    <h3>Update composite items for this part</h3>
</div>
<form name='compositeItemsForm' ng-submit="save()" class="form-horizontal">
    <div class="modal-body" style="min-height: 300px;">

        <input class="form-control" type="text" placeholder="Search and add stock" ng-model="part_search" search-clear="true" search-callback="addPart(ev, data)" autocomplete="off" product-search>

		<table class="table" style="margin-top: 10px;">
			<thead>
                <th>Stock Item</th>
                <th class="centered">Cost</th>
                <th class="centered">Quantity (1 unit)</th>
                <th></th>
            </thead>
			<tbody>
				<tr ng-repeat="item in part.composite_items">
					<td ng-bind="::item.name"></td>
					<td>{[{ item.cost == 'NA' ? item.cost : (item.cost | currency:"£") }]}</td>
					<td class="centered">
						<input type="text" class="input-small" ng-model="item.pivot.quantity">
					</td>
					<td>
						<a href="#" class="pull-right" ng-click="part.composite_items.splice($index, 1)" data-eat-click>Remove</a>
					</td>
				</tr>
			</tbody>
		</table>
    </div>
    <div class="form-actions">
        <span ng-click="cancel()" class="btn btn-default">Close</span>
        <button class="btn btn-primary" ng-disabled="loading"><i ng-if="loading" class="fa fa-spinner fa-spin"></i> Update</button>
    </div>
</form>