<ion-content>
    <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> Food Types </h5>
        <ion-button color="default" fill="clear"> SEE ALL </ion-button>
    </div>

    <div class="food-types-holder">
        <button> <ion-icon src="assets/custom/food-3.svg"></ion-icon> <span> Breakfast </span> </button>
        <button> <ion-icon src="assets/custom/food-1.svg"></ion-icon> <span> Pizza </span> </button>
        <button> <ion-icon src="assets/custom/food-2.svg"></ion-icon> <span> Doughnuts </span> </button>
        <button> <ion-icon src="assets/custom/food-4.svg"></ion-icon> <span> Cake </span> </button>
    </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">
        <ion-item *ngFor="let mall of tempMalls" (click)="showMallDetails(mall)">
            <img src="{{ mall.image_url }}" slot="start">
            <ion-label>
                <h3> {{ mall.mall_name }}  <ion-icon name="bookmark" [ngClass]="{'active' : mall.is_bookmarked }"></ion-icon> </h3>
                <p class="description"> {{ mall.description }} </p>
                <div class="offers-holder">
                    <div class="offer">
                        <ion-icon src="assets/custom/restaurant.svg"></ion-icon>
						Food Offers: <strong> {{ mall.offers_count }}  </strong>
                    </div>
                </div>
                <div class="utilities-holder">
                    <div class="container">
                        <div class="utility">
                            <ion-icon name="star"></ion-icon> {{ mall.rating }}
                        </div>
                        <div class="utility">
                            <ion-icon name="pin"></ion-icon> {{ mall.mall_distance }} km
                        </div>
                    </div>

                    <div class="container">
                        <button class="utility-button">
                            <ion-icon name="share"></ion-icon>
                        </button>
                        <a class="utility-button" target="_blank"
                        href="https://maps.google.com/?q=">
                            <ion-icon name="navigate"></ion-icon>
                        </a>
                    </div>
                </div>
            </ion-label>
        </ion-item>
    </ion-list>

    <section class="advertisement" *ngIf="tempMalls.length > 0">
        <div *ngIf="tempMalls[0].advertisement[0]">
            <div class="heading-holder">
                <img [src]="tempMalls[0].advertisement[0].image">
                <header>
                    {{ tempMalls[0].advertisement[0].mallname }} - <span> Get your food faster then any others </span>
                </header>
            </div>
            <p class="description">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta eius molestiae ipsum fugit velit voluptatem vel ad ut debitis earum, nostrum numquam odio maxime eaque corporis! Non et cumque, dignissimos.
            </p>
            <a> Know More </a>
        </div>
    </section>

    <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>
