mall-app/src/app/mall-details/mall-details.page.html

<ion-content [scrollEvents]="true" *ngIf="mallDetails" (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> {{ mallDetails.mall.mall_name }} </h3>
        </div>
        <div class="stats-holder">
            <div class="stat"> <ion-icon name="star"></ion-icon> {{ mallDetails.mall.rating }} </div>
            <div class="stat"> <ion-icon name="pin"></ion-icon> {{ mallDetails.mall.mall_distance }} km</div>
        </div>
        <div class="utilities-buttons-holder">
            <button [ngClass]="{'active' : mallDetails.mall.is_bookmarked }"> <ion-icon name="bookmark"></ion-icon> </button>
            <button (click)="shareMallDetails(mallDetails)"> <ion-icon name="share"></ion-icon> </button>
            <a target="_blank" href="https://maps.google.com/?q={{ mallDetails.latitude }},{{ mallDetails.longitude }}">
                <ion-icon name="navigate"></ion-icon>
            </a>
        </div>
    </div>

    <div class="upfold-holder">
		<img [src]="mallDetails.mall.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' : mallDetails.mall.is_bookmarked }">
                    <ion-icon name="bookmark"></ion-icon>
                </button>
                <button (click)="shareMallDetails(mallDetails)"> <ion-icon name="share"></ion-icon> </button>
				<a target="_blank" href="https://maps.google.com/?q={{ mallDetails.latitude }},{{ mallDetails.longitude }}">
	                <ion-icon name="navigate"></ion-icon>
	            </a>
            </div>
        </div>
    </div>
    <div class="card-holder">
        <div class="card">
            <h3> {{ mallDetails.mall.mall_name }} </h3>
			<p> {{ mallDetails.mall.mall_address }} </p>
            <div class="stats-holder">
                <div class="stat"> <ion-icon name="star"></ion-icon> {{ mallDetails.mall.rating }} </div>
                <div class="stat"> <ion-icon name="pin"></ion-icon> {{ mallDetails.mall.mall_distance }} km</div>
            </div>
            <p> {{ mallDetails.mall.description }} </p>
        </div>
    </div>

    <div class="tabs-holder" [ngClass]="{ 'right' : selected_tab === 'shopping' }">
        <button class="tab" [ngClass]="{ 'active' : selected_tab === 'food' }"
        (click)="selected_tab = 'food'"> FOOD OUTLETS </button>
        <button class="tab" [ngClass]="{ 'active' : selected_tab === 'shopping' }"
        (click)="selected_tab = 'shopping'"> SHOPS </button>
    </div>

    <div class="results-utilities-holder">
        <h5 *ngIf="mallDetails"> {{ mallDetails.mall.outlet.length }} OUTLETS </h5>
        <ion-button color="default" fill="clear" (click)="togglePopup()"> SORT / FILTER </ion-button>
    </div>

    <ion-list lines="none" class="result-list" *ngIf="selected_tab === 'food'">
        <ion-item *ngFor="let outlet of mallDetails.mall.outlet">
            <img src="{{ outlet.image_url }}" slot="start">
            <ion-label>
                <h3 (click)="outletDetails(outlet)">
                    {{ outlet.outlet_name }}
                    <div class="rating-holder">
                        <ion-icon name="star"></ion-icon> {{ outlet.rating }}
                    </div>
                    <ion-icon name="bookmark" [ngClass]="{'active' : outlet.is_bookmarked }"></ion-icon>
                </h3>
                <p class="description">
                    <span (click)="outletDetails(outlet)"> {{ outlet.description }} </span>                    
                    <button class="share-button"
                    (click)="shareOutletDetails(outlet)">
                        <ion-icon name="share"></ion-icon>
                    </button>
                </p>
                <div class="offers-holder">
                    <div class="offer">
                        <span *ngIf="outlet.outlet_type"> <ion-icon name="restaurant"></ion-icon> Food </span>
                        <span *ngIf="!outlet.outlet_type"> <ion-icon name="basket"></ion-icon> Shopping </span>
                        Offers: <strong> {{ outlet.offers ? outlet.offers.length : 0 }}  </strong>
                    </div>
                </div>
            </ion-label>
        </ion-item>
    </ion-list>

    <div class="results-utilities-holder" *ngIf="mallDetails.mall.advertisement">
        <h5> {{ mallDetails.mall.advertisement.length }} ADVERTISEMENTS </h5>
    </div>

    <section class="common-advertisement-banner" *ngIf="mallDetails.mall.advertisement">
        <a href="#" *ngFor="let advertisement of mallDetails.mall.advertisement">
            <figure>
                <img [src]="advertisement.image">
            </figure>            
        </a>
    </section>

    <div class="common-semi-modal sort-holder" [ngClass]="{'active' : show_sort_popup }">
        <header>
            Sort / Filter <button (click)="togglePopup()"> 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>
        </div>
    </div>

</ion-content>