<html ng-app="worldbank">
<head>
	<title>
	</title>
	<script type="text/javascript" src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js'></script>
	<script type="text/javascript" src="/js/app.js"></script>	
</head>

<body ng-controller="mainController as ctrl">

	<h1>World Bank Loan Records Finder</h1>
	<p>number of records: {{ ctrl.numberOfRecords }}</p>
	<input type="text" ng-model="recordNum" placeholder="single record #"/>
	<button ng-click="ctrl.getOne(recordNum - 1)">Get</button>

	<div ng-hide="ctrl.showWhich">
		<h3>{{ ctrl.countryname }}</h3>
		<h4>{{ ctrl.projectname }}</h4>
		<p>{{ ctrl.projectabstract }}</p>
		<h4 ng-show="ctrl.total !== undefined">Total loan: {{ ctrl.total }}</h4>
	</div>

	<div ng-show="ctrl.showWhich">
		<div ng-repeat="info in ctrl.infoList">
			<h3>{{ info.countryname }}</h3>
			<h4>{{ info.projectname }}</h4>
			<p>{{ info.projectabstract }}</p>
			<h4>Total loan: {{ info.total }}</h4>
			<br/>
		</div>
	</div>


	</br></br>
	<div>
		Records by region:
		<input type="text" ng-model="searchBox" placeholder="search">
		<ul>
			<a href="#" ng-repeat="country in ctrl.countryList.sort() | filter:searchBox" ng-click="ctrl.getByRegion(country)"> {{ country }}</br></a>
		</ul>
	</div>

</body>

</html>