<html ng-app="date">
<head>
	<title>Dating site</title>
	<link href='https://fonts.googleapis.com/css?family=Love+Ya+Like+A+Sister' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" type="text/css" href="style.css">
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
	<script type="text/javascript" src="app.js"></script>
</head>

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

<div id="container">

	<div id="header">
		<img src="https://upload.wikimedia.org/wikipedia/commons/8/88/Notifications-Thanks-Heart-Icon.png">
		<span id="header-text" ng-click="ctrl.getUsers()">I LOVE TO DATE OTHERS</span>
		<img src="https://upload.wikimedia.org/wikipedia/commons/8/88/Notifications-Thanks-Heart-Icon.png">
	</div>

	<br/><br/>

	<div id="users-left">
		<div ng-repeat="user in ctrl.usersOdd | limitTo:3">
			<div class="left-pic" ng-mouseover="ctrl.displayImageL(user.img)">
				<img ng-src="{{ user.img }}"/>
			</div>
			<div class="right-info">
				<p class="username">{{ user.name }}</p>
				<p>Age: {{ user.age }}</p>
				<p ng-if="user.gender=='f'">Female</p>
				<p ng-if="user.gender=='m'">Male</p>
			</div>
		</div>
	</div>


	<div id="match">
		<img class="center-img" ng-src="{{ ctrl.limage }}">
		<img class="center-img" ng-src="{{ ctrl.rimage }}">

		<div ng-if="ctrl.left && ctrl.right">
			<div id="match-button" ng-click="ctrl.match()">CLICK TO MATCH!</div>
		</div>
	</div>

	<div id="users-right">
		<div ng-repeat="user in ctrl.usersEven | limitTo:3">
			<div class="left-pic" ng-mouseover="ctrl.displayImageR(user.img)">
				<img ng-src="{{ user.img }}"/>
			</div>
			<div class="right-info">
				<p class="username">{{ user.name }}</p>
				<p>Age: {{ user.age }}</p>
				<p ng-if="user.gender=='f'">Female</p>
				<p ng-if="user.gender=='m'">Male</p>
			</div>
		</div>
	</div>

	<div id="newform">
		<p id="formtitle">ADD A DATER</p>
			<form ng-submit="ctrl.processForm()">
				<input type="text" ng-model="ctrl.formdata.name" placeholder="name">
				<input type="text" ng-model="ctrl.formdata.age"placeholder="age">
				<input type="text" ng-model="ctrl.formdata.gender"placeholder="gender">
				<input type="text" ng-model="ctrl.formdata.img"placeholder="img">
				<input type="submit">
			</form>
		</p>
	</div>

</div>

</body>

</html>