<span class="original">{{transcript.title.original}}</span>

{{#if transcript.title.translation}}

    <span class="translation">{{transcript.title.translation}}</span>

{{!-- This has been tested using sub-components (sections, turns, annotations) but performances were too bad...--}}

    {{#each transcript.sections as |section indexSection|}}

      <div>

        <h3>{{section.title}}</h3>

        <ol class="annotations">

        {{#each section.turns as |turn indexTurn|}}

          <li class="sentence" id="sentence-{{indexSection}}-{{indexTurn}}">

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

            {{#if turn.title}}<span class="title">{{turn.title}}</span>{{/if}}

            {{#each turn.annotations as |annotation|}}

            <div>

              <div class="fragment">

                {{#if annotation.original}}

                <p class="original">

                  {{#if annotation.speaker}}<span class="speaker">{{annotation.speaker}} :</span>{{/if}}

                  {{annotation.original}}

                </p>

                {{/if}}

                {{#if annotation.literal}}

                <div class="words">

                  {{#each annotation.literal as |word|}}

                    <div class="word">

                      <p class="original">{{word.original}}</p>

                      <p class="translation">{{word.translation}}</p>

                    </div>

                  {{/each}}

                </div>

                {{/if}}

                {{#if annotation.translation}}

                  <p class="translation">{{annotation.translation}}</p>

                {{/if}}

              </div>

            </div>

            {{/each}}

          </li>

        {{/each}}

        </ol>

      </div>

    {{#each transcript.annotations as |annotation index|}}

      <li class="sentence" id="sentence-{{index}}">

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

        {{#if annotation.title}}<span class="title">{{annotation.title}}</span>{{/if}}

        <div class="fragment">

          {{#if annotation.original}}

          <p class="original">

            {{#if annotation.speaker}}<span class="speaker">{{annotation.speaker}} :</span>{{/if}}

            {{annotation.original}}

          </p>

          {{/if}}

          {{#if annotation.literal}}

          <div class="words">

            {{#each annotation.literal as |word|}}

              <div class="word">

                <p class="original">{{word.original}}</p>

                <p class="translation">{{word.translation}}</p>

              </div>

            {{/each}}

          </div>

          {{/if}}

          {{#if annotation.translation}}

            <p class="translation">{{annotation.translation}}</p>

          {{/if}}

        </div>

      </li>