@if (helperText() && !alreadyDragged) {
  <div class="helper-text">
    <mat-icon class="-ms-0.5">drag_pan</mat-icon>
    {{ helperText() }}
  </div>
}

<div #content class="content" (dragstart)="onDragStart($event)">
  <img [src]="src()" alt="" class="image"
       (load)="onLoad($event)" [style.scale]="scale"
       emrDragImage [scale]="scale" [content]="content">
</div>
<div class="controls mx-auto w-max flex items-center gap-3">
  <button mat-icon-button (click)="decrease()" [disabled]="isEqualsToMinScale">
    <mat-icon>remove</mat-icon>
  </button>
  <div class="w-[300px] range-slider -ms-3">
    <mat-slider class="!w-full" [min]="min" [max]="max">
      <input matSliderThumb [ngModel]="scale * 100" (ngModelChange)="onScaleChange($event)">
    </mat-slider>
  </div>
  <button mat-icon-button (click)="increase()" [disabled]="isEqualsToMaxScale">
    <mat-icon>add</mat-icon>
  </button>
</div>