{% extends 'user_sign_in_screen.html' %}

{% block user_login_frame %}

<style>
    a.admin_popover_btn:visited {
        color: white;
    }
</style>

<form method="POST" class="login-page-form">
    {% csrf_token %}
    <h2 class="text-center mb-4">Sign in</h2>
    <div class="login-messages">
        {% if messages %}
        {% for message in messages %}
        <div class="alert alert-danger">{{ message }}&nbsp;&nbsp;{{attempts_left}}</div>
        {% endfor %}
        {% endif %}
    </div>
    <div class="form-group">
        <label for="email-id" class="font-weight-500">Email</label>
        <input id="email-id" type="email" name='email-id' title="Email-Id" class="form-control form-control-lg" placeholder="Email address" required />
    </div>
    <div class="form-group">
        <label for="password" class="font-weight-500">Password</label>
        <input id="password" type="password" name="password" title="Password" class="form-control form-control-lg" placeholder="Password" required />
    </div>
    <button type="submit" name="submit" value="LOGIN" title="Click here to Login"
            class="btn btn-primary btn-lg btn-block" onclick="sessionStorage.clear()"> Login <i class="fas fa-arrow-right"></i>
    </button>
   
    <input type="hidden" name="next" value="{{ req.GET.next }}" />
    <div class="text-center mt-3">
        <a href="{% url 'eProc_Login:password_reset' %}" class="font-weight-500 font-size-smaller"> Forgot your password ?</a>
    </div>
    <div class="text-center mt-3">
        <a href="{% url 'eProc_Generate_OTP:admin_login' %}" class="font-weight-500 font-size-smaller"> Login as admin</a>
        <!-- <a href="#" data-toggle="admin_popover" class="font-weight-500 font-size-smaller"> Login as admin</a> -->
    </div>
</form>

<script>

    // const admin_login_url = "{% url 'eProc_Generate_OTP:generate_otp' %}";
    // $(document).ready(function(){
    //     $('[data-toggle="admin_popover"]').popover({
    //         placement : 'bottom',
    //         html : true,
    //         content : '<p> To login, a 4-digit OTP pin will be sent to your registered email. Click the button to continue.</p> <div> <a href="'+ admin_login_url +'" class="btn btn-primary btn-block admin_popover_btn" role="button">Generate OTP</a></div>',
    //     });
    // });
</script>

{% endblock %}