doctype html
html
	head
		title="EntroSpect"

		//dependent css
		link(rel='stylesheet', href='/stylesheets/style.css')
		link(rel='stylesheet', href='/stylesheets/jquery-ui.min.css')
		link(rel='stylesheet', href='/stylesheets/jquery-ui.structure.min.css')
		link(rel='stylesheet', href='/stylesheets/jquery-ui.theme.min.css')
		link(rel='stylesheet', href='/stylesheets/metro-bootstrap.min.css')
		link(rel='stylesheet', href='/stylesheets/metro-bootstrap-responsive.min.css')
		link(rel='stylesheet', href='/stylesheets/iconFont.min.css')
		link(rel='stylesheet', href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css')

		//dependent scripts
		script(type='text/JavaScript', src='/scripts/underscore.min.js')
		script(type='text/JavaScript', src='/scripts/jquery-2.1.1.min.js')
		script(type='text/JavaScript', src='/scripts/jquery-ui.min.js')
		script(type='text/JavaScript', src='/scripts/metro.min.js')
		script(type='text/JavaScript', src='/scripts/angular.min.js')
		script(type='text/JavaScript', src='/scripts/angular-route.min.js')

		//bootstrap application
		script(type='text/JavaScript', src='/scripts/app.js')
		script(type='text/JavaScript', src='/scripts/config.js')
		script(type='text/JavaScript', src='/scripts/routes.js')

		//set customers queried from the API
		script(type="text/JavaScript") var customers = !{JSON.stringify(customers)};

		//app scripts
		script(type='text/JavaScript', src='/scripts/controllers/PurchaseOrdersCtrl.js')
		script(type='text/JavaScript', src='/scripts/controllers/OrderDetailsCtrl.js')
		script(type='text/JavaScript', src='/scripts/controllers/LineItemCtrl.js')

	body(id="body")
		div(id="container" class="metro" ng-app="Application")
			div(class="grid")
				div(id="header" class="row bg-darkTeal")
					include ./templates/header.jade
				div(id="content" class="row")
					div(class="container span12")
						div(class="grid")
							div(class="row")
								include ./templates/purchaseOrders.jade
								include ./templates/orderDetails.jade