<div id="trip-wrapper">
	
	<div class="side-menu-button"><i class="fa fa-bars"></i></div>

	<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>

			<div id="areas-scroll-wrap">
			<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-options options-hidden-right">
							<div class="area-edit right-option"><span>EDIT</span></div>
							<div class="area-delete right-option"><span>DELETE</span></div>
							<div class="delete-confirm-group">
								<div class="area-delete-confirm right-option"><span>CONFIRM</span></div>
								<div class="area-delete-cancel right-option"><span>CANCEL</span></div>
							</div>
						</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="area-options options-hidden-right">
											<div class="place-edit right-option"><span>EDIT</span></div>
											<div class="place-delete right-option"><span>DELETE</span></div>
											<div class="delete-confirm-group">
												<div class="place-delete-confirm right-option"><span>CONFIRM</span></div>
												<div class="place-delete-cancel right-option"><span>CANCEL</span></div>
											</div>
										</div>
									</li>
								</div>
							</ul>
						</div>
					</ul>
				</div>
			</ul>
			</div> <!-- END #areas-scroll-wrap -->
		</div>
	</div>

	<div class="trip-map-wrapper">
		<div id="map" class="map-wrapper"></div>
	</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 place-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>
