{% extends "components/_base.html" %}

{% block page_head %}
<title> Verification Page </title>
<meta name="description" content="">
<script async src="https://www.google.com/recaptcha/api.js"></script>
<script async>
    function onSubmit(token){document.getElementById("verify_form").submit();}
</script>
{% endblock %}

{% block page_content %}

<!-- <h1>Sorry, your request not allowed</h1> -->
<section class="col-3 bg-dark text-white pt-4 pb-5">
    <div class="justify-content-center">
        <h1 class="text-primary">Verification Page</h1>
        <form id="verify_form" action="{{ url_for('verify') }}" method="post">
            <input type="hidden" id="captcha_id" name="captcha_id" value="{{ captcha_id }}"/>
            <img class="col-12 rounded d-block" src="/static/images/captcha{{ captcha_id }}.png" alt="captcha">
            <input type="text" class="form-control" name="captcha" placeholder="Type Captcha">
            <br>
            <!-- <button type="submit" class="g-recaptcha btn btn-primary" 
                data-sitekey="{{ site_key }}" 
                data-callback="onSubmit" 
                data-action="submit">Submit
            </button> -->
            <!-- <div class="g-recaptcha" data-sitekey="{{ site_key }}"></div> -->
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>
</section>
{% endblock %}