<h2>
    <span class="original">{{transcript.title.original}}</span>
{{#if transcript.title.translation}}
    <span class="translation">{{transcript.title.translation}}</span>
{{/if}}
</h2>
{{!-- This has been tested using sub-components (sections, turns, annotations) but performances were too bad...--}}
<div class="transcript">
  {{#if hasSections }}
    {{#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' turn.begin}} title="lecture {{milli-to-minutes turn.begin}}">Play</i>
            {{#if turn.title}}<span class="title">{{turn.title}}</span>{{/if}}
            {{#each turn.annotations as |annotation|}}
            <div {{action 'play' (or annotation.begin turn.begin) }} title="lecture {{milli-to-minutes (or annotation.begin turn.begin)}}">
              <div class="fragment">
                {{#if annotation.original}}
                <p class="original">
                  {{#if annotation.speaker}}<span class="speaker">{{annotation.speaker}} :</span>{{/if}}
                  <span class="annotation-content">{{annotation-content annotation.original}}</span>
                </p>
                {{/if}}
                {{#if annotation.literal}}
                <div class="words">
                  {{#each annotation.literal as |word|}}
                    <div class="word" {{action 'play' (or word.begin annotation.begin turn.begin) }} title="lecture {{milli-to-minutes (or word.begin annotation.begin turn.begin)}}">
                      <p class="original">{{word.original}}</p>
                      <p class="translation">{{word.translation}}</p>
                      {{#if (and word.morphenes word.morphenes.length)}}
                      <div class="morphene-container">
                      {{#each word.morphenes as |morph|}}
                        <div class="morphene">
                          <p class="morphene-original">{{morph.original}}</p>
                          <p class="morphene-translation">{{morph.translation}}</p>
                        </div>
                      {{/each}}
                      </div>
                      {{/if}}
                    </div>
                  {{/each}}
                </div>
                {{/if}}
                {{#if annotation.translation}}
                  <p class="translation">{{annotation.translation}}</p>
                {{/if}}
              </div>
            </div>
            {{/each}}
          </li>
        {{/each}}
        </ol>
      </div>
    {{/each}}
  {{else}}
    <ol class="annotations">
    {{#each transcript.annotations as |annotation index|}}
      <li class="sentence" id="sentence-{{index}}">
        <i class="fa fa-play" {{action 'play' annotation.begin}} title="lecture {{milli-to-minutes 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" {{action 'play' (or word.begin annotation.begin) }} title="lecture {{milli-to-minutes (or word.begin annotation.begin)}}">
                <p class="original">{{word.original}}</p>
                <p class="translation">{{word.translation}}</p>
                {{#if (and word.morphenes word.morphenes.length)}}
                <div class="morphene-container">
                  {{#each word.morphenes as |morph|}}
                    <div class="morphene">
                      <p class="morphene-original">{{morph.original}}</p>
                      <p class="morphene-translation">{{morph.translation}}</p>
                    </div>
                  {{/each}}
                </div>
                {{/if}}
              </div>
            {{/each}}
          </div>
          {{/if}}
          {{#if annotation.translation}}
            <p class="translation">{{annotation.translation}}</p>
          {{/if}}
        </div>
      </li>
    {{/each}}
    </ol>
  {{/if}}
</div>