<h2>
    {{player.transcript.title.original}}
{{#if player.transcript.title.translation}}
    <span>{{player.transcript.title.translation}}</span>
{{/if}}
</h2>

<div class="transcript">
    {{#each player.transcript.annotations as |annotations index|}}
    {{#if player.transcript.sections}}
    <h3>{{array-index (array-index player.transcript.sections index) 'title'}}</h3>
    {{/if}}
    <ol class="annotations">
        {{#each annotations as |annotation|}}
        <li class="sentence {{if (if-and (if-operator player.progress '>=' annotation.begin) (if-operator player.progress '<' annotation.end)) 'active'}}" {{action 'play' annotation.begin}}>
            {{#unless (if-and (if-operator player.progress '>=' annotation.begin) (if-operator player.progress '<' annotation.end))}}
            <i class="fa fa-play" {{action 'play' annotation.begin}}>Play</i>
            {{/unless}}
            {{#if annotation.title}}<span class="title">{{annotation.title}}</span>{{/if}}
            {{#each annotation.fragments as |fragment|}}
            <div class="fragment">
                
                {{#if fragment.original}}
                <p class="original">
                    {{#if fragment.speaker}}<span class="speaker">{{fragment.speaker}} :</span>{{/if}}
                    {{fragment.original}}
                </p>
                {{/if}}
                {{#if fragment.literal}}
                <div class="words">
                    {{#each fragment.literal as |word|}}
                    <div class="word">
                        <p class="original">{{word.original}}</p>
                        <p class="translation">{{word.translation}}</p>
                    </div>
                    {{/each}}
                </div>
                {{/if}}
                {{#if fragment.translation}}
                <p class="translation">{{fragment.translation}}</p>
                {{/if}}
            </div>
            {{/each}}   
        </li>
        {{/each}}
    </ol>
    {{/each}}
</div>