<!DOCTYPE html>
<html ng-app>

<head>
<title>TRIP [ANGULAR PROTOTYPE]</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link href="libs/css/bootstrap.min.css" rel="stylesheet" />
<link href="libs/css/font-awesome.min.css" rel="stylesheet" />
<link href="libs/css/jquery.jscrollpane.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBKSqLgIU0VC9ovcTwfQdTWpCbFSzrnOb4&sensor=false"></script>
</head>

<body ng-controller="AppController">

<div class="wrapper">

	<div class="side-menu">
		
		<header>
			<h1 class="yellow no-right"><span class="fade">MY</span><b>TRIP</b></h1>
			<span class="icon-menu yellow"><i class="fa fa-bars"></i></span>
		</header>


		<div id="trip-menu">

			<div class="trip-header" data-trip-id={{trip.id}} data-trip-base-geolat={{trip.base_location.geolat}} data-trip-base-geolng={{trip.base_location.geolng}} data-trip-base-zoom={{trip.base_zoom}}>
				<h1>{{trip.name}}</h1>
				<span class="icon-trip-settings"><i class="fa fa-cog"></i></span>
			</div>

			<div class="trip-options">
				<ul class="options menu-3 menu-thick">
					<li id="trip-option-add" data-menu="menu-add">Add</li>
					<li id="trip-option-edit" data-menu="menu-edit">Edit</li>
					<li id="trip-option-filter" data-menu="menu-filter">Filter</li>
				</ul>
				<ul class="trip-option menu-add">
					<li id="trip-menu-add-new-area">Add New Area</li>
					<li id="trip-menu-add-new-place">Add New Place</li>
				</ul>
			</div>

			<ul class="area">
				<div class="area-wrapper" ng-repeat="area in trip.areas">
					<li class="area-header" data-area-name={{area.name}} data-area-id={{area.id}}>
						<span class="icon-wrap-toggle icon-toggle-open"></span>
						<h3 class="yellow">{{area.name}}</h3>
						<span class="area-date">{{area.additional}}</span>
						<div class="area-edit button-hidden-right button-yellow"><span>EDIT</span></div>
					</li>

					<ul class="type">
						<div ng-repeat="type in area.types">
							<li class="type-header" ng-show="type.places" data-type-name={{type.name}} data-type-id={{type.id}}>
								<span class="icon-wrap-toggle icon-toggle-open toggle-grey"></span>
								<h3 class="grey">{{type.name}}<span class="type-count">{{type.places.length}}<ng-pluralize count="type.places.length" when="{'1': ' Place', 'other': ' Places'}"></ng-pluralize></span></h3>
							</li>
			
							<ul class="place">
								<div ng-repeat="place in type.places">
									<li class="place-header" data-place-name={{place.name}} data-place-id={{place.id}} data-place-geolat={{place.location.geolat}} data-place-geolng={{place.location.geolng}}>
										<h2>{{place.name}}</h2>
										<div class="place-edit button-hidden-right button-black"><span>EDIT</span></div>
									</li>
								</div>
							</ul>
						</div>
					</ul>
				</div>
			</ul>
		</div>
	</div>


	<div id="place-entry" class="side-info" ng-controller="PlaceEntry" ng-show="place">

		<header class="header-std header-yellow">
			<h1 class="black no-right">{{place.name}}</h1>
			<span class="icon-info-close"><i class="fa fa-times-circle" title="close"></i></span>
			<span class="icon-info-min-max"><i class="fa fa-chevron-circle-down"></i></span>
		</header>

		<main>
			<p>{{place.notes}}</p>	

			<ul class="link">
				<a href={{link.address}} ng-repeat="link in place.links">
					<li>
						<span class="link-text">{{link.name}}</span>
						<span class="icon-link"><i class="fa fa-external-link-square yellow"></i></span>
					</li>
				</a>
			</ul>
	
			<ul class="attachment">
				<a href={{attachment.address}} ng-repeat="attachment in place.attachments">
					<li>
						<span class="attachment-text">{{attachment.name}}</span>
						<span class="icon-attachment"><i class="fa fa-paperclip yellow"></i></span>
					</li>
				</a>
			</ul>
	
		</main>

	</div>

	<div id="add-new-area" class="create area form" ng-controller="AddArea">
		<header class="header-std header-black"><h1 class="yellow no-right">Add New Area</h1></header>
		<main ng-include="'templates/form-area.html'"></main>
	</div>

	<div id="edit-area" class="edit area form" ng-controller="EditArea">
		<header class="header-std header-black"><h1 class="yellow no-right">Edit {{ area.name }}</h1></header>
		<main ng-include="'templates/form-area.html'"></main>
	</div>

	<div id="add-new-place" class="create place form" ng-controller="AddPlace">
		<header class="header-std header-black"><h1 class="yellow no-right">Add New Place</h1></header>
		<main ng-include="'templates/form-place.html'"></main>
	</div>

	<div id="edit-place" class="edit place form" ng-controller="EditPlace">
		<header class="header-std header-black"><h1 class="yellow no-right">Edit</h1></header>
		<main ng-include="'templates/form-place.html'"></main>
	</div>



	<div id="map" class="map-wrapper"></div>

</div>	

<script src="libs/js/jquery-1.10.2.min.js"></script>
<script src="js/core-google-maps.js"></script>
<script src="js/trip.js"></script>
<script src="js/core.js"></script>


</body>

</html>