<!-- HEADER -->
<div class="row navbar-fixed-top fixed-header">
	<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">	
		<div class="header row">			
			<div class="nav" >
				<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2" id="back-home">
					<a href="javascript:void(0);" ng-click="go('/home', 'none')">
						<img class="img-responsive" src="img/back_chevron.png"/>
					</a>
				</div>
				<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8"><h4 class="center" ng-controller="WatuuListController" ng-bind-html="category">
					
				</h4></div>
				<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
					
				</div>
			</div>
		</div>				
	</div>
</div>
<div class="watuu-container row padding-for-fixed-header" infinite-scroll="search(search_term)" infinite-scroll-distance="2" infinite-scroll-disabled="false" infinite-scroll-immediate-check="false" style="min-height: {{screen_height}}px;">

	<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
		<div class="container-results without-padding">
			<a ng-if="!no_watuus" ng-repeat="watuu in watuus" class="show-watuu" href="javascript:void(0);" id="{{watuu.guid}}" ng-click="details(watuu)">							
				<div class="row watuu-section">
					<div class='watuu-picture col-lg-2 col-md-2 col-sm-2 col-xs-3'>
						<div class='watuu-image-wrapper'>
							<img class='center watuu-image img-responsive' src='{{img_path}}/imagefile.php?sku={{watuu.guid}}&thumbsize=200' />	
						</div>
					</div>                              
					<div class='watuu-info col-lg-10 col-md-10 col-sm-10 col-xs-9'>
						<div class='watuu-title'>{{watuu.title}}</div>
						<div class='watuu-artist'>{{watuu.artist}}</div>
						<div id="" class='watuu-lyrics'>{{watuu.lyrics | limitTo:70}}</div>
					</div>			
				</div>
				<hr/>				
			</a>
			<h4 class="center" ng-if="no_watuus && !no_favorites">Sorry, there are no Watuus for "{{category}}"</h4>
			<div ng-if="no_watuus && no_favorites">
				<div class="no-favorites">
					<div class="no_favorites_heart"><img src="img/no_favorites_heart.png" alt="No Favorites"/></div>
					<h4 translate>You do not have any favorites yet</h4>
					<p><span translate>Just Click on the heart icon</span><br/>
					<span translate>on the Watuu bar</span></p>
					<div class="no_favorites_how"><img src="img/no_favorites_how.png" alt="How to add favorites"/></div>
				</div>
			</div>
			<h5 class="center" ng-if="did_you_mean != ''">Did you mean <a href="javascript:void(0);" ng-click="refresh(did_you_mean)">"{{did_you_mean}}"</a></h5>
			<div class='clearfix'></div>
		</div>	 
	</div>

</div>
<!-- Initialize details Dialog -->	
<div class="modal fade" id="details-dialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="max-width: 400px;">
    	<div class="modal-content">
        		<div class="player-wrapper">
			        <div class="panel popup panel-default">
			            
		            	<div class="row">
		            		<div class='col-lg-12'>
		            			<div class="panel-header">
		                			<img class="img-responsive logo-popup" src="img/logo.png" alt="Watuu Logo"/>
		                		</div>
		                		<div class="close-popup">
		                			<a id="close-link" href="javascript:void(0);" data-dismiss="modal" class="glyphicon glyphicon-remove">
		                				<img class="img-responsive logo-popup" src="img/close.png" alt="Close dialog"/>
		                			</a>	
		                		</div>
		                	</div>	
		            	</div>
			            <div class="panel-body">
			                <div class="watuu-image-wrapper">
								<img src="{{img_path}}/imagefile.php?sku={{current_watuu.guid}}&thumbsize=200" id="album-image" class="center watuu-image img-responsive" alt="Responsive image">
								<div class="reflection">
									<img src="{{img_path}}/imagefile.php?sku={{current_watuu.guid}}&thumbsize=200" id="album-image" class="center watuu-image img-responsive" alt="Responsive image">
								</div>
									<div class="player-btn-wrapper">											
										<audio id="watuu-ff-player" type="audio/ogg" src="{{current_mp3}}" audio-events ></audio>
										<div class="controls mejs-play">
											<button title="Play/Pause" type="button" ng-click="playPause($event)"></button>
										</div>						
				                    </div>    	
							</div>
							<div class="watuu-title-dialog center">{{current_watuu.title}}</div>
							<div class="watuu-author-dialog">{{current_watuu.artist}}</div>
							<div id="watuu-lyrics" class="watuu-lyrics">{{current_watuu.lyrics}}</div>
			            </div>
			            
			            <!-- PANEL FOOTER -->
						<div class="panel-footer">
			
							<input type="hidden" id="current-guid" value="" />
			                <div class="wplayer-action-wrapper">
			                
			                <div class="wplayer-action without-margin">
			                	<a target="_blank" href="http://us.7digital.com/search?q={{current_watuu.title}}&src=live-search">
			                		<img class="img-responsive" src="img/itunes_logo.png" alt="Download Song From iTunes"/>
			                	</a>
			                </div>
			                
			                <div class="wplayer-action without-margin-right">
			                	<a class="like-action like-off" href="javascript:void(0);" ng-click="handleLike()"></a>
			                </div>
			                <div class="wplayer-action without-margin-right">
			                	<a class="favorite-action favorite-off" href="javascript:void(0);" ng-click="handleFavorite()"></a>
			                </div>
			                <div class="wplayer-action without-margin-right">
			                	<!--a href="<?php  echo $this->url('watuu', array('action' => 'send', 'id' => $guid)) ?>"-->
			                	<!--a id="send-action"-->
			                	
			                	<div id="container-send-options">
			                		<a href="javascript:void(0);" ng-click="share()"><img class="img-responsive" src="img/send{{locale}}.png" alt="Share a Watuu"/></a>         	
				  				</div>
			                </div>
			            </div>
			
			            </div>
			        </div>
			    </div>
        	
      	</div>
    </div>
</div>