{% extends 'base.html' %}

{% block body %}

<div class="container mainFormContainer mainResetForm"
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>

    {% if username %}
    <form class="form-signin" method="POST" action="/resetBtnForm">
        <p
            style="
                text-align: left;
                font: normal normal normal 16px/25px Poppins;
                letter-spacing: 0px;
                color: #222222;
                opacity: 0.45;
                margin-bottom: 0px !important;
            "
        >Need a new Password?</p>
        <p class="account"
            style="
                text-align: left;
                font: normal normal 600 24px/35px Poppins;
                letter-spacing: 0px;
                color: #343434;
                text-transform: capitalize;
                opacity: 1;
                margin-bottom: 20px;
            "
        >Change Password</p>

        {% 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 %}
        
        <div style="position: relative;">
        <label for="inputEmail" class="sr-only">Username</label>

        <input name="username" type="text" id="inputUsername" class="form-control" placeholder="Username"
                required autofocus=""
                value="{{ username }}"
                readonly
                style="
                background-color: #FFF !important;
                height: 43px !important;
                color: #8290a3 !important;
                border: 1px solid #dde3ec !important;
                margin-bottom: 10px;
            "
        >
        </div>

        <div style="position: relative;">
            <label for="inputPassword" class="sr-only">Password</label>
            <input name="password" type="password" id="inputPassword" class="form-control" placeholder="Current Password"
                required
                style="
                background-color: #FFF !important;
                height: 43px !important;
                color: #8290a3 !important;
                border: 1px solid #dde3ec !important;"
            >
            <i class="fa fa-eye" title="show password" id="toggle_password"
                style="cursor: pointer; position: absolute; right: 10px; top: 15px; z-index: 999999; color: #989898;"></i>
        </div style="position: relative;">
        
        <div style="position: relative;">
        <label for="newInputPassword" class="sr-only">Password</label>
        <input name="newPassword" type="password" id="newInputPassword" class="form-control" placeholder="New Password"
               required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
               title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters"
               style="
               background-color: #FFF !important;
               height: 43px !important;
               color: #8290a3 !important;
               border: 1px solid #dde3ec !important;
               margin-bottom: 10px;"
           >
           <i class="fa fa-eye" title="show password" id="new_toggle_password"
               style="cursor: pointer; position: absolute; right: 10px; top: 15px; z-index: 999999; color: #989898;"></i>
        </div>
        <div style="position: relative;">
        <label for="confirmInputPassword" class="sr-only">Password</label>
        <input name="confirmPassword" type="password" id="confirmInputPassword" class="form-control"
               placeholder="Confirm Password"
               style="
               background-color: #FFF !important;
               height: 43px !important;
               color: #8290a3 !important;
               border: 1px solid #dde3ec !important;"
               required>
               <i class="fa fa-eye" title="show password" id="confirm_toggle_password"
               style="cursor: pointer; position: absolute; right: 10px; top: 15px; z-index: 999999; color: #989898;"></i>
        </div>


        <label for="inputPassword" class="sr-only">Token</label>
        <input type="text" id="inputClientToken" class="form-control" placeholder="Token">
        <div class="btn-reset-container">
            <button class="btn btn-lg btn-primary btn-block mainReset" type="submit" id="resetBtnForm"
            style="
                width:360px; height:60px;
                border-radius: 6px!important;
                border-color: #39C6A5 !important;
                background-color: #39C6A5 !important;
                color: white !important;">Reset password
            </button>
        </div>

    </form>

    {% else %}
    <div class="alert alert-danger" role="alert">
        Unauthorized access.
    </div>
    
    {% endif %}

{% endblock body %}