Chocobozzz/PeerTube

<div class="root" [ngClass]="{ 'maximized': isMaximized }">

  <textarea #textarea
    [(ngModel)]="content" (ngModelChange)="onModelChange()"
    class="form-control" [ngClass]="{ 'input-error': formError }"
    [attr.disabled]="disabled || null"
    [id]="inputId" [name]="inputId" [dir]="dir">
  </textarea>

  <div ngbNav #nav="ngbNav" class="nav-pills nav-preview">
    <ng-container ngbNavItem *ngIf="truncateTo3Lines">
      <a ngbNavLink i18n>Truncated preview</a>

      <ng-template ngbNavContent>
        <div class="ellipsis-multiline-3" [innerHTML]="previewHTML"></div>
      </ng-template>
    </ng-container>

    <ng-container ngbNavItem>
      <a ngbNavLink i18n>Complete preview</a>

      <ng-template ngbNavContent>
        <div #previewElement></div>
        <div [innerHTML]="previewHTML"></div>
      </ng-template>
    </ng-container>

    <button type="button" (click)="onMaximizeClick()" class="maximize-button border-0 m-3" [disabled]="disabled">
      @if (isMaximized) {
        <my-global-icon [ngbTooltip]="maximizeOutText" iconName="exit-fullscreen"></my-global-icon>
        <span class="visually-hidden">{{ maximizeOutText }}</span>
      } @else {
        <my-global-icon [ngbTooltip]="maximizeInText" iconName="fullscreen"></my-global-icon>
        <span class="visually-hidden">{{ maximizeInText }}</span>
      }
    </button>
  </div>

  <div [ngbNavOutlet]="nav"></div>

  <div *ngIf="!isMaximized && formError" class="form-error" role="alert">{{ formError }}</div>
</div>