<kendo-dialog [title]="title" *ngIf="opened" (close)="close('cancel')"
              [minWidth]="'200px'"  [minHeight]="'200px'" [width]="dialogWidth"
              [maxWidth]="'100vw'" [maxHeight]="'100vh'"
>
    <div class="text-center">
      <kendo-loader *ngIf="!imageLoaded" size="large"></kendo-loader>
    </div>
    <img #content [src]="url | safeUrl"  (load)="onLoad()"   [width]="iWidth"/>

  <kendo-dialog-actions>
    <button kendoButton (click)="zoom(+0.1)" [icon]="'zoom-in'" [disabled]="imgWidthPercent >= 200 "><span class="k-fx-hidden">.</span></button>
    <button kendoButton (click)="zoom(-0.1)" [icon]="'zoom-out'" [disabled]="imgWidthPercent <=0" ><span class="k-fx-hidden">.</span></button>
    <button kendoButton (click)="originalSize()" >1:1</button>
    <button kendoButton (click)="close('no')" [disabled]="true"></button>
    <button kendoButton (click)="close('no')" [disabled]="true">{{imgWidthPercent | percent:'1.0'}}</button>
    <button kendoButton (click)="close('yes')" [icon]="'close-circle'" primary="true">close</button>
  </kendo-dialog-actions>
</kendo-dialog>
