<ion-content>
	<div class="header-bar active">
        <div class="heading-holder">
            <button (click)="back()"> <ion-icon name="arrow-back"></ion-icon> </button>
            <h3> Bookmarks </h3>
        </div>
    </div>

	<div class="tabs-holder" [ngClass]="{ 'right' : selected_tab === 'outlets' }">
        <button class="tab" [ngClass]="{ 'active' : selected_tab === 'malls' }"
        (click)="selected_tab = 'malls'"> MALLS </button>
        <button class="tab" [ngClass]="{ 'active' : selected_tab === 'outlets' }"
        (click)="selected_tab = 'outlets'"> OUTLETS </button>
    </div>

	<div *ngIf="selected_tab === 'malls'">
		<div class="results-utilities-holder">
	        <h5 *ngIf="malls"> {{ bookmarked_malls }} MALLS </h5>
	    </div>

	    <ion-list lines="none" class="result-list">
	        <ion-item *ngFor="let mall of malls" (click)="showMallDetails(mall)" [ngClass]="{'show' : mall.is_bookmarked }">
	            <img src="{{ mall.image_url }}" slot="start">
	            <ion-label>
	                <h3> {{ 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.length }}  </strong>
	                    </div>
						<div class="offer">
	                        <ion-icon src="assets/custom/shopping-purse-icon.svg"></ion-icon>
							Shopping Offers: <strong> {{ mall.offers.length }}  </strong>
	                    </div>
	                </div>
	            </ion-label>
	        </ion-item>
	    </ion-list>
	</div>

	<div *ngIf="selected_tab === 'outlets'">
		<div class="results-utilities-holder">
	        <h5 *ngIf="malls"> {{ bookmarked_outlets }} OUTLETS </h5>
	    </div>

		<ion-list lines="none" class="result-list">
	        <div *ngFor="let mall of malls">
				<ion-item *ngFor="let outlet of mall.outlets" [ngClass]="{'show' : outlet.is_bookmarked }"
				(click)="outletDetails(mall.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.outlet_type === 'FOOD'"> <ion-icon name="restaurant"></ion-icon> Food </span>
		                        <span *ngIf="outlet.outlet_type === 'SHOP'"> <ion-icon name="basket"></ion-icon> Shopping </span>
		                        Offers: <strong> {{ outlet.offers.length }}  </strong>
		                    </div>
		                </div>
		            </ion-label>
		        </ion-item>
	        </div>
	    </ion-list>
	</div>

</ion-content>
