<div class="webcam-grid">
  <mat-card class="webcam-container" [style]="'width: '+this.size+'px; height:'+this.size+'px'">
    <mat-card-content>
      <webcam id="webcam"
        [height]="this.size"
        [width]="this.size"
        [trigger]="triggerObservable"
        (imageCapture)="processSnapshot($event);"
        [videoOptions]="videoOptions">
      </webcam>
    </mat-card-content>
  </mat-card>

  <button [disabled]=disabled class="arrow-take-picture" name="pictureTake" mat-stroked-button [title]="translate.instant('core.hwebcam.takepicture')"
    (click)="triggerSnapshot();">
    <mat-icon class="webcam_button_icons">camera_enhance</mat-icon>{{'core.hwebcam.takepicture' | translate}}
  </button>

  <button *ngIf=canDelete [disabled]=disabled mat-stroked-button class="btn-delete" (click)="processSnapshot(null)" name="pictureDelete">
    <mat-icon class="webcam_button_icons">delete</mat-icon> {{'core.hwebcam.delete' | translate}}
  </button>

  <mat-card class="snapshot" [style]="'width: '+this.size+'px; height:'+this.size+'px'">
    <mat-card-content>
      <div *ngIf="picture">
        <img [src]="'data:image/jpg;base64,'+picture" height="100%" width="100%"/>
        <!-- <button mat-icon-button class="DeleteButton" (click)="processSnapshot(null)">
          <mat-icon class="DeleteIcon">highlight_off</mat-icon>
        </button> -->
      </div>
      <span *ngIf="!picture" class="material-icons no-photo-icon" [style]="'font-size: '+this.size+'px'">
        image_not_supported
      </span>
    </mat-card-content>
  </mat-card>
</div>
