<div class="app-card-title mb-3">
	<anglo-title-component title="Form Upload"></anglo-title-component>
</div>	
<div fxLayout="row wrap" fxLayoutAlign=" start" class="form-upload-wrapper">
   <mat-card fxFlex="100%">
      <div class="app-card mb-4">
         <div fxLayout="row" fxLayoutAlign="start center">
             <div class="card-title mb-3" fxLayout="column">
                 <h3>{{'Angular 2 File Upload'|translate}}</h3>
             </div> <span fxFlex></span> </div>
         <mat-divider></mat-divider>
      </div>
     	<div class="card-content">
		   <div fxLayout="row wrap" fxLayoutAlign="start">
		      <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.lg="20" fxFlex.xl="20"  class="pr-3">
		        	<h5>Select files</h5>
		        	<div class="file-type" ng2FileDrop
		          	[ngClass]="{'nv-file-over': hasBaseDropZoneOver}"
		          	(fileOver)="fileOverBase($event)"
		          	[uploader]="uploader" 
		          	class="well my-drop-zone mb-3 p-3">
		          	Base drop zone
		         </div>

		       	<div class="file-type" ng2FileDrop
		          	[ngClass]="{'another-file-over-class': hasAnotherDropZoneOver}"
		          	(fileOver)="fileOverAnother($event)"
		          	[uploader]="uploader"
		          	class="well my-drop-zone mb-3 p-3">
		          	Another drop zone
		         </div>

		        	<p>Multiple Files</p>
		        	<input class="mb-3" type="file" ng2FileSelect [uploader]="uploader" multiple  /><br/>
		        	<p>Single</p>
		        	<input type="file" ng2FileSelect [uploader]="uploader" />
		      </div>
		      <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.lg="70" fxFlex.xl="70">
		      	<div class="pad-wrap">
			        	<div class="queue-heading">
				        	<div class="queue-title">
				          	<h5><span fxFlex>Upload queue</span></h5>
				         </div>
				         <div class="queue-length"> 	
				          	<h5><span>Queue length: {{ uploader?.queue?.length }}</span></h5>
				        	</div>
			        	</div>
			        	<div class="overflow-hidden">
				        	<div class="table-responsive">
							   <table class="table material mb-3 full-wid">
							      <thead>
							         <tr>
						               <th class="text-left p-2">Name</th>
						               <th>Size</th>
						               <th>Progress</th>
						               <th>Status</th>
						               <th>Actions</th>
						            </tr>
							      </thead>
							      <tbody>
							        <ng-container *ngIf="uploader.queue && uploader.queue.length>0; else elseBlock">
							            <tr  *ngFor="let item of uploader.queue">
							               <td><strong>{{ item?.file?.name }}</strong></td>
							               <td  nowrap=""> {{ item?.file?.size/1024/1024 | number:'.2' }} MB</td>
							               <td>
							                  <div class="progress">
							                    <div class="progress-bar" fxLayout="row" fxLayoutAlign="start center" role="progressbar" [ngStyle]="{ 'width': item.progress + '%' }"></div>
							                  </div>
							               </td>
							               <td class="text-align primary-color">
							                  <span *ngIf="item.isSuccess"><mat-icon>done</mat-icon></span>
							                  <span *ngIf="item.isCancel"><mat-icon>clear</mat-icon></span>
							                  <span *ngIf="item.isError"></span>
							               </td>
							               <td nowrap>
							              
								               <button mat-raised-button mat-button-sm type="button" color="primary" class="upload-btn btn mr-3"
								                  (click)="item.upload()" [disabled]="item.isReady || item.isUploading || item.isSuccess">
								                  <div fxLayout="row" fxLayoutAlign="space-evenly center">
								                  <span class="glyphicon glyphicon-upload mr-1"></span> Upload
								                  </div>
								               </button>
								           
								               <button mat-raised-button mat-button-sm type="button" color="accent" class="accent-btn btn mr-3"
								                	(click)="item.cancel()" [disabled]="!item.isUploading">
								                	<div fxLayout="row" fxLayoutAlign="space-evenly center">
								                		<span class="glyphicon glyphicon-ban-circle mr-1">
								                		</span> Cancel
								                	</div>
								               </button>
								             
								              	<button mat-raised-button mat-button-sm type="button" color="warn" class="warn-btn btn mr-3"
								              		(click)="item.remove()">
								              		<div fxLayout="row" fxLayoutAlign="space-evenly center">
								              			<span class="glyphicon glyphicon-trash mr-1">	
								              			</span> Remove
								              		</div>
								            	</button>
							          		</td>
							        		</tr>
							      	</ng-container>
							      	<ng-template #elseBlock>
							       		No data to display
							     		</ng-template>
							   	</tbody>
							 	</table>
							</div>
						</div>	 	
		        		<div class="mb-3">
		          		<p>Queue progress:</p>
		          		<mat-progress-bar mode="determinate" value="{{uploader.progress}}"></mat-progress-bar>
		        		</div>
		        		<button mat-raised-button mat-button-sm class="warn-btn btn mr-3 mb-3" color="primary" type="button"
		          		(click)="uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length">Upload all</button>
		        		<button mat-raised-button mat-button-sm class="warn-btn btn mr-3" color="accent"  type="button"
		          		(click)="uploader.cancelAll()" [disabled]="!uploader.isUploading">Cancel all
		          	</button>
		        		<button mat-raised-button mat-button-sm  class="warn-btn btn mr-3" color="warn" type="button"
		          		(click)="uploader.clearQueue()" [disabled]="!uploader.queue.length">Remove all
		          	</button>
		         </div>
		      </div>
		   </div>
		</div>
	</mat-card>
</div>