<div class="modal-header">
    <button type="button" class="close" ng-click="cancel()">&times;</button>
    <h3 class="modal-title">Build Components</h3>
</div>
<form name='compositeItemsForm' ng-submit="save()"  class="form-horizontal">
    <div class="modal-body" style="min-height: 300px;">
    	<div class="alert alert-danger" ng-if="error">
			<strong>Error: </strong>
			{[{ error }]}
		</div>
    	<div ng-if="build.status == 'planning'">
    		<input class="form-control" type="text" placeholder="Search and add stock components" ng-model="part_search" search-clear="true" search-callback="addBuild(ev, data)" autocomplete="off" product-search>
    	</div>
		<table class="table" style="margin-top: 10px;">
		    <thead>
                <th></th>
                <th>Stock Item</th>
                <th class="centered">Cost</th>
                <th class="centered">Quantity (1 unit)</th>
                <th class="centered">On Order</th>
                <th class="centered">In Stock</th>
                <th></th>
            </thead>
			<tbody ng-if="build.status != 'planning'">
				<tr ng-repeat="item in build.stock.composite_items">
                    <th class="text-warning ng-scope"><span ng-if="quantityOnOrder(build, item)"><i class="fa fa-clock-o"></i></span></th>
					<td ng-bind="::item.name"></td>
					<td>{[{ item.cost != 'NA' ? (item.cost | currency:"£") : 'NA' }]}</td>
					<td class="centered">{[{ item.pivot.quantity }]}</td>
					<td class="centered">
                        <span>{[{ quantityOnOrder(build, item) }]}</span>
                    </td>
                    <td class="centered">
                        <span ng-class="{'label label-danger' : item.pivot.quantity_on_order > 0 && item.quantity > 0}">{[{ item.quantity}]}</span>
                    </td>
					<td>
						<a href="#" ng-if="build.status == planning" class="pull-right" ng-click="build.stock.composite_items.splice($index, 1)" data-eat-click>Remove</a>
					</td>
				</tr>
			</tbody>
			<tbody ng-if="build.status == 'planning'">
				<tr ng-repeat="item in build.planned_components">
					<th></th>
					<td ng-bind="::item.name"></td>
					<td>{[{ item.cost != 'NA' ? (item.cost | currency:"£") : 'NA' }]}</td>
					<td class="centered"><input type="text" class="input-small" ng-model="item.pivot.quantity"></td>
					<td class="centered">0</td>
					<td class="centered">{[{ item.quantity }]}</td>
					<td><a href="#" class="pull-right" ng-click="build.planned_components.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-show="build.status == 'planning'" ng-disabled="loading"><i ng-if="loading" class="fa fa-spinner fa-spin"></i> Update</button>
    </div>
</form>