<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.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" (click)="toggleBookmark()">
			<button [ngClass]="{'active' : outlet_details.is_bookmarked }">
				<ion-icon name="bookmark"></ion-icon>
			</button>
			<button>
				<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)="toggleBookmark()">
					<ion-icon name="bookmark"></ion-icon>
				</button>
				<button>
					<ion-icon name="share"></ion-icon>
				</button>
			</div>
		</div>
	</div>

	<div class="card-holder">
		<div class="card">
			<h3>
				{{ outlet_details.name }}
				<ion-button size="small" fill="clear">
					<ion-icon name="information-circle"></ion-icon>
				</ion-button>
			</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">
			<span class="count"> {{ temp_outlet_details.menu_items.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 temp_outlet_details.menu_items" [ngClass]="{'hide' : !item.is_vegeterian && show_only_veg }">
				<div class="stats-holder" *ngIf="show_grid">
					<div class="stat">
						<ion-icon name="stopwatch"></ion-icon> <span> {{ item.wait_duration }} min </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_vegeterian, 'veg' : item.is_vegeterian }"></div>
					</div>
				</div>

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

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

					<div class="price">
						<span> ₹ {{ calculateDiscount(item.price, item.discount) }} </span>
						<button class="cart-button" (click)="addToCart(item)" *ngIf="!checkIfPresentInCart(item.id)">
							<ion-icon name="cart"></ion-icon>
						</button>
					</div>
				</div>
			</div>
		</section>
	</div>

	<div class="advertisement">
		<img src="https://d2z1w4aiblvrwu.cloudfront.net/ad/IO1u/mcdonalds-2-mcdouble-and-fries-too-good-to-last-large-6.jpg" alt="">
	</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 === 'duration'}" (click)="sortBy('duration')">
				<div class="icon-holder">
					<ion-icon name="time"></ion-icon>
				</div>
				<span> WAITING TIME </span>
			</button>
			<button [ngClass]="{'active' : selected_sort === 'price'}" (click)="sortBy('price')">
				<div class="icon-holder"> &#8377; </div>
				<span> PRICE </span>
			</button>
		</div>
	</div>

	<div class="common-semi-modal filter-holder" [ngClass]="{'active' : show_filter_popup }">
		<header>
			FILTER <button (click)="show_filter_popup = false"> Done </button>
		</header>
		<ion-list>
			<ion-item *ngFor="let tag of outlet_details.tags" (click)="filterByTag(tag)">
				<ion-checkbox slot="start" [checked]="selected_tag === tag"></ion-checkbox>
				<ion-label> {{ tag }} </ion-label>
			</ion-item>
		</ion-list>
	</div>

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

</ion-content>
