<h2>
	{{player.transcript.title.original}}
{{#if player.transcript.title.translation}}
	<span>{{player.transcript.title.translation}}</span>
{{/if}}
</h2>
<ol class="transcript">
{{#each player.transcript.annotations as |annotation|}}
{{log 'each-annotation'}}
	{{#if (if-and (if-operator player.progress '>=' annotation.start) (if-operator player.progress '<' annotation.end))}}
	<li class="sentence active">
		<i class="fa fa-play" {{action 'play' annotation.start}}>Play</i>
		{{#if annotation.content}}<p class="original">{{annotation.content}}</p>{{/if}}
		{{#if annotation.words}}
		<div class="words">
		{{#each annotation.words as |word|}}
			<div class="word">
				<p class="original">{{word.content}}</p>
				<p class="translation">{{word.translation}}</p>
			</div>
		{{/each}}
		</div>
		{{/if}}
		{{#if annotation.translation}}<p class="translation">{{annotation.translation}}</p>{{/if}}
	</li>
	{{else}}
	<li class="sentence" {{action 'play' annotation.start}}>
		<i class="fa fa-play">Play</i>
		{{#if annotation.content}}<p class="original">{{annotation.content}}</p>{{/if}}
		{{#if annotation.words}}
		<div class="words">
		{{#each annotation.words as |word|}}
			<div class="word">
				<p class="original">{{word.content}}</p>
				<p class="translation">{{word.translation}}</p>
			</div>
		{{/each}}
		</div>
		{{/if}}
		{{#if annotation.translation}}<p class="translation">{{annotation.translation}}</p>{{/if}}
	</li>
	{{/if}}
{{/each}}
</ol>