<div class="blurBackground" id="background">
	<div class="blurBackImg" ng-if="showBlurBG && bgReady">
		<div class="blurBackImg2" style="background-image: url('{{artistImage}}');"></div>
	</div>
</div>

<div class="main">
	<div style="height: 50px"></div>
		
	<div class="lfmInfo" id="info">
		<h1> </h1>
		<img ng-src="{{ artistImage }}" width=180 height=180>
		<h2>{{ backend | uppercase }} ALBUMS</h2>
	</div>	
		
	<div style="height:240px; width: 100%;"></div>
	
	<div class="playMenu" id="launchMenu" ng-if="pageReady">
		<div class="playMenuContainer">
			
			<a href="" ng-click="contextMenu(albums[0].album.artists[0]);">
				<div class="boxRight">
					<i class="fa fa-ellipsis-v fa-2x"></i>
				</div>
			</a>
			<a href="" ng-click="addReplacePlay(playlistUris[0], playlistUris, artist);">
				<div class="menuBox"> Play All </div>
			</a>
			<a href="" ng-click="appendTrack(playlistUris, artist);">
				<div class="menuBox"> Queue </div>
			</a>
			<!--
			<div class="menuBox"> Radio </div>
			-->
		</div>
	</div>
	
	<div class="albumList" id="list" ng-if="!pageReady">
		<br><br><br>
		<i class="fa fa-spinner fa-2x fa-pulse"></i>
	</div>	
	
	<div class="albumList" id="list" ng-if="pageReady">
		<div ng-if="albumss">		
			<div class="box3">
				<h1>ALBUMS</h1>
			</div>
			
			<div ng-repeat="album in albums | filter:{type: 'album'}">
				<div class="box">
					<a href="" ng-click="contextMenu(album.album);">
						<div class="boxRight">
							<i class="fa fa-ellipsis-v fa-2x"></i>
						</div>
					</a>
					<a href="#/album/{{ album.album.name | urlEncode }}/{{ album.album.uri | urlEncode }}">					
						<div class="boxLeft"> 
							<img ng-src="{{album.album.lfmImage}}" width=50 height=50 />
						</div>
						<div class="boxCenter"><div style="display: table; height: 56px;"><div style="display: table-cell; vertical-align: middle;">
							<h1>{{ album.album.name }}</h1>
							<h3>{{ album.album.artists[0].name }}&nbsp;&nbsp;{{album.album.date}}</h3>
						</div></div></div>
					</a>
				</div>
			</div>
		</div>
		
		<div ng-if="singles">
			<div class="box3">
				<h1>SINGLES</h1>
			</div>
			<div ng-repeat="album in albums | filter:{type: 'single'}">
				<div class="box">
					<a href="" ng-click="contextMenu(album.album);">
						<div class="boxRight">
							<i class="fa fa-ellipsis-v fa-2x"></i>
						</div>
					</a>
					<a href="#/album/{{ album.album.name | urlEncode }}/{{ album.album.uri | urlEncode }}">					
						<div class="boxLeft"> 
							<img ng-src="{{album.album.lfmImage}}" width=50 height=50 />
						</div>
						<div class="boxCenter"><div style="display: table; height: 56px;"><div style="display: table-cell; vertical-align: middle;">
							<h1>{{ album.album.name }}</h1>
							<h3>{{ album.album.artists[0].name }}&nbsp;&nbsp;{{album.album.date}}</h3>
						</div></div></div>
					</a>
				</div>
			</div>
		</div>
		
		<div ng-if="appearson">
			<div class="box3">
				<h1>APPEARS ON</h1>
			</div>
			<div ng-repeat="album in albums | filter:{type: 'appearson'}">
				<div class="box">
					<a href="" ng-click="contextMenu(album.album);">
						<div class="boxRight">
							<i class="fa fa-ellipsis-v fa-2x"></i>
						</div>
					</a>
					<a href="#/album/{{ album.album.name | urlEncode }}/{{ album.album.uri | urlEncode }}">					
						<div class="boxLeft"> 
							<img ng-src="{{album.album.lfmImage}}" width=50 height=50 />
						</div>
						<div class="boxCenter"><div style="display: table; height: 56px;"><div style="display: table-cell; vertical-align: middle;">
							<h1>{{ album.album.name }}</h1>
							<h3>{{ album.album.artists[0].name }}&nbsp;&nbsp;{{album.album.date}}</h3>
						</div></div></div>
					</a>
				</div>
			</div>
		</div>
		
		<br><br><br><br>
	</div>	
	
</div>
