<div class="main">
	<div style="height: 60px"></div>
	
	<div ng-if="!pageReady">
		<br><br><br>
		<i class="fa fa-spinner fa-2x fa-pulse"></i>
	</div>
	
	<div ng-if="pageReady && showPage === 'home'">
		
		<div class="box">
			<a href="#/browse/favourites">						
				<div class="boxLeftIcon"> 
					<i class="fa fa-heart-o fa-2x" ></i>
				</div>
				<div class="boxCenter"><div style="display: table; height: 56px;"><div style="display: table-cell; vertical-align: middle; ">
					<h1> Favourites </h1>
				</div></div></div>
			</a>
		</div>	
		
		<div class="box">
			<a href="#/playlists">						
				<div class="boxLeftIcon"> 
					<i class="fa fa-star-o fa-2x" ></i>
				</div>
				<div class="boxCenter"><div style="display: table; height: 56px;"><div style="display: table-cell; vertical-align: middle; ">
					<h1> Playlists </h1>
				</div></div></div>
			</a>
		</div>	
		
		<div ng-repeat="libItem in libList">
			
			<div class="box" ng-if="libItem.type != 'track'">
				<a href="" ng-click="getUrl(libItem.type, libItem.uri, libItem.name)">
					<div class="boxLeftIcon"> 
						<i class="{{ libItem.icon }}"></i>
					</div>				
					<div class="boxCenter"><div style="display: table; height: 56px;"><div style="display: table-cell; vertical-align: middle;">
						<h1>{{ libItem.name }}</h1>
					</div></div></div>
				</a>
			</div>

		</div>
	
		<div ng-if="recentList">
			<div class="box3">
				<h1>RECENTLY PLAYED</h1>
			</div>
		
			<div ng-repeat="recent in recentList">
				<div class="box" ng-if="libItem.type != 'track'">
					<a href="" ng-click="contextMenu(recent.context);">
						<div class="boxRight">
							<i class="fa fa-ellipsis-v fa-2x"></i>
						</div>
					</a>
					<a href="{{ recent.uri }}">
						<div class="boxLeft"> 
							<img ng-src="{{recent.lfmImage}}" width=50 height=50 />
						</div>	
						<div class="boxCenter"><div style="display: table; height: 56px;"><div style="display: table-cell; vertical-align: middle;">
							<h1>{{ recent.line1 }}</h1>
							<h3>{{ recent.line2 }}</h3>
						</div></div></div>
					</a>
				</div>
			</div>
		</div>
		
		<br><br><br>
		
	</div>
	
	<div ng-if="pageReady && showPage === 'list'">
				
		<div class="box3" style="text-align: right;">
			<br>
			<i class="fa fa-filter"></i>
			<input type="search" ng-model="q" placeholder="filter" aria-label="filter" />
		</div>
		
		<div ng-repeat="libItem in libList | filter:{name:q} as results">
			
			<div class="box" ng-if="libItem.type != 'track'">
				<a href="" ng-click="getUrl(libItem.type, libItem.uri, libItem.name)">				
					<div class="boxCenter"><div style="display: table; height: 56px;"><div style="display: table-cell; vertical-align: middle;">
						<h1>{{ libItem.name }}</h1>
						<h3>{{ libItem.type }}</h3>
					</div></div></div>
				</a>
			</div>
			
			<div class="box" ng-if="libItem.type === 'track'">
				<a href="" ng-click="contextMenu(libItem);">
					<div class="boxRight">
						<i class="fa fa-ellipsis-v fa-2x"></i>
					</div>
				</a>
				<a href="" ng-click="addReplacePlay( libItem, libTlList )">				
					<div class="boxCenter" ng-if="libItem.uri != currentUri"><div style="display: table; height: 56px;"><div style="display: table-cell; vertical-align: middle;">
						<h1>{{ libItem.name }}</h1>
						<h3>{{ libItem.type }}</h3>
					</div></div></div>
					<div class="boxCenter2" ng-if="libItem.uri === currentUri"><div style="display: table; height: 56px;"><div style="display: table-cell; vertical-align: middle;">
						<h1>{{ libItem.name }}</h1>
						<h3>{{ libItem.type }}</h3>
					</div></div></div>
				</a>
			</div>							
				
		</div>
	
		<br><br><br>
		
	</div>
	
	<div ng-if="pageReady && showPage === 'favs'">
		<div class="box3" style="text-align: right;">
			<br>
			<i class="fa fa-filter"></i>
			<select ng-model="q2">
				<option value="">					View All</option>
				<option value="artist">		Artists</option>
				<option value="album">		Albums</option>
				<option value="track">		Tracks</option>
				<option value="playlist">	Playlists</option>
				<option value="stream">		Streams</option>
			</select>
		</div>
	
		<div ng-repeat="fav in favList | filter:{line2:q2} as results ">

			<div class="box" ng-if="libItem.type != 'track'">
				<a href="" ng-click="contextMenu(fav.context);">
					<div class="boxRight">
						<i class="fa fa-ellipsis-v fa-2x"></i>
					</div>
				</a>
				<a href="{{ fav.uri }}">
					<div class="boxLeft"> 
						<img ng-src="{{fav.lfmImage}}" width=50 height=50 />
					</div>	
					<div class="boxCenter"><div style="display: table; height: 56px;"><div style="display: table-cell; vertical-align: middle;">
						<h1>{{ fav.line1 }}</h1>
						<h3>{{ fav.line2 }}</h3>
					</div></div></div>
				</a>
			</div>

		</div>
		<br><br><br>

	</div>
	
	
	
</div>