<ng-container *ngIf="!hideAll">
    <section class="social-login" [ngClass]="{'active' : !user }">
        <section class="login-box">
            <button (click)="login()"> Login with <ion-icon name="logo-facebook"></ion-icon> </button>        
        </section>
    </section>

    <!-- <input type="text" *ngIf="token" [(ngModel)]="token.token"> -->
    
    
    <section class="social-login" [ngClass]="{'active' : showLogout && user }">
        <section class="login-box" *ngIf="user">
            <button (click)="logout()"> 
                Logout & Exit from "{{ user.name }}"?                
            </button>
            <button (click)="showLogout = false">
                <ion-icon name="close-circle-outline"></ion-icon>
            </button>
        </section>
    </section>
    
    <section class="profile" *ngIf="user" (click)="showLogout = true">
        <img [src]="user.picture.data.url" alt="profile-image">
        <p> {{ user.name }} </p>
    </section>    
</ng-container>