<div id="audio">
	<div class="controls">
		<i title="Backward" class="fa fa-backward{{if isFirst ' disabled'}}" {{action 'backward'}}>Backward</i>
		{{#if playing}}
		<i title="Pause" class="fa fa-pause" {{action 'play'}}>Play</i>
		{{else}}
		<i title="Play" class="fa fa-play" {{action 'play'}}>Play</i>
		{{/if}}
		<i title="Forward" class="fa fa-forward{{if isLast ' disabled'}}" {{action 'forward'}}>Forward</i>
	</div>
	<div class="progress">
		<span class="head">{{to-minutes head}}</span>
		<span class="bar"><span class="value"></span></span>
		<span class="remaining">- {{to-minutes remaining}}</span>
	</div>
	<div class="meta">
		<p>
			<span title="{{ item.title }}" class="title">{{ item.title }}</span>
			{{doc-language class="language" url=item.language}}
		</p>
		<p>
			<span title="{{author item.publishers}}" class="author">{{author item.publishers}}</span>
			<span class="date">{{short-date item.issued}}</span>
		</p>
	</div>
</div>

<audio id="popcorn-audio">
	{{#each player.model.mediaList as |media|}}
	<source src="{{ media.url }}" type="{{ media.format }}">
	{{/each}}
Your browser does not support the audio element.
</audio>