<ion-header>
    <ion-toolbar>
        <ion-title *ngIf="title">{{ title | translate }}</ion-title>

        <ion-buttons slot="end">
            <ion-button (click)="cancel()">{{ 'core.cancel' | translate }}</ion-button>
            <ion-button *ngIf="hasCaptured" (click)="done()">{{ 'core.done' | translate }}</ion-button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-content>
    <core-loading [hideUntil]="readyToCapture">
        <div class="core-av-wrapper">
            <!-- Video stream for image and video. -->
            <video *ngIf="!isAudio" [hidden]="hasCaptured" class="core-webcam-stream" autoplay #streamVideo></video>

            <!-- For video recording, use 2 videos and show/hide them because a CSS rule caused problems with the controls. -->
            <video *ngIf="isVideo" [hidden]="!hasCaptured" class="core-webcam-video-captured" controls #previewVideo></video>

            <!-- Canvas to treat the image and an img to show the result. -->
            <canvas *ngIf="isImage" class="core-webcam-image-canvas" #imgCanvas></canvas>
            <img *ngIf="isImage" [hidden]="!hasCaptured" class="core-webcam-image" alt="{{ 'core.capturedimage' | translate }}"
                #previewImage>

            <!-- Recording audio. -->
            <div *ngIf="isAudio" class="core-audio-record-container">
                <!-- Canvas to show audio waves when recording audio in browser. -->
                <canvas [hidden]="hasCaptured || isCordovaAudioCapture" class="core-audio-canvas" #streamAudio></canvas>

                <!-- Button to start/stop in mobile devices. -->
                <ion-button fill="clear" *ngIf="!hasCaptured && isCordovaAudioCapture" (click)="actionClicked()"
                    [attr.aria-label]="title">
                    <ion-icon *ngIf="!isCapturing" name="fa-microphone" slot="icon-only"></ion-icon>
                    <ion-icon *ngIf="isCapturing" name="fa-square" slot="icon-only"></ion-icon>
                </ion-button>

                <!-- Audio player to listen to the result. -->
                <audio [hidden]="!hasCaptured" class="core-audio-captured" controls #previewAudio></audio>
            </div>
        </div>
    </core-loading>
</ion-content>

<ion-footer *ngIf="readyToCapture">
    <ion-row>
        <ion-col></ion-col>
        <ion-col class="ion-text-center">
            <ion-button fill="clear" *ngIf="!hasCaptured && !isCordovaAudioCapture" (click)="actionClicked()"
                [attr.aria-label]="title">
                <ion-icon *ngIf="!isCapturing && isAudio" name="fa-microphone" slot="icon-only"></ion-icon>
                <ion-icon *ngIf="!isCapturing && isVideo" name="fa-video" slot="icon-only"></ion-icon>
                <ion-icon *ngIf="isImage" name="fa-camera" slot="icon-only"></ion-icon>
                <ion-icon *ngIf="isCapturing" name="fa-square" slot="icon-only"></ion-icon>
            </ion-button>
            <ion-button fill="clear" *ngIf="hasCaptured" (click)="discard()" [attr.aria-label]="'core.discard' | translate">
                <ion-icon color="danger" name="fa-trash" slot="icon-only"></ion-icon>
            </ion-button>
        </ion-col>
        <ion-col class="ion-padding ion-text-end chrono-container">
            <core-chrono *ngIf="!isImage" [hidden]="hasCaptured" [running]="isCapturing" [reset]="resetChrono" [endTime]="maxTime"
                (onEnd)="stopCapturing()">
            </core-chrono>
        </ion-col>
    </ion-row>
</ion-footer>

