@section('header')
	@include('common.header')
	
@stop

@section('js')
	@parent

	<script src="{{ asset('js/typeahead.min.js') }}"></script>
@stop

@section('content')
	<div id="stock_page" class="row" ng-controller="StockMainCtrl" ng-cloak>
		<!-- Loading indicator while AngularJS initializes -->
		<div ng-show="!$root.angular_ready" class="text-center" style="padding: 50px;">
			<i class="fa fa-spinner fa-spin fa-2x"></i>
			<h4 style="margin-top: 20px; color: #666;">Loading Stock...</h4>
		</div>

		<div ng-show="$root.angular_ready" class="col-sm-2">
			<ul class="nav nav-pills nav-stacked">
				<li class="nav-header">Actions</li>
				<li page-highlighter="/stock/" exact-match="true"><a href="#stock"><i class="fa-fw fa fa-tachometer"></i> Overview</a></li>
				<li page-highlighter="/stock/order_list"><a href="#stock/order_list"><i class="fa-fw fa fa-shopping-cart"></i> Products to order</a></li>
				<li page-highlighter="/stock/categories"><a href="#stock/categories"><i class="fa-fw fa fa-tags"></i> Categories</a></li>
				<li page-highlighter="/stock/suppliers"><a href="#stock/suppliers"><i class="fa-fw fa fa-truck"></i> Suppliers</a></li>
				<li page-highlighter="/stock/orders"><a href="#stock/orders"><i class="fa fa-fw fa-shopping-cart"></i> Purchase Orders</a></li>
				<li page-highlighter="/stock/parts_on_order"><a href="#stock/parts_on_order"><i class="fa-fw fa fa-clock-o"></i> Jobs waiting for parts</a></li>
				<li page-highlighter="/stock/staff_allocated"><a href="#stock/staff_allocated"><i class="fa-fw fa fa-users"></i> Staff Allocated</a></li>
				<li page-highlighter="/stock/stock_takes"><a href="#stock/stock_takes"><i class="fa-fw fa fa-list-alt"></i> Stock Takes</a></li>
				<li page-highlighter="/stock/stock_reports"><a href="#stock/stock_reports"><i class="fa-fw fa fa-exclamation-triangle"></i> Stock Reports</a></li>
			</ul>
		</div>

		{{-- Dynamically load content here --}}
		<div ng-show="$root.angular_ready" class="col-sm-10">
			<!-- Show loading spinner when Angular is ready but data is loading -->
			<div ng-show="loading" class="text-center" style="padding: 50px;">
				<i class="fa fa-spinner fa-spin fa-2x"></i>
				<h4 style="margin-top: 20px; color: #666;">Loading stock data...</h4>
			</div>
			<div ng-view></div>
		</div>

		{{-- Include the content pages here --}}
		<script type="text/ng-template" id="stock/overview.html">
			@include('stock::overview')
		</script>
		<script type="text/ng-template" id="stock/new.html">
			@include('stock::new')
		</script>
		<script type="text/ng-template" id="stock/browse.html">
			@include('stock::browse')
		</script>
		<script type="text/ng-template" id="stock/categories.html">
			@include('stock::categories')
		</script>
		<script type="text/ng-template" id="stock/suppliers.html">
			@include('stock::suppliers')
		</script>
		<script type="text/ng-template" id="stock/orders.html">
			@include('stock::orders')
		</script>
		<script type="text/ng-template" id="stock/parts_on_order.html">
			@include('stock::parts_on_order')
		</script>
		<script type="text/ng-template" id="stock/new_order.html">
			@include('stock::new_order')
		</script>
		<script type="text/ng-template" id="stock/stock-form.html">
			@include('stock::forms.stock')
		</script>
		<script type="text/ng-template" id="stock/staff_allocated.html">
			@include('stock::staff_allocated')
		</script>
		<script type="text/ng-template" id="stock/stock_takes.html">
			@include('stock::stock_takes')
		</script>
		<script type="text/ng-template" id="stock/stock_reports.html">
			@include('stock::stock_reports')
		</script>
		<script type="text/ng-template" id="stock/order_list.html">
			@include('stock::order_list')
		</script>

	</div>
@stop