<% title = trans.auth.messages.otp_verification.title + ' - ' + companyInfo.NAME %>
<div class="row m-0">
    <div class="col-12 p-0">    
        <div class="login-card login-dark">
            <div>
                <a class="logo" href="javascript:;">
                    <!-- <img class="img-fluid for-light m-auto" src="/backend/images/logo/logo1.png" alt="looginpage">
                    <img class="img-fluid for-dark" src="/backend/images/logo/logo-dark.png" alt="logo"> -->
                    <h3><%= companyInfo.NAME %></h3>
                </a>
                <div class="login-main"> 
                    <form class="theme-form" id="otpForm" action="<%- '/admin/verify-otp' %>" method="POST">
                        <input type="hidden" name="userid" id="userid" value="">
                        <div class="otp-icon">
                            <img src="/backend/images/login/otp-img.svg" alt="">
                        </div>
                        <h2 class="text-center"><%= trans.auth.messages.otp_verification.heading %></h2>
                        <p class="text-center"><%= trans.auth.messages.otp_verification.subheading %></p>

                        <%- include('./partials/language-selector') %>
                        
                        <!-- <label class="col-form-label">OTP</label> -->
                        <!-- <input type="text" class="form-control" id="otp" placeholder="Enter OTP" name="otp" required> -->
                        <div class="form-group mt-3 verify-box">
                            <input type="text" id="otp" name="otp" maxlength="6" oninput="updateOTP()" />
                            <div class="otp-container" onclick="focusOTPInput(event)">
                                <div class="otp-digit" id="digit1"></div>
                                <div class="otp-digit" id="digit2"></div>
                                <div class="otp-digit" id="digit3"></div>
                                <div class="otp-digit active" id="digit4"></div>
                                <div class="otp-digit" id="digit5"></div>
                                <div class="otp-digit" id="digit6"></div>
                            </div>
                        </div>
                        <div class="form-group mb-0 checkbox-checked">
                            <div class="text-end mt-3">
                                <button class="btn btn-primary btn-block w-100" type="submit"><%= trans.auth.messages.otp_verification.submit_btn_title %></button>
                            </div>
                        </div>
                        <div class="login-social-title">
                            <h6><%= trans.auth.messages.otp_verification.didnt_receive_otp %></h6>
                            <p class="text-center">
                                <a href="javascript:;" class="link resendOTP">
                                    <%= trans.auth.messages.otp_verification.resend_btn_title %>
                                </a>
                            </p>
                        </div>

                        <p class="mt-4 mb-0 text-center">
                            <%= trans.auth.messages.otp_verification.need_to_go_back %> 
                            <a class="ms-2" href="/admin/login"><%= trans.global.back %></a>
                        </p>
                    </form>                    
                </div>
            </div>
        </div>
    </div>
</div>  