<div class="noOrderMsg" 
     *ngIf="order.address.length == 0">
	{{ vE.orderNoOpenorder }} 
</div>
<mat-card style="margin-top: 10px;" *ngIf="order.address.length" >

	<div class="newOrder">
		<mat-card-title>
			<table style="width: 100%;" 
			       cellspacing="0">
				<tr class="newOrderTitle1">
					<td width="50%">{{ vE.orderTotalTitle }}</td>
					<td align="right"
					    width="50%">	
						<img class="icon" src="/assets/zec_rv.png" 
						>{{(total/price) | number: '1.08'}}
					</td>
				</tr>
				<tr class="newOrderTitle2">
					<td width="50%">
						<img class="icon" 
						     style="color: lightgray; 
						            margin-bottom: -3px;" 
						     src="/assets/zec_rv.png"
						>1.0 &cong; {{ price | currency: getCurrency()}}
					</td>
					<td width="50%" align="right">
						{{total | currency: getCurrency()}}
					</td>
				</tr>
			</table>
		</mat-card-title>
		<table style="width: 100%;">

            	<thead style="width: 100%;">
				<tr style="background: lightblue;">
					<th class="newOrdertbheader"
					    style="text-align: left;" 
					    width="50%">{{ vE.orderItemLbl }}
					</th>
					<th class="newOrdertbheader"
					    style="text-align: left;" 
					    width="15%">{{ vE.orderQtyLbl }}.
					</th>
					<th class="newOrdertbheader"
					    style="text-align: right;" 
					    width="30%">{{ vE.orderTotalLbl }}
					</th>
					<th></th>
				</tr>
			</thead>	

		     <tbody>
				<tr style="height:  30px;"
				    *ngFor="let item of oLines">
					<td class="newOrdertbdetail" 
					    style="text-align: left;" 
					    width="50%">{{item.name}}
					</td>
					<td class="newOrdertbdetail" 
					    style="text-align: left;" 
					    width="15%">{{item.qty}}
					</td>
					<td class="newOrdertbdetail" 
					    style="text-align: right;" 
					    width="30%">{{item.qty * item.cost | number:'1.02' | currency: getCurrency() }} 
					</td>
					<td class="lineTrashCan">
				        <a (click)='trashCanClicked(item,oLines)' >	
						   <fa-icon [icon]="faTrashAlt" 
						            style="color: lightslategrey; 
						                   font-size: 14px;
						                   margin: auto;">
						   </fa-icon>
					   </a>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
<div class="container" style="margin: 2px; 
                              height: 40px;
                              background: lightblue;
                              border-top: 2px solid lightgray;
                              border-bottom: 2px solid lightgray;
                              align-content: center;
                              justify-content: center;">
<!--	
	<mat-card-actions>
-->
		<table style="margin-top: 4px;" cellspacing="0" width="100%">
			<tr style="height: 30px;
			           margin-top: 10px">
				<td>
					<button mat-raised-button
					 	   class="button-cancel-class"
					        (click)="cancelOrder()">
					   	   {{ vE.orderCancelBtn }}
					</button>
				</td>
				<td>
					<button mat-raised-button 
					        class="buttons-class"
					        (click)="invoice()">
					        <fa-icon [icon]="faInvoice" ></fa-icon> {{vE.orderInvoiceBtn}}</button>
				</td>
				<td  align="right">

					<button mat-raised-button 
					        class="buttons-class"
					        (click)="checkout()">{{vE.orderCheckoutBtn}}
					</button>
<!--
					<button mat-raised-button class="text" color="primary" (click)="checkout()">Checkout</button>
-->
				</td>
			</tr>
		</table>
<!--
	</mat-card-actions>
-->
</div>
</mat-card>
