<div class="card">
    <div class="card-block contenedor-canvas" >
        <button ngbPopover="Zoom +"  triggers="mouseenter:mouseleave" data-placement="bottom" class="btn btn-sm btn-secondary" style="float:right; margin-right: 165px; margin-top: -55px" (click)=zoomIn() ><i class="fa fa-plus"></i></button>
        <button ngbPopover="Zoom -"  triggers="mouseenter:mouseleave" data-placement="bottom" class="btn btn-sm btn-secondary" style="float:right; margin-right: 132px; margin-top: -55px" (click)=zoomOut() ><i class="fa fa-minus"></i></button>
        <button ngbPopover="Centrar"  triggers="mouseenter:mouseleave" data-placement="bottom" class="btn btn-sm btn-secondary" style=" float:right; margin-right: 99px; margin-top: -55px" (click)="recenterPlot()" ><i class="fa fa-arrows"></i></button>
		<button ngbPopover="Borrar"  triggers="mouseenter:mouseleave" data-placement="bottom" class="btn btn-sm btn-secondary" style=" float:right; margin-right: 66px; margin-top: -55px" (click)="cleanPlot()" ><i class="fa fa-trash"></i></button>
        
        <button ngbPopover="Descargar PNG"  triggers="mouseenter:mouseleave" data-placement="bottom" class="btn btn-sm btn-secondary" style="float:right; margin-right: 33px; margin-top: -55px" (click)=exportPlot() ><i class="fa fa-download"></i></button>
		<a id="download-plot" class="download-plot" href="#" download="Plot.svg" style="display: none">Download Canvas</a>

        <button class="btn btn-sm btn-secondary" data-placement="bottom" *ngIf="!animation.playing && animation.data.length>0" style=" float:left; margin-top: -5px; margin-right: 5px" (click)="runAnimation()" ><i class="fa fa-play"></i></button>
		<button class="btn btn-sm btn-secondary" data-placement="bottom" *ngIf="animation.playing && animation.data.length>0" style=" float:left; margin-top: -5px; margin-right: 5px" (click)="pauseAnimation()" ><i class="fa fa-pause"></i></button>

		<ngb-progressbar style="float: left; width: 90%" *ngIf="animation.data.length>0" type="info" [value]="((animation.currentFrame+1)/animation.data.length)*100"></ngb-progressbar>

        <button 
		[ngbPopover]=popoverConfig
			closePopoverOnOutsideClick
			placement="bottom" 
            style=" float:right; margin-right: 1px; margin-top: -55px"
			tiggers="click"
			class="btn btn-sm btn-secondary" 
			popoverTitle="Configuración"
		>
			<i class="fa fa-gear"></i>
		</button>

		<ng-template #popoverConfig>
			<div style="width: 140px;">
				
				<label class="d-block">
					<input type="checkbox" [checked]=animation.boton (click)="multiGraf(value)" >
					Multi gráficas:
				</label>


				<div style="display: flex;">
					<span style="margin-right: 8px; align-self: center;">
						Zoom:
					</span>

					<input 
						type="number" 
						class="form-control form-control-sm" 
						[max]="10000"
                        [min]="2" 
                        [(ngModel)]=animation.zoo
						(change)="setZoom()"
						style="width: 70px;"
					/>
				</div>
			</div>
		</ng-template>
        <div id="graph2D-container" style="height: 100%; width: 100%;">
        </div>
        
    </div>
</div>