<div class="date-selection" *ngIf="availableDates.length > 1">         
	<span class="header-attribs-title" style="vertical-align: bottom;">Select Date</span>
	<md-select class="date-select-option" name="date" [(ngModel)]="date_selected">
		<md-option *ngFor="let variant of availableDates; let i = index" [value]="i" (click)="loadItem(i,'Date')">
			{{ toDate(variant.value) |date : dispDateFormat}}
	    </md-option>
	</md-select>	
</div>	

<div class="date-selection" *ngIf="availableDates.length == 1">         
	<span class="header-attribs-title" style="vertical-align: bottom;">Date</span>
	<span class="date-select-option" click)="loadItem(0,'Date')">
			{{ toDate(availableDates[0]) |date : dispDateFormat}}
	</span>
</div>

<div class="time-selection" *ngIf="availableTimings.length > 1">
	<span class="header-attribs-title">Time Slot</span>
	<div class="time-select-chips">
		<span class="time-slot-chip" *ngFor="let variant of availableTimings; let j = index" (click)="loadItem(j,'Time')"  [ngClass]="time_selected == j ? 'time-selected' : ''">
			{{ toTime(variant.value) |date : dispTimeFormat}}
		</span>
	</div>
</div>	

<div class="time-selection" *ngIf="availableTimings.length == 1">
	<span class="header-attribs-title">Timing</span>
	<div class="time-select-chips">
		<span class="time-slot-chip selected" (click)="loadItem(0,'Time')">
			{{ toTime(availableTimings[0]) |date : dispTimeFormat}}
		</span>
	</div>
</div>	

<div *ngIf="availableSizes.length > 0">
	<span class="size-title">Select Size </span>
	<div *ngFor="let variant of availableSizes; let i = index"
		class="size-variant">
		<a [ngClass]="size_selected == i ? 'highlight' : ''"
			md-button class="attribute-button"
			(click)="loadItem(i,'Size')"> {{variant.value}} </a>
	</div>
</div>
	
<div *ngIf="availableColors.length > 0">
	<span class="color-title">Select Color </span>
	<div *ngFor="let variant of availableColors; let j = index"
		class="color-variant"
		[ngClass]="color_selected == j ? 'selected' : ''"
		(click)="loadItem(j,'Color')">
		<bb-image [isThumbnail]="true" [refId]='variant.itemCode'
			[refSer]="'M-ITEM'" [object]="'ITEM'" [isSingleImage]="true"></bb-image>
	</div>
</div>