@page "{Transaction_UID:guid}"
@model EnotaryoPH.Web.Pages.Participant.Registration.Steps.TakeSelfieModel
@{
}


<section class="my-5">
    <div class="container">
        <h1>Registration Steps</h1>
        <div class="mt-3">
            <ul id="transactionwizardnav" class="nav nav-pills nav-justified d-block d-sm-flex" role="tablist">
                <li class="nav-item" role="presentation">
                    <a class="nav-link disabled" role="tab" data-bs-toggle="pill" href="#tab-1">
                        <div><span class="badge rounded-pill fs-6 me-1">STEP 1</span></div><span class="text-dark step-text">Choose Identification</span>
                    </a>
                </li>
                <li class="nav-item" role="presentation">
                    <a class="nav-link disabled active" role="tab" data-bs-toggle="pill" href="#" style="border-bottom-width: 3px;border-bottom-color: var(--bs-body-color);">
                        <div class="text-dark"><span class="badge rounded-pill fs-6 me-1">STEP 2</span></div><span class="text-dark step-text">Take Selfie</span>
                    </a>
                </li>
            </ul>
            <div class="tab-content mt-3"></div>
        </div>
        <div class="row">
            <div class="col">
                <form class="mt-3">
                    <div class="ratio ratio-16x9"><iframe allowfullscreen frameborder="0" src="https://www.youtube.com/embed/d1CT5wr0I1c" width="560" height="315"></iframe></div>
                </form>
                <div class="d-flex mt-3">
                    <a class="btn btn-secondary btn-lg me-1" role="button" href="dashboard.html"><i class="fas fa-camera me-2"></i>TAKE PICTURE</a><a class="btn btn-secondary btn-lg" role="button" href="dashboard.html"><i class="fas fa-redo-alt me-2"></i>AGAIN</a>
                    <div class="flex-grow-1"></div><button class="btn btn-primary btn-lg" type="button" data-bs-target="#modal-message" data-bs-toggle="modal">NEXT<i class="fas fa-chevron-right ms-2"></i></button>
                </div>
            </div>
        </div>
    </div>
</section>