@model TakeSelfieImageModel

@Html.ValidationSummary()

<div id="VideoContainer" class="bg-light">
    <video id="Video" height="500" class="d-block mx-auto">Video stream not available.</video>
</div>

<div class="d-none">
    <canvas id="Canvas"></canvas>
</div>

<div id="PhotoContainer" class="photo__container">
    <div class="bg-light">
        <img id="Photo" class="d-block mx-auto img img-fluid" alt="The screen capture will appear in this box.">
    </div>
</div>

<div class="d-flex mt-3">
    <button type="button" class="btn btn-secondary btn-lg me-1" id="TakePictureButton"><i class="fas fa-camera me-2"></i>TAKE PICTURE</button>
    <button type="button" class="btn btn-secondary btn-lg" id="AgainButton"><i class="fas fa-redo-alt me-2"></i>AGAIN</button>
    <div class="flex-grow-1"></div>
    <button type="submit" class="btn btn-primary btn-lg" id="NextButton">NEXT<i class="fas fa-chevron-right ms-2"></i></button>
</div>

<input type="hidden" asp-for="@Model.SelfieBase64Image" />