<ion-content>
    <section class="profile">
        <div class="profile-details-holder">
            <figure class="profile-image">
                <img src="assets/custom/name.svg" alt="">
            </figure>
            <div class="content">
                <h5> {{ userInfo.name }}
                    <button fill="clear" color="light"> Edit </button>
                </h5>
                <p>
                    {{ userInfo.mobile }}
                </p>
                <p>
                    {{ userInfo.email }}
                </p>
            </div>
        </div>
        <div class="location-details">
            <div class="location"> Nagarbhavi, Bengaluru KA </div>
            <ion-button size="small"> <ion-icon name="locate"></ion-icon> </ion-button>
        </div>
    </section>

    <div class="tabs-holder">
        <div class="tab" [ngClass]="{'active' : selected_tab === 'MY ORDERS'}"
        (click)="selected_tab = 'MY ORDERS'">
            <figure>
                <img src="assets/custom/dinner.svg">
            </figure>
            <span> MY ORDERS </span>
        </div>
        <div class="tab" [ngClass]="{'active' : selected_tab === 'REFER AND EARN'}"
        (click)="selected_tab = 'REFER AND EARN'">
            <figure>
                <img src="assets/custom/profit.svg">
            </figure>
            <span> REFER &amp; EARN </span>
        </div>
        <div class="tab" [ngClass]="{'active' : selected_tab === 'NOTIFICATION'}"
        (click)="selected_tab = 'NOTIFICATION'">
            <figure>
                <img src="assets/custom/hotel-bell.svg">
            </figure>
            <span> NOTIFICATION </span>
        </div>
        <div class="tab" (click)="logout()">
            <figure>
                <img src="assets/custom/logout.svg">
            </figure>
            <span> LOGOUT </span>
        </div>
    </div>

	<app-notifications *ngIf="selected_tab === 'NOTIFICATION'"></app-notifications>
	<app-refer *ngIf="selected_tab === 'REFER AND EARN'"></app-refer>
	<app-orders *ngIf="selected_tab === 'MY ORDERS'"></app-orders>

</ion-content>
