{% extends 'base.html' %}

{% block body %}

<div class="container mainFormContainer"
    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="/form_signin">
        <p
            style="
                text-align: left;
                font: normal normal normal 16px/25px Poppins;
                letter-spacing: 0px;
                color: #222222;
                opacity: 0.45;
                margin-bottom: 0px !important;
            "
        >Welcome</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: 33px;
                margin-top: 5px;

            "
        >Account Login</p>

        {% with messages = get_flashed_messages() %}
            {% if messages %}
                <div class="rest-message" style="width:360px; text-align: center; margin: auto;margin-top: 20px;">
                    <div class="alert alert-danger" role="alert" id="alert-data">
                        {{ messages[0] }}
                    </div>
                </div>
            {% endif %}
        {% endwith %}

        <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 style="position: relative;">
            <label for="inputPassword" class="sr-only">Password</label>
            <input name="password" type="password" id="inputPassword" class="form-control" placeholder="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;">
        <label for="inputPassword" class="sr-only">Token</label>
        <input name="token" type="text" id="inputClientToken" class="form-control" placeholder="Token">
        <div>
            <a id="forget-password" class="reset_password_button" class="forgot" href="{{ url_for('reset') }}" style="
                float: right;
                text-align: right;
                font: normal normal normal 12px/20px 'Poppins';
                letter-spacing: 0px;
                color: #22222299;
                opacity: 1;
                text-shadow: none;
                border-radius: 0!important;
                text-decoration: none;
                cursor: pointer;
            ">Forgot Password?</a>
        </div>
        <div class="reset-password-container">

            <button class="btn btn-lg btn-primary btn-block mainReset" type="submit" id="MainresetA" style="
            height:60px; width:360px;
            border-radius: 6px!important;
            border-color: #39C6A5 !important;
            background-color: #39C6A5 !important;
            color: white !important;">LOGIN</button>

        </div>

    </form>
    
    {% else %}
    <form class="form-signin-stage-1" method="POST" action="/form_signin_stage_1">
        <p
            style="
                text-align: left;
                font: normal normal normal 16px/25px Poppins;
                letter-spacing: 0px;
                color: #222222;
                opacity: 0.45;
                margin-bottom: 0px !important;
            "
        >Welcome</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: 33px;
                margin-top: 5px;

            "
        >Account Login</p>

        {% with messages = get_flashed_messages() %}
            {% if messages %}
                <div class="rest-message" style="width:360px; text-align: center; margin: auto;margin-top: 20px;">
                    <div class="alert alert-danger" role="alert" id="alert-data">
                        {{ messages[0] }}
                    </div>
                </div>
            {% endif %}
        {% endwith %}

        <label for="inputEmail" class="sr-only">Username</label>

        <input name="username" type="text" id="inputUsername" class="form-control" placeholder="Username"
                required autofocus=""
                style="
                background-color: #FFF !important;
                height: 43px !important;
                color: #8290a3 !important;
                border: 1px solid #dde3ec !important;
                margin-bottom: 10px;
            "
        >
        <label for="inputPassword" class="sr-only">Token</label>
        <input name="token" type="text" id="inputClientToken" class="form-control" placeholder="Token">
        <div>
            <a id="forget-password" class="reset_password_button" class="forgot" href="{{ url_for('reset') }}" style="
                float: right;
                text-align: right;
                font: normal normal normal 12px/20px 'Poppins';
                letter-spacing: 0px;
                color: #22222299;
                opacity: 1;
                text-shadow: none;
                border-radius: 0!important;
                text-decoration: none;
                cursor: pointer;
            ">Forgot Password?</a>
        </div>
        <div class="reset-password-container">

            <button class="btn btn-lg btn-primary btn-block mainReset" type="submit" id="MainresetA" style="
            height:60px; width:360px;
            border-radius: 6px!important;
            border-color: #39C6A5 !important;
            background-color: #39C6A5 !important;
            color: white !important;">LOGIN</button>

        </div>

    </form>

    {% endif %}

</div>

{% endblock body %}