<!-- get the header and footer in here -->
<ng-include src="'views/partials/panel.html'"></ng-include>

<div ng-animate id="shopping-page">
<div class="container-fluid">
	<!-- div for empty list message -->
	<div class="row foodtip" ng-show="checkShopping.length == 0">
		<h2 class="col-xs-12">Fun Food Fact</h2>
		<p class="col-xs-12">{{pls}}</p>
	</div>


	<!--First section for items in list -->
	<div class="row no-gutter">
		<div class="container-fluid">
			<!--an individal item, whole thing repeated for each item added -->
			<ul id="shopping-list" class="row">
				<li ng-repeat="item in uncheckedItems" class="row">

					<div class="col-xs-2 emptycb itemrow">
						<!-- checkbox -->
						<input type="image" src="images/icons/unchecked.png" class="checkbox" onclick="this.src = 'images/icons/checked.png'" ng-click="toggleCheck(item, true)"/>
					</div>
					<div class="col-xs-8 itemrow">
						<!-- item name injected here-->
						<p class="shopping-item">{{item.name}} <input ng-model="qty" ng-change="setQty(item, qty)" type="number" placeholder="{{item.quantity}}" class="qty"/></p>
						<!-- Waste bar -->
						<div ng-show="item.average != null" class="col-xs-12 colourbar" ng-style="getBackColor(item.average)">
							<div class="innerbar" ng-style="getBarColor(item.average)">
							</div>
							<p>{{item.average | number: 0}}%</p>
						</div>
					</div>
					<div class="col-xs-2 garbage itemrow">
						<!-- delete button-->
						<input type="image" src="images/icons/trash.png" class="trashcan" ng-click="deleteItem(item)"/>
					</div>
				</li>

			</ul>
			<!-- individual item ends here -->
		</div>

	</div>


	<!--Second section for the clear list button -->
  	<div class="row clearlist" ng-click="confirmModal()" ng-show="checkShopping.length != 0">
		<!-- <input type="image" src="images/icons/archive.png" class="icon clearicon" /> -->
	    <p class="archiveText">Clear List</p>

	</div>


	<!--Third section for the items purchased -->
	<div class="row">
		<div class="container-fluid">
			<!--an individal item, whole thing repeated for each item added -->
			<ul id="clear-list" class="row">
				<li ng-repeat="item in checkedItems" class="row no-gutter">
					<div class="col-xs-2 fullcb itemrow">
						<!-- checkbox -->
						<img src="images/icons/checked.png" alt="checkbox" class="checkbox" ng-click="toggleCheck(item, false)">
					</div>
					<div class="col-xs-8 itemrow">
						<!-- item name injected here-->
						<p class="shopping-item checked-item">{{item.name}}</p>
						<!-- Waste bar -->
						<div ng-show="item.average != null" class="col-xs-12 colourbar" ng-style="getBackColor(item.average)">
							<div class="innerbar"  ng-style="getBarColor(item.average)">
							</div>
							<p>{{item.average | number: 0}}%</p>
						</div>
					</div>
					<div class="col-xs-2 itemrow"></div>
				</li>
			</ul>
			<!-- individual item ends here -->
		</div>
	</div>


	<!--Fourth section for adding new items -->
	<div class="row no-gutter addrow-row" style="margin-bottom: {{inputHeight}}">
		<form>
			<div class="col-xs-8">
				<input id="addItemInput" ng-model="newItemName" type="text" name="item" maxlength="16" placeholder="Enter an item" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Enter an item'" ng-focus="navDisplay = 'none'; inputHeight = '-20vw'" ng-blur="navDisplay = 'block'; inputHeight = '0'" class="addbar">
			</div>
			<div class="col-xs-4 button-to-right">
				<button class="add-item-button" ng-click="addItem(newItemName)" onfocus="document.getElementById('addItemInput').focus(); return false;">Add</button>
			</div>
		</form>
	</div>
</div>


<!-- Input area background -->
<div class="input-bg" style="margin-bottom: {{inputHeight}}"></div>
</div>