{% extends "base.html" %}

{% block title %}
Claim Curl
{% endblock %}

{% block body %}
<form method="post" action="/claim">
    <div id="main">
        <div class="header">Claim</div>

        <div>
            Curls are single lower-case words. Letters and/or numbers.
        </div>

        <div>
            You will receive a key to be able to control the following curl:
        </div>

        <input type="text" id="curl" placeholder="Write the curl you want here" name="curl">

        <div>
            Solve this slightly annoying captcha:
        </div>

        <div id="captcha">
            {{ captcha_html(captcha)|safe }}
        </div>

        <input type="submit" value="Claim">
    </div>
</form>

<script>
    window.onload = () => {
        let captcha = document.querySelector("#captcha-text")
        captcha.placeholder = "Enter the captcha here"

        let curl = document.querySelector("#curl")
        curl.focus()
    }
</script>
{% endblock %}