{% extends "public_layout.html" %}
{% block content %}
<section class="public-card auth-card" aria-labelledby="UsernameHeading">
    <div class="clay-icon clay-icon-blue" aria-hidden="true">@</div>
    <p class="eyebrow">Your collector identity</p>
    <h1 id="UsernameHeading">{{ heading }}</h1>
    <p class="public-card-copy">
        Choose the name other collectors will recognize.
    </p>
    <form class="standalone-form" method="post" action="{{ action_url }}">
        <label class="form-field" for="Username">
            <span>Username</span>
            <input id="Username" name="username" required maxlength="32"
                   autocomplete="username" value="{{ username }}"
                   placeholder="Your display name" autofocus>
            <em>Up to 32 characters. Unicode is welcome.</em>
        </label>
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
        <button class="form-submit" type="submit">{{ submit_label }}</button>
    </form>
</section>
{% endblock %}