<ion-content [scrollEvents]="true" *ngIf="outlet_details" (ionScroll)="onScroll($event)">
	<div class="overlay" [ngClass]="{ 'active' : show_sort_popup }"></div>

	<div class="header-bar" [ngClass]="{'active' : show_top_bar }">
		<div class="heading-holder">
			<button (click)="back()">
				<ion-icon name="arrow-back"></ion-icon>
			</button>
			<h3> {{ outlet_details.outlet_name }} </h3>
		</div>
		<div class="stats-holder">
			<div class="stat">
				<ion-icon name="star"></ion-icon> {{ outlet_details.rating }}
			</div>
		</div>
		<div class="utilities-buttons-holder">
            <button [ngClass]="{'active' : outlet_details.is_bookmarked }"
            (click)="toggleOutletBookmark()">
				<ion-icon name="bookmark"></ion-icon>
			</button>
			<button (click)="shareOutletDetails()">
				<ion-icon name="share"></ion-icon>
			</button>
		</div>
	</div>

	<div class="upfold-holder">
		<img src="{{ outlet_details.image_url }}">
		<div class="icons-holder">
			<div>
				<button (click)="back()">
					<ion-icon name="arrow-back"></ion-icon>
				</button>
			</div>
			<div class="action-buttons-holder">
				<button [ngClass]="{'active' : outlet_details.is_bookmarked }" (click)="toggleOutletBookmark()">
					<ion-icon name="bookmark"></ion-icon>
				</button>
				<button (click)="shareOutletDetails()">
					<ion-icon name="share"></ion-icon>
				</button>
			</div>
		</div>
	</div>

	<div class="card-holder">
		<div class="card">
			<h3>
				{{ outlet_details.outlet_name }}
			</h3>
			<p> {{ outlet_details.description }} </p>
			<div class="stats-holder">
				<div class="stat">
					<ion-icon name="star"></ion-icon> {{ outlet_details.rating }}
				</div>
			</div>
		</div>
	</div>

	<div class="menu-card-holder">
		<header>
			<div>
				<!-- <button color="default" fill="clear" (click)="show_filter_popup = true"> FILTER </button> -->
				<button color="default" fill="clear" (click)="show_sort_popup = true"> SORT </button>
			</div>
			<div class="toggle" (click)="show_only_veg = !show_only_veg"> VEG MENU <ion-toggle [(ngModel)]="show_only_veg"></ion-toggle>
			</div>
		</header>

		<div class="details-header" *ngIf="outlet_details.menuitems">
			<span class="count"> {{ outlet_details.menuitems.length }} FOOD ITEMS </span>
			<div class="display-formats">
				<button [ngClass]="{'active' : !show_grid }" (click)="show_grid = false">
					<ion-icon name="list"></ion-icon>
				</button>
				<button [ngClass]="{'active' : show_grid }" (click)="show_grid = true">
					<ion-icon name="grid"></ion-icon>
				</button>
			</div>
		</div>

		<section class="items-holder" [ngClass]="{'list-mode' : !show_grid }">

			<div class="item" *ngFor="let item of outlet_details.menuitems" [ngClass]="{'hide' : !item.is_vegetarian && show_only_veg }">
				<div class="stats-holder" *ngIf="show_grid">
					<div class="stat">
						<ion-icon name="stopwatch"></ion-icon> <span> {{ item.wait_duration }} </span>
					</div>
					<div class="stat">
						<ion-icon name="star"></ion-icon> <span> {{ item.rating }} </span>
					</div>
				</div>
				<div class="image-holder">
					<img [src]="item.image_url">
					<div class="label-holder">
						<div class="category" [ngClass]="{'non-veg' : !item.is_vegetarian, 'veg' : item.is_vegetarian }"></div>
					</div>
				</div>

				<div class="content-holder">
					<h5> {{ item.menu_item_name }} </h5>

					<div class="stats-holder" *ngIf="!show_grid">
						<div class="stat">
							<ion-icon name="stopwatch"></ion-icon> <span> {{ item.wait_duration }} </span>
						</div>
						<div class="stat">
							<ion-icon name="star"></ion-icon> <span> {{ item.rating }} </span>
						</div>
					</div>

					<div class="price">
						<span> ₹ {{ item.item_price - item.item_discount }} </span>
						<button class="cart-button" (click)="addToCart(item)" *ngIf="!isItemPresentInCart(item.menuitem_id)">
							<ion-icon name="cart"></ion-icon>
						</button>
					</div>
				</div>
			</div>
		</section>
	</div>

	<div class="common-semi-modal sort-holder" [ngClass]="{'active' : show_sort_popup }">
		<header>
			SORT <button (click)="show_sort_popup = false"> Done </button>
		</header>

		<div class="sort-buttons-holder">
			<button [ngClass]="{'active' : selected_sort === 'name'}" (click)="sortBy('name')">
				<div class="icon-holder"> A-Z </div>
				<span> NAME </span>
			</button>
			<button [ngClass]="{'active' : selected_sort === 'rating'}" (click)="sortBy('rating')">
				<div class="icon-holder">
					<ion-icon name="star"></ion-icon>
				</div>
				<span> RATING </span>
			</button>
			<button [ngClass]="{'active' : selected_sort === 'price'}" (click)="sortBy('price')">
				<div class="icon-holder"> &#8377; </div>
				<span> PRICE </span>
			</button>
		</div>
	</div>

	<ion-fab *ngIf="userCart.orderedlist.length > 0" (click)="goToCart()">
		<ion-fab-button>
			<ion-icon name="cart"></ion-icon>
		</ion-fab-button>
	</ion-fab>

</ion-content>
