<template name="controlpanel">
    <section id="controlpanel">
	{{#if Template.subscriptionsReady}}
    {{#with currentSong}}
    <div id="transparentBackground">
    <div class="container flexWrapper">
    
		<!-- Thumbnail display -->
		<div id="ThumbnailDisplay">
			<img src="{{getThumbnail}}" alt="{{title}} Thumbnail" id="thumbnail">
		</div>

		<!-- info + controlling -->
		<div id="InfoControl">
			<div id="currentSongTitle"><a href="{{url}}" target="_blank">{{title}}</a></div>

			<div id="buttonBar">
				<i id="volumeButton" class="cpIcon mdi {{volumeIcon}}"></i>
				<i id="playpause" class="cpIcon mdi {{playPauseIcon}}"></i>
				<i id="skip" class="cpIcon mdi mdi-skip-next-circle-outline"></i>
			</div>

			<div id="timeSlider"></div>
			
			<p id="timeDisplay"><span id="currentPos">{{currentPosition}}</span> / {{durationDisplay}}</p>
		</div>

		{{bla}}
	</div>
	</div>
	{{/with}}
	{{/if}}
    </section>
</template>