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