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

<ion-content>
    <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
        <ion-refresher-content
            pullingIcon="arrow-down"
            pullingText="Pull to refresh"
            refreshingSpinner="circles"
            refreshingText="Refreshing...">
        </ion-refresher-content>
    </ion-refresher>
    
    <div class="overlay" [ngClass]="{ 'active' : show_sort_popup }"></div>

    <section class="header-bar">
        <h2 *ngIf="!showSearchBar"> Find malls near you </h2>
        <input type="text" *ngIf="showSearchBar" placeholder="Search Malls" [(ngModel)]="searchTerm" (input)="searchAllMalls()" autocomplete="off" #searchbar>
        <button (click)="toggleSearchBar()">
            <ion-icon *ngIf="!showSearchBar" src="assets/custom/search.svg"></ion-icon>
            <ion-icon *ngIf="showSearchBar" name="close" mode="md"></ion-icon>
        </button>
    </section>

    <div class="top-bar-holder">
        <div class="tabs-holder">
            <button (click)="selected_tab = 'you'" class="tab" [ngClass]="{'active' : selected_tab === 'you'}"> For you </button>
            <button (click)="selected_tab = 'recomended'" class="tab" [ngClass]="{'active' : selected_tab === 'recomended'}"> Recommended </button>
            <button (click)="selected_tab = 'trendy'" class="tab" [ngClass]="{'active' : selected_tab === 'trendy'}"> Trendy </button>
            <button (click)="selected_tab = 'recent'" class="tab" [ngClass]="{'active' : selected_tab === 'recent'}"> Recent </button>
        </div>
    </div>

	<div class="results-utilities-holder no-padding">
        <h5> Categories </h5>
        <ion-button disabled color="default" fill="clear"> SEE ALL </ion-button>
    </div>

    <div class="food-types-holder">
        <ng-container *ngFor="let foodType of foodTypes">
            <button (click)="getMallsByFoodType(foodType.name)" [ngClass]="{'active' : selectedFoodType === foodType.name}"> 
                <img [src]="foodType.icon" alt=""> <span> {{ foodType.name }} </span> 
            </button>
        </ng-container>
    </div>

    <div class="results-utilities-holder">
        <h5 *ngIf="tempMalls"> {{ tempMalls.length }} MALLS </h5>
        <ion-button color="default" fill="clear" (click)="show_sort_popup = true"> SORT / FILTER </ion-button>
    </div>

    <ion-list lines="none" class="result-list">
        <ng-container *ngFor="let mallData of tempMalls;">
            <ion-item *ngIf="mallData.mall.outlet && mallData.mall.outlet.length > 0">
                <img src="{{ mallData.mall.image_url }}" slot="start">
                <ion-label>
                    <h3> 
                        <span (click)="showMallDetails(mallData)"> {{ mallData.mall.mall_name }} </span>  
                        <ion-icon (click)="toggleMallBookmark(mallData)" name="bookmark" 
                        [ngClass]="{'active' : mallData.mall.is_bookmarked }"></ion-icon> 
                    </h3>
                    <p class="description" (click)="showMallDetails(mallData)"> {{ mallData.mall.description }} </p>
                    <div class="offers-holder">
                        <div class="offer">
                            <ion-icon src="assets/custom/restaurant.svg"></ion-icon>
                            Offers: <strong> {{ mallData.mall.offers_count }}  </strong>
                        </div>
                    </div>
                    <div class="utilities-holder">
                        <div class="container">
                            <div class="utility">
                                <ion-icon name="star"></ion-icon> {{ mallData.mall.rating }}
                            </div>
                            <div class="utility">
                                <ion-icon name="pin"></ion-icon> {{ mallData.mall.mall_distance }} km
                            </div>
                        </div>
    
                        <div class="container">
                            <button class="utility-button" (click)="shareMallDetails(mallData)">
                                <ion-icon name="share"></ion-icon>
                            </button>
                            <a class="utility-button" target="_blank"
                            href="https://maps.google.com/?q={{ mallData.latitude }},{{ mallData.longitude }}">
                                <ion-icon name="navigate"></ion-icon>
                            </a>
                        </div>
                    </div>
                </ion-label>
            </ion-item>
        </ng-container>        
    </ion-list>    

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

</ion-content>