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

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

    <div class="upfold-holder">
        <img src="{{ mall_details.image_url }}">
        <div class="icons-holder">
            <div>
                <button (click)="back()"> <ion-icon name="arrow-back"></ion-icon> </button>
            </div>
            <div>
                <button [ngClass]="{'active' : mall_details.is_bookmarked }" (click)="toggleBookmark(mall_details)">
                    <ion-icon name="bookmark"></ion-icon>
                </button>
                <button> <ion-icon name="share"></ion-icon> </button>
            </div>
        </div>
        <div class="icons-holder navigate-button">
            <a target="_blank" href="https://maps.google.com/?q={{ mall_details.location.latitude }},{{ mall_details.location.longitude }}">
                <ion-icon name="navigate"></ion-icon>
            </a>
        </div>
    </div>
    <div class="card-holder">
        <div class="card">
            <h3> {{ mall_details.name }} </h3>
            <div class="stats-holder">
                <div class="stat"> <ion-icon name="star"></ion-icon> {{ mall_details.rating }} </div>
                <div class="stat"> <ion-icon name="pin"></ion-icon> {{ mall_details.distance }} km</div>
            </div>
            <p> {{ mall_details.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="mall_details"> {{ mall_details.outlets.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 mall_details.outlets" [ngClass]="{'show' : outlet.is_food_outlet }"
        (click)="outletDetails(mall_details.id, outlet.id)">
            <img src="{{ outlet.image_url }}" slot="start">
            <ion-label>
                <h3>
                    {{ 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">
                    {{ outlet.description }}
                    <button class="share-button">
                        <ion-icon name="share"></ion-icon>
                    </button>
                </p>
                <div class="offers-holder">
                    <div class="offer">
                        <span *ngIf="outlet.is_food_outlet"> <ion-icon name="restaurant"></ion-icon> Food </span>
                        <span *ngIf="!outlet.is_food_outlet"> <ion-icon name="basket"></ion-icon> Shopping </span>
                        Offers: <strong> {{ outlet.offers.length }}  </strong>
                    </div>
                </div>
            </ion-label>
        </ion-item>
    </ion-list>

    <ion-list lines="none" class="result-list" *ngIf="selected_tab === 'shopping'">
        <ion-item *ngFor="let outlet of mall_details.outlets" [ngClass]="{'show' : !outlet.is_food_outlet }">
            <img src="{{ outlet.image_url }}" slot="start">
            <ion-label>
                <h3>
                    {{ 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">
                    {{ outlet.description }}
                    <button class="share-button">
                        <ion-icon name="share"></ion-icon>
                    </button>
                </p>
                <div class="offers-holder">
                    <div class="offer">
                        <span *ngIf="outlet.is_food_outlet"> <ion-icon name="restaurant"></ion-icon> Food </span>
                        <span *ngIf="!outlet.is_food_outlet"> <ion-icon name="basket"></ion-icon> Shopping </span>
                        Offers: <strong> {{ outlet.offers.length }}  </strong>
                    </div>
                </div>
            </ion-label>
        </ion-item>
    </ion-list>


    <div class="advertisement-slots">
        <figure>
            <img src="https://static.couponspy.in/picture/coupon/89472.jpg">
        </figure>

        <figure>
            <img src="https://content.adidas.co.in/static/sign_up_popup/sign_up_popup.jpg">
        </figure>

        <figure>
            <img src="https://fsmc.s3.amazonaws.com/a/90804/adidas.jpg">
        </figure>

        <figure>
            <img src="https://static.couponspy.in/picture/coupon/89472.jpg">
        </figure>

        <figure>
            <img src="https://static.couponspy.in/picture/coupon/89472.jpg">
        </figure>
    </div>

    <div class="sort-filter-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>
            <button [ngClass]="{'active' : selected_sort === 'time'}"
            (click)="sortBy('time')">
                <div class="icon-holder"> <ion-icon name="time"></ion-icon> </div>
                <span> TIME </span>
            </button>
        </div>
    </div>

</ion-content>