<!-- Buttons Controls -->
<div class="buttons-control">
	<button ngbPopover='{{ "i18n.action.zoom" | translate | titleCase }} +'
			class="btn btn-sm btn-secondary btn-zoom-increase"
			data-placement="bottom"
			triggers="mouseenter:mouseleave"
			(click)=zoomIn() >
		<i class="fa fa-plus"></i>
	</button>
	<button ngbPopover='{{ "i18n.action.zoom" | translate | titleCase }} -'
			class="btn btn-sm btn-secondary btn-zoom-decrease"
			data-placement="bottom"
			triggers="mouseenter:mouseleave"
			(click)=zoomOut() >
		<i class="fa fa-minus"></i>
	</button>
	<button ngbPopover='{{ "i18n.action.center" | translate | titleCase }}'
			class="btn btn-sm btn-secondary btn-zoom-center"
			data-placement="bottom"
			triggers="mouseenter:mouseleave"
			(click)="recenterPlot()" >
		<i class="fa fa-arrows"></i>
	</button>
	<button ngbPopover='{{ "i18n.action.delete" | translate | titleCase }}'
			class="btn btn-sm btn-secondary btn-trash"
			data-placement="bottom"
			triggers="mouseenter:mouseleave"
			(click)="cleanPlot()" >
		<i class="fa fa-trash"></i>
	</button>
	<button ngbPopover='{{ "i18n.action.download" | translate | titleCase }} PNG'
			class="btn btn-sm btn-secondary btn-download"
			data-placement="bottom"
			triggers="mouseenter:mouseleave"
			(click)=exportPlot() >
		<i class="fa fa-download"></i>
	</button>
	<button id="settings"
			class="btn btn-sm btn-secondary btn-setting"
			placement="bottom"
			closePopoverDirective
			[ngbPopover]=popoverCanvas
			popoverTitle='{{ "i18n.object.settings" | translate | titleCase }}'
			#popover="ngbPopover"
			tiggers="click">
		<i class="fa fa-gear"></i>
	</button>
</div>

<div class="card">
    <div class="card-block contenedor-canvas" >
		<!-- Download Link -->
		<a id="download-plot" class="download-plot" href="#" download="Plot.svg" style="display: none">
			Download Canvas
		</a>

		<!-- Settings Popover Content -->
		<ng-template #popoverCanvas>
			<div class="form-group settings-popover-content">
				<div class="chart-controls setting-section">
					<label>
						<input 	
							type="checkbox" 
							name="grid"
							class="form-control form-control-sm"
							[checked]= settings.grid
							(click)="toggleGrid()">
							{{ "i18n.object.grid" | translate | titleCase }}
					</label>
					<label>
						<input 	
							type="checkbox"
							name="axis"
							class="form-control form-control-sm"
							[checked]= settings.axis 
							(click)="toggleAxis()">
							{{ "i18n.object.axes" | translate | titleCase }}
					</label>
					<label>
						<input 	
							type="checkbox"
							name="tip"
							class="form-control form-control-sm"
							[checked]= settings.tip
							(click)="toggleTip()">
							{{ "i18n.object.tip" | translate | titleCase }}
					</label>
					<label [class.disabled]="funciones.length === 0">
						<input
							type="checkbox"
							[attr.disabled]="funciones.length === 0 ? '' : null"
							[checked]=animation.boton
							(click)="multiGraf(value)">
							{{ "i18n.msg.figure.multiPlot" | translate | titleCase }}
					</label>
				</div>
				<hr>
				<div class="zoom-control setting-section">
					<div [class.disabled]="funciones.length === 0" style="display: flex;">
						<span style="margin-right: 8px; align-self: center;">
							{{ "i18n.action.zoom" | translate | titleCase }}
						</span>
						<input 
							type="number" 
							class="form-control form-control-sm"
							[attr.disabled]="funciones.length === 0 ? '' : null"
							[(ngModel)]="animation.zoo"
							[max]="1000000"
							[min]="8"
							(change)="setZoom()"
							style="width: 70px;"
						/>
					</div>
				</div>
				<hr>
				<div class="animation-controls setting-section"
					[class.disabled]="animation.data.length === 0">
					<label>{{ "i18n.msg.figure.animationSpeed" | translate }}:</label>
					<div>
						<button class="btn btn-sm btn-secondary"
								[attr.disabled]="animation.data.length === 0 ? '' : null"
								(click)='decreaseSpeed()'>
							<i class="fa fa-minus"></i>
						</button>
						<button class="btn btn-sm btn-secondary"
								[attr.disabled]="animation.data.length === 0 ? '' : null"
								(click)='restoreSpeed()'>
							<span>1x</span>
						</button>
						<button class="btn btn-sm btn-secondary"
								[attr.disabled]="animation.data.length === 0 ? '' : null"
								(click)='increaseSpeed()'>
							<i class="fa fa-plus"></i>
						</button>
						<span class="speed-value">
							{{animation.speedX | number:'1.0'}}x
						</span>
					</div>
				</div>
			</div>
        </ng-template>
		
		<!-- Animation -->
		<div class="animation" *ngIf="animation.data.length>0">
			<button class="btn btn-sm btn-secondary btn-play"
					data-placement="bottom"
					*ngIf="!animation.playing"
					(click)="runAnimation()" >
				<i class="fa fa-play"></i>
			</button>
			<button class="btn btn-sm btn-secondary btn-pause"
					data-placement="bottom"
					*ngIf="animation.playing"
					(click)="pauseAnimation()" >
				<i class="fa fa-pause"></i>
			</button>

			<ngb-progressbar
				class="progressbar"
				type="info"
				[value]="((animation.currentFrame+1)/animation.data.length)*100">
			</ngb-progressbar>
		</div>

		<!-- Graph Container -->
		<div #graph2DContainer id="graph2D-container">
			
        </div>
    </div>
</div>