
<div  class='itemDataTitle'>{{ vE.itemeditEditItem }}</div>

<div class='container' style="margin-top: 20px;">
	<mat-dialog-content [formGroup]="form">
		<span style="line-height: 10px;"></span>
		<mat-form-field class="text" [style.width.%]="100">
			<mat-label>{{ vE.itemeditItemLabel}}</mat-label>
			<input type="hidden" formControlName="id">
			<input matInput 
				   placeholder="Item" 
				   formControlName="name"
				   maxlength="16">
		</mat-form-field >
		<mat-form-field class="text" [style.width.%]="100">
			<mat-label>{{ vE.itemeditItemDescr }}</mat-label>
			<textarea matInput 
					  placeholder="Description" 
					  formControlName="description"
					  maxlength="30" 
    				  style="line-height:20px; 
    				  		 overflow:auto;"></textarea>
		</mat-form-field>
		<mat-form-field class="text" [style.width.%]="100">
			<mat-label>{{ vE.itemeditItemPrice }}</mat-label>
			<input matInput type="number" placeholder="Price" formControlName="cost">
			<div *ngIf="!form.controls['cost'].valid && form.controls['cost'].touched">
				<div *ngIf="form.controls['cost'].errors?.pattern">Use only numbers</div>
			</div>
		</mat-form-field>
	</mat-dialog-content>

	<div style="display: flex;
				justify-content: space-between;
				margin-top: 20px;
				padding: 20px;">
		<button mat-raised-button class="text" (click)="close()">{{ vE.itemeditCloseBtn }}</button>
		<button mat-raised-button class="text" color="primary" (click)="save()">{{ vE.itemeditSaveBtn }}</button>
	</div>		

</div>