<div class="app-card-title mb-4">
	<anglo-title-component title="Editing"></anglo-title-component>
</div>	
<div class="app-card editing-table-wrapper">
	<mat-card>
		<div class="card-title mb-3 p-2">
			<h3 class="text-capitalize">{{'Table Editing'|translate}}</h3>
		</div>
		<div class="card-content p-2">
			<div class="table-responsive overflow-hidden">	
				<ngx-datatable 
			   	#mydatatable
			 		class="material"
				   [headerHeight]="50"
				   [limit]="5"
				   [columnMode]="'force'"
				   [footerHeight]="50"
				   [rowHeight]="'auto'"
				   [rows]="rows">

			   	<ngx-datatable-column name="Name">
						<ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="value" let-row="row">
						<span
		            	title="Double click to edit"
		              	(dblclick)="editing[rowIndex + '-name'] = true"
		              	*ngIf="!editing[rowIndex + '-name']">
		             	{{value}}
		            </span>
							<input
							   autofocus
							   (blur)="updateValue($event, 'name', rowIndex)"
							   *ngIf="editing[rowIndex+ '-name']"
							   type="text"
							   [value]="value"
							/>
						</ng-template>
			  		</ngx-datatable-column>

			  		<ngx-datatable-column name="Gender">
						<ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-row="row" let-value="value">
							<span
								title="Double click to edit"
								(dblclick)="editing[rowIndex + '-gender'] = true"
								*ngIf="!editing[rowIndex + '-gender']">
								{{value}}
							</span>
							<select
								*ngIf="editing[rowIndex + '-gender']"
							   (blur)="editing[rowIndex + '-gender'] = false"
							   (change)="updateValue($event, 'gender', rowIndex)"
							   [value]="value">
							   <option value="male">Male</option>
							   <option value="female">Female</option>
							</select>
					   </ng-template>
			  		</ngx-datatable-column>

			  		<ngx-datatable-column name="Age">
				 		<ng-template ngx-datatable-cell-template let-value="value">
							{{value}}
				 		</ng-template>
			  		</ngx-datatable-column>
				</ngx-datatable>
			</div>	
		</div>
	</mat-card>	
</div>