{% extends 'base.html' %}

{% block body %}

<div class="container otpSection"
style="
    background-color: #fff;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
    border-radius: 7px;
    width: 400px;
    margin: 40px auto 10px;
    padding: 10px 20px 30px;
    overflow: hidden;
    position: relative;
">

    <div class="imageContainer">
        <img class="mb-4 inv-logo" src="{{ url_for('static', filename='images/invisily-logo.png')}}" alt="Invisily">
    </div>
    <form class="form-reset" method="POST" action="/otpConfirm">
        <h1 class="h3 mb-3 font-weight-normal">Enter OTP</h1>
        {% with messages = get_flashed_messages() %}
            {% if messages %}
                <div class="rest-message" style="width: 360px;margin: auto;margin-top: 20px;">
                    <div class="alert alert-danger" role="alert">
                        {{ messages[0] }}
                    </div>
                </div>
            {% endif %}
        {% endwith %}


        <input name="otp" type="text" id="otp" class="form-control" placeholder="Enter Otp" required="" minlength="6" maxlength="6">


        <div class="btn-reset-container">
            <button class="btn btn-lg btn-primary btn-block otpConfirm" type="submit" id="otpConfirm">Confirm</button>
            <button class="btn btn-lg btn-primary btn-block otp_reset_btn" type="button" id="otp_reset_btn" onclick="window.location.href='/'">Cancel</button>
        </div>

    </form>

</div>

{% endblock body %}