<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}}>

            <i class="fa fa-play" {{action 'play' annotation.begin}}>Play</i>

            {{#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>