explore.scala.html

@(currentUser: budget.models.User)

@main("explore", currentUser){

	<div ng-controller="Explore">

		<main ng-init="viewMode = 'grid'; shownFilter = 'sector'">

			<div 
				id="project-detail" 
				class="fade" 
				ng-if="view == 'focus'"
				bi-curtain>
				<div class="curtain" ng-click="listView()">
				</div>
				<div class="container">
					<div class="ribbon" style="background-color: {{ribbons[getCategory(focus.value)].color}}">
						<i class="fa" ng-class="ribbons[getCategory(focus.value)].icon"></i>
						<span>
							{{getCategory(focus.value)}}
						</span>
						<button class="close" ng-click="listView()">
							<i class="fa fa-times"></i>
						</button>
					</div>
					<div id="detail">
						<div class="content">
							<h1>
								{{focus.value.fpapDsc}} ({{focus.value.year}})
							</h1>
							<bi-req-login>
								<star-rating item="focus.value"></star-rating>
							</bi-req-login>
							<h2>Locate</h2>
							<!--{{focus.value.clicks}} people have marked this location.-->
							<div class="map-controls">
								<button class="btn btn-primary" id="point" ng-if="loggedIn" ng-click="click.toggle()" ng-class="{active: click.active()}">
									<i class="fa fa-map-marker"></i> 
									<span ng-hide="click.active()">Specify Location</span>
									<span ng-show="click.active()">Specifying Location...</span>
								</button>
								<button class="btn btn-primary pull-right">
									This project shouldn't have a location
								</button>
							</div>

							<h3 class="map-note" ng-show="focus.value.clicks <= 0 && !click.active()">No-one has specified a location for this project yet. Be the first!</h3>
							<h3 class="map-note" ng-show="click.active()">
								Click on a point on the map to drop a pin indicating the location of this project
							</h3>
							<div 
								id="map"  
								bi-map 
								ng-show="focus.value.clicks > 0 || click.active()"></div>
							<h2>Discuss</h2>
							<div id="comment-view">
								<div class="user-comment">
									<a ng-if="!loggedIn" target="_self" href="@routes.Application.account">
										Sign up / Log in to comment!
									</a>
									<form ng-if="loggedIn" ng-submit="comments.submit()">
										<textarea placeholder="Please be civil!" ng-model="comments.input"></textarea>
										<button class="btn btn-primary" type="submit">Submit</button>
									</form>
								</div>
								<div class="comments">
									<ul ng-if="comments.current().length">
										<li ng-repeat="comment in comments.current() | orderBy:'timestamp':true ">
											<ng-include src="'/assets/templates/commentStub.html'"></ng-include>
										</li>
									</ul>
									<div ng-if="!comments.current().length" class="empty">
										<p>
											No comments yet. You can be the first!
										</p>
									</div>
								</div>
							</div>
						</div>
						<div class="sidebar">

							<h3>Department or Region</h3>
							<p>{{focus.value.dptDsc}}</p>

							<h3>Owner</h3>
							<p>{{focus.value.ownerDsc}}</p>

							<div class="financial">
								<h3>Financial</h3>
								<ul class="numeric">
									<li ng-if="focus.value.ps">
										<h5>Personnel Services</h5>
										<span class="monospace italic">{{comatose(focus.value.ps * 1000)}}</span> PhP
									</li>
									<li ng-if="focus.value.mooe">
										<h5>Maintenance and Other Operating Expenses</h5>
										<span class="monospace italic">{{comatose(focus.value.mooe * 1000)}}</span> PhP
									</li>
									<li ng-if="focus.value.co">
										<h5>Capital Outlay</h5>
										<span class="monospace italic">{{comatose(focus.value.co * 1000)}}</span> PhP
									</li>
								</ul>

								<h5>Total</h5>
								<div class="total numeric">
									<span class="monospace italic ">{{comatose(totalAmount(focus.value) * 1000)}}</span> PhP
								</div>
							</div>

							<div class="share">
								<a class="btn facebook btn-block" target="_blank" ng-href="{{share.facebook()}}">
									<i class="fa fa-facebook fa-fw"></i>
									Share on Facebook
								</a>
								<a class="btn twitter btn-block" target="_blank" ng-href="{{share.twitter()}}">
									<i class="fa fa-twitter fa-fw"></i>
									Share on Twitter
								</a>
								<a  class="btn google-id btn-block" target="_blank" ng-href="{{share.googlePlus()}}">
									<i class="fa fa-google-plus fa-fw"></i>
									Share on Google Plus
								</a>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div id="project-list">

				<section id="banner">
					<div class="container">
						<h2 class="result-label">
							Showing 
							<button 
								class="label" 
								ng-click="shownFilter = 'sector'"
								ng-class="{active: shownFilter == 'sector'}">
								{{categories.label()}} projects
							</button> 
							from 
							<button 
								class="label"
								ng-class="{active: shownFilter == 'regions'}"
								ng-click="shownFilter = 'regions'">
								{{regions.label()}}
							</button>
							for
							<button 
								class="label"
								ng-class="{active: shownFilter == 'years'}"
								ng-click="shownFilter = 'years'">
								{{years.label(years.current)}}
							</button>,
							<br>
							sorted by
							<button class="label" ng-class="{active: shownFilter == 'sorts'}" ng-click="shownFilter = 'sorts'">
								{{sort.fields[sort.field]}}
							</button>
							in 
							<button class="label" ng-click="sort.setOrder(1 - sort.order)">
								{{sort.orders[sort.order]}}
							</button>
							order
						</h2>
					</div>
				</section>

				<section id="projects" ng-class="{grid: viewMode == 'grid', list: viewMode == 'list'}">
					<div class="container">
						<div class="filter">

							<div 
								id="sector" 
								ng-show="shownFilter == 'sector'">
								<h4>
									Sector
								</h4>
								<ul>
									<li class="item" ng-repeat="cat in categories.list">
										<button 
											ng-click="categories.setCurrent(cat)"
											ng-class="{active: categories.current == cat}">
											{{cat.name}}
										</button>
									</li>
								</ul>
							</div>

							<div 
								id="regions" 
								ng-show="shownFilter == 'regions'">
								<h4>
									Regions
								</h4>
								<ul>
									<li class="item" ng-repeat="region in regions.list" >
										<button 
											ng-click="regions.setCurrent(region)"
											ng-class="{active: regions.current == region}">
											{{region.name}}
										</button>
									</li>
								</ul>
							</div>

							<div 
								id="years" 
								ng-show="shownFilter == 'years'">
								<h4>
									Years
								</h4>
								<ul>
									<li class="item" ng-repeat="year in years.list" >
										<button 
											ng-click="years.setCurrent(year)"
											ng-class="{active: years.current == year}">
											{{years.label(year)}}
										</button>
									</li>
								</ul>
							</div>

							<div 
								ng-show="shownFilter == 'sorts'">
								<h4>
									Sort
								</h4>
								<ul>
									<li class="item" ng-repeat="field in sort.fields">
										<button ng-click="sort.setField($index)" ng-class="{active: sort.field == $index}">
											{{field}}
										</button>
									</li>
								</ul>
								<!--also add 'activity'. combination of number of ratings, number of comments, and its recent-ness-->
							</div>
						</div>
						<div class="modifiers">
							<button class="reverse" ng-click="sort.setOrder(1 - sort.order)">
								<i class="fa fa-chevron-up" ng-show="sort.order == 0"></i>
								<i class="fa fa-chevron-down" ng-show="sort.order == 1"></i>
								{{sort.orders[sort.order]}}
							</button>
							
							<div class="view-mode">
								<button 
									ng-click="viewMode = 'grid'"
									ng-class="{active: viewMode == 'grid'}">
									<i class="fa fa-th fa-lg"></i>
								</button>
								<button 
									ng-click="viewMode = 'list'"
									ng-class="{active: viewMode == 'list'}">
									<i class="fa fa-align-justify fa-lg"></i>
								</button>
							</div>
						</div>
						<ul class="projects">
							<li
								class="project move"
								ng-repeat="leaf in leaves"
								ng-include="'/assets/templates/leafStub.html'">
							</li>
							<li 
								class="project show-more"
								ng-if="lastRetrieval >= 30">
								<a class="card" ng-href="{{showMoreLink()}}">Show more</a>
							</li>
							<li ng-if="!leaves.length">
								<h3 class="empty">
									No projects matched your criteria. Try changing the sectors, regions or time frame.
								</h3>
							</li>
						</ul>
					</div>
				</section>

			</div>

		</main>
	</div>
	<script src="@routes.Assets.at("leaflet/leaflet.js")"></script>
	@*<script src="@routes.Assets.at("javascripts/map-sample.js")"></script>*@
}