<div id="audio" class="{{if (if-or player.transcript player.model.video) ' extra'}}{{if (if-and player.transcript player.model.video) ' multiple'}}">
	<div class="controls">
		<i title="Backward" class="fa fa-backward{{if isFirst ' disabled'}}" {{action 'backward'}}>Backward</i>
		{{#if player.playing}}
		<i title="Pause" class="fa fa-pause" {{action 'toggle'}}>Pause</i>
		{{else}}
		<i title="Play" class="fa fa-play" {{action 'toggle'}}>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" onclick={{action 'setTime'}}><span class="value"></span></span>
		<span class="remaining">- {{to-minutes remaining}}</span>
	</div>
	<div class="controls extra">
	{{#if player.model.video}}
		{{#if player.videoscreen}}
		<i title="Compress" class="fa fa-compress" {{action 'display' 'video'}}>Hide video</i>
		{{else}}
		<i title="Expand" class="fa fa-expand" {{action 'display' 'video'}}>Show video</i>
		{{/if}}
	{{/if}}
	{{#if player.transcript}}
		<i title="Transcript" class="fa fa-text-height{{if (eq player.window 'transcript') ' active'}}" {{action 'display' 'transcript'}}>Transcript</i>
	{{/if}}
	</div>
	<div class="meta">
		<p>
			<span title="{{ item.title }}" class="title"><span>{{ item.title }}</span></span>
      {{#each model.languages as |lang index|}}{{if index ", "}}{{doc-language url=lang class="language"}}{{/each}}
		</p>
		<p>
			<span title="{{item.publishers_disp}}" class="author"><span>{{item.publishers_disp}}</span></span>
			<span class="date">{{short-date item.issued}}</span>
		</p>
	</div>
</div>

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