<div *ngIf="items.length > 0">
	<mat-toolbar color="accent">
		<span align="center" class="text">
			{{ vE.itemlistAvailItems }}
		</span>
		<span class="spacer"></span>
		<span align="center">
		<button mat-icon-button 
				color="primary"
				(click)="openDialog()">
			<mat-icon aria-button-label="Add Item">
				add
			</mat-icon>
		</button>
		</span>
	</mat-toolbar>
	<div style="display: block;
				overflow-y: auto;
				height: 500px;">
		<div class="card" *ngFor="let item of itemsUpdate | async">
			<mat-card>
				<table cellspacing="0" width="100%" >
					<tr>
						<td style="font-family: Roboto Mono;
								   font-size: 16px;
								   font-weight: 700;
								   height: 20px;">
						{{item.name}}
						</td>
						<td></td>	
					</tr>
					<tr>
						<td style="font-family: Roboto Mono;
								   font-size: 16px;
								   font-weight: 400;
								   height: 20px;">
						    {{item.description}}
					    </td>
					    <td>
							<div class="rv_price" 
							     *ngIf="!owner.zats">
								<img class="icon" 
									 src="/assets/zec_rv.png" 
									 height="16px">
								{{(item.cost/zecPrice) | number: '1.08'}}
								[{{item.cost | number: '1.02' | currency: getCurrency() }}]    
							</div>
							<p class="rv_price" 
							   *ngIf="owner.zats"> 
							   &#x24e9;{{(item.cost/zecPrice)*100000000 | number: '1.0-0'}}
							</p>
						</td>
					</tr>
				</table>
				<mat-card-actions>
					<table cellspacing="0" width="100%">
						<tr>
							<td>
								<button mat-icon-button class="icons" (click)="edit(item._id!)">
									<mat-icon>edit</mat-icon>
								</button>
								<button mat-icon-button class="icons" (click)="delete(item._id!)">
									<mat-icon>delete</mat-icon>
								</button>
							</td>
							<td align="right">
								<button mat-icon-button 
										color="primary" 
										class="buttons-class-cart" 
										(click)="addToOrder(item._id!)">
									<mat-icon>
										shopping_cart
									</mat-icon>
								</button>
							</td>
						</tr>
					</table>
				</mat-card-actions>
			</mat-card>
		</div>
	</div>	
</div>
<div *ngIf = "items.length <= 0">
	<div class="availableItems" >
	    {{ vE.itemlistListEmpty }}
		<button mat-raised-button 
				class="buttons-class"
				(click)="openDialog()">
			<mat-icon class="icon">
				add
			</mat-icon>
			Add item
		</button>
	</div>
</div>	
<br>
