<div class="row">
	<div class="col-sm-6">
		<div class="form-inline">
			<select name="items" class="col-sm-2" ng-model="limit">
				<option value="10">10</option>
				<option value="20">20</option>
				<option value="50">50</option>
				<option value="100">100</option>
			</select>
			<label for="items">records per page</label>
		</div>
	</div>
	<div class="col-sm-6">
		<div class="input-append pull-right">
			<div searchbox="searchCallback(query)" searchbox-class="pull-right"></div>
		</div>
	</div>
</div>

	<div ng-init="types = {{ json_encode($types) }}"></div>
	<div ng-init="groups = {{ json_encode($categories) }}"></div>
	<div ng-init="suppliers = {{ json_encode($suppliers) }}"></div>

<div class="widget">
	<div class="widget-content">
		<table class="table table-middle table-hover">
			<thead>
				<th width="120">EAN</th>
				<th width="160">Name</th>
				<th>SKU</th>
				<th>Markup</th>
				<th>Business Markup</th>
				<th>Cost (exc.)</th>
				<th>VAT</th>
				<th>Total Cost</th>
				<th>Retail</th>
				<th>Profit</th>
				<th>Staff Price</th>
				<th>Quantity</th>
				<th>Buffer</th>
				<th width="70">Type</th>
				<th width="70">Category</th>
				<th width="70">Supplier</th>
				<th width="30">Disc.</th>
			</thead>
			<tbody>
				<tr ng-repeat="product in products" ng-class="{'warning': product.quantity == 0}" ng-mouseover="product.editmode = true" ng-mouseleave="product.editmode = false">
					<td>
						<input type="text" class="col-sm-12 input-hidden" ng-model="product.stock.manufacturer_code" ng-change="updateProduct(product)" />
					</td>
					<td>
						<input type="text" class="col-sm-12 input-hidden" ng-model="product.stock.name" ng-change="updateProduct(product)" />
					</td>
					<td>
						<input type="text" class="col-sm-12 input-hidden" ng-model="product.stock.sku" ng-change="updateProduct(product)" />
					</td>
					<td style="text-align: center;">
						<input type="text" class="input-micro input-hidden" ng-show="product.editmode" ng-model="product.margin" ng-change="updateProduct(product)" />
						<span ng-hide="product.editmode">{[{ (product.margin).toFixed(2) }]}%</span>
					</td>
					<td style="text-align: center;">
						<input type="text" class="input-micro input-hidden" ng-show="product.editmode" ng-model="product.business_margin" ng-change="updateProduct(product)" />
						<span ng-hide="product.editmode">{[{ (product.business_margin).toFixed(2) }]}%</span>
					</td>
					<td style="text-align: center;">
						<input type="text" class="input-micro input-hidden" ng-show="product.editmode" ng-model="product.cost" ng-change="updateProduct(product)" />
						<span ng-hide="product.editmode">{[{ product.cost | currency:"£"}]}</span>
					</td>
					<td style="text-align: center;">
						{[{ product.vat | currency:"£"}]}
					</td>
					<td style="text-align: center;">
						{[{ product.total_cost | currency:"£"}]}
					</td>
					<td style="text-align: center;">
						<input type="text" class="input-micro input-hidden" ng-show="product.editmode" ng-model="product.retail" ng-change="updateProduct(product)" />
						<span ng-hide="product.editmode">{[{ product.retail | currency:"£"}]}</span>
					</td>
					<td style="text-align: center;">
						{[{ product.profit | currency:"£"}]}
					</td>
					<td style="text-align: center;">
						{[{ product.staff_price | currency:"£"}]}
					</td>
					<td style="text-align: center;">
						<input type="text" class="input-micro input-hidden" ng-model="product.quantity" ng-change="updateProduct(product)" required />
					</td>
					<td style="text-align: center;">
						<input type="text" class="input-micro input-hidden" ng-model="product.stock.buffer" ng-change="updateProduct(product)" required />
					</td>
					<td>
						<select class="input-block-level" ng-model="product.stock.type" ng-show="product.editmode" ng-options="k as v for (k, v) in types" ng-change="updateProduct(product)" ></select>
						<span ng-hide="product.editmode">{[{ types[product.stock.type] }]}</span>
					</td>
					<td>
						<select name="group_id" class="input-block-level" ng-model="product.stock.group_id" ng-show="product.editmode" ng-change="updateProduct(product)">
							@foreach($categories as $key => $value)
								<option value="{{ $key }}">{{ $value }}</option>
							@endforeach
						</select>
						<span ng-hide="product.editmode">{[{ groups[product.stock.group_id] }]}</span>
					</td>
					<td>
						<select name="group_id" class="input-block-level" ng-model="product.supplier_id" ng-show="product.editmode" ng-change="updateProduct(product)">
							@foreach($suppliers as $key => $value)
								<option value="{{ $key }}">{{ $value }}</option>
							@endforeach
						</select>
						<span ng-hide="product.editmode">{[{ suppliers[product.supplier_id] }]}</span>
					</td>
					<td style="text-align: center;">
						<input type="checkbox" ng-model="product.stock.discontinued" ng-checked="product.stock.discontinued" value="1" ng-show="product.editmode" ng-change="updateProduct(product)" />
						<span ng-hide="product.editmode">
							<i class="fa fa-check" ng-show="product.stock.discontinued"></i>
						</span>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>


<div paginator="paginator"></div>