<!DOCTYPE html>
<html>
<head>
	<title>BeatHaven</title>
	<link rel="icon" href="/favicon.ico" type="image/x-icon">
	<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
	<%= stylesheet_link_tag :all %>
	<%= javascript_include_tag :all %>
	<%= csrf_meta_tag %>
</head>
<body>
	<div id="contents">
		<div class="inner-1">
			<% if @hide_player.nil? -%>
			<div id="player">
				<audio autoplay preload></audio>
				<div class="prev" title="Play Previous Track"><img src="/images/player/prev.svg" alt="prv" /></div>
				<div class="play" title="Play"><img src="/images/player/play.svg" alt="ply" /></div>
				<div class="pause" title="Pause" style="display:none"><img src="/images/player/pause.svg" alt="pause" /></div>
				<div class="next" title="Play Next Track"><img src="/images/player/next.svg" alt="pse" /></div>
				<div class="time-played">0:00</div>
				<div class="progress">
					<div class="track-title">No track</div>
					<div class="progress-bar">
						<div class="progress-loaded">
							<div title="Drag It Now!" class="progress-point"></div>
						</div>
					</div>
				</div>
				<div class="time-left">0:00</div>
				<div title="Play Tracks In Random Order" class="shuffle"><img src="/images/player/shuffle.svg" alt="shu" /></div>
				<div title="Repeat Playlist" class="repeat"><img src="/images/player/shuffle.svg" alt="rep" /></div>
				<div title="Show/Hide Playlist" class="playlist">
					<img src="/images/player/playlist.svg" alt="pls" />
					<div class="count">0</div>
				</div>
			</div>
			<div id="playlist">
				<ul class="list"></ul>
			</div>
			<%- end %>
			<%= yield %>
		</div>
	</div>
</body>
</html>