<ion-content [fullscreen]="true" class="bg-gradient">
  <div class="display-wrapper" 
       [style.fontSize.rem]="fontSize()"
       (touchstart)="onTouchStart($event)"
       (touchmove)="onTouchMove($event)"
       (touchend)="onTouchEnd()">
    <div class="lyrics-window">
      <!-- Previous line -->
      <div *ngIf="displayLines().prev" class="prev-line">
        <ng-container *ngIf="showChords(); else prevText">
          <span *ngFor="let seg of displayLines().prev!.segments; let i = index" class="chord-segment" [class.contiguous-next]="lyricsParser.isContiguousNext(displayLines().prev!.segments, i)">
            <span *ngIf="seg.chord" class="chord">{{ seg.chord }}</span>
            <span class="seg-text">{{ seg.text }}</span>
          </span>
        </ng-container>
        <ng-template #prevText>{{ displayLines().prev!.text }}</ng-template>
      </div>

      <!-- Active line -->
      <div *ngIf="displayLines().current" class="active-line outfit-font">
        <ng-container *ngIf="showChords(); else currentText">
          <span *ngFor="let seg of displayLines().current!.segments; let i = index" class="chord-segment" [class.contiguous-next]="lyricsParser.isContiguousNext(displayLines().current!.segments, i)">
            <span *ngIf="seg.chord" class="chord">{{ seg.chord }}</span>
            <span class="seg-text">{{ seg.text }}</span>
          </span>
        </ng-container>
        <ng-template #currentText>{{ displayLines().current!.text }}</ng-template>
      </div>

      <!-- Next line -->
      <div *ngIf="displayLines().next" class="next-line">
        <ng-container *ngIf="showChords(); else nextText">
          <span *ngFor="let seg of displayLines().next!.segments; let i = index" class="chord-segment" [class.contiguous-next]="lyricsParser.isContiguousNext(displayLines().next!.segments, i)">
            <span *ngIf="seg.chord" class="chord">{{ seg.chord }}</span>
            <span class="seg-text">{{ seg.text }}</span>
          </span>
        </ng-container>
        <ng-template #nextText>{{ displayLines().next!.text }}</ng-template>
      </div>
    </div>
    
    <div class="footer-info">
      <div class="title-label outfit-font">{{ canto()?.titolo }}</div>
    </div>
  </div>
</ion-content>
