<div class="app-card-title mb-4">
	<anglo-title-component title = "Draggable"></anglo-title-component>
</div>
<mat-card>
	<div class="app-card">
		<div class="card-title mb-3">
	      <h3 class="text-capitalize">{{'Anglo Draggable'|translate}}</h3>
	   </div>
	   <div class="dragable-wrapper grid-wrapper" fxLayout="row wrap">
	   	<div class="app-card" fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50">
			   <mat-card class="p-0">
					<div class="dragarea" dragula="VAMPIRES" [(dragulaModel)]="list1">
						<a class="card-content" *ngFor="let list of list1">
                     <div fxLayoutAlign="start center" class="full-wid">
							<div class="img-thumb-wrap radius-circle inline-block p-1 mr-4" fxLayoutAlign="center center">
								<img class="radius-circle" width="40" height="40" src="{{list.img}}">
							</div>
							<div class="drag-content">
								<h4 class="title">{{list.heading}}</h4>
								<span>{{list.paragraph}}</span>
                     </div>
                  </div>
						</a>
					</div>
				</mat-card>
			</div>
			<div class="app-card" fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50">	
				<mat-card class="p-0">
					<div class="dragarea" dragula="VAMPIRES" [(dragulaModel)]="list2">
						<a class="card-content" *ngFor="let list of list2">
                        <div fxLayoutAlign="start center" class="full-wid">
							<div class="img-thumb-wrap radius-circle inline-block p-1 mr-4" fxLayoutAlign="center center">
								<img class="radius-circle" width="40" height="40" src="{{list.img}}">
							</div>
							<div class="drag-content">
								<h4 class="title">{{list.heading}}</h4>
								<span>{{list.paragraph}}</span>	
                     </div>
                     </div>
						</a>
					</div>
				</mat-card>
			</div>	
		</div>	
	</div>	
</mat-card>	



