<ion-content>
    
    <button class="back-button" (click)="back()"> <ion-icon name="close-outline"></ion-icon> </button>

    <h5 *ngIf="!camLoaded"> Loading Camera... </h5>

    <div class="container">
        <canvas id="source-canvas" #sourceCanvasElement width="{{ width }}" height="{{ height }}"></canvas>
    </div>

    <section class="temp-image" [ngClass]="{'active' : !!tempImg }">
        <img *ngIf="tempImg" src="{{ tempImg }}">
    </section>

    <div class="action-buttons" *ngIf="!tempImg">
        <button class="camera-button" (click)="capture()"> <ion-icon name="camera"></ion-icon> </button>
    </div>

    <section class="image-action-buttons" *ngIf="tempImg">
        <button (click)="shareVia('Facebook')"> <ion-icon name="logo-facebook"></ion-icon> </button>
        <button (click)="shareVia('Instagram')"> <ion-icon name="logo-instagram"></ion-icon> </button>
        <button (click)="shareVia('WhastApp')"> <ion-icon name="logo-whatsapp"></ion-icon> </button>
        <button (click)="shareVia('others')"> <ion-icon name="share-social-outline"></ion-icon> </button>
        <button (click)="tempImg = null"> <img src="assets/icons/emojis/thumb-up.png"> </button>
    </section>
</ion-content>
