{% extends 'layouts/app.html' %}
{% import 'macros/form.html' as f with context %}

{% block title %}Thanks for signing up{% endblock %}

{% block body %}
  <div class="row">
    <div class="col-md-5">
      <h2 class="sm-margin-bottom">Ready to upgrade?</h2>

      <p class="margin-bottom">
        Hi. You're only about a minute away from being a paid member which
        provides you many amazing things.
      </p>

      <p class="small">
        Take a look at what you'll gain by
        <a href="{{ url_for('billing.pricing') }}">becoming a paid member</a>.
      </p>
    </div>
    <div class="col-md-5 col-md-push-1 col-md-offset-1 well">
      {% call f.form_tag('user.welcome') %}
        <legend>Pick a username</legend>
        <p class="small help-block sm-margin-bottom">
          You can only pick this once, it will be your name on the leaderboard.
        </p>

        {% call f.form_group(form.username, css_class='sm-margin-bottom',
                             autofocus='autofocus') %}
        {% endcall %}

        <div class="row">
          <div class="col-md-6">
            <button type="submit" class="btn btn-primary btn-block">
              Save
            </button>
          </div>
          <div class="col-md-6">
            <div class="visible-xs visible-sm sm-margin-top"></div>
            <a href="{{ url_for('user.settings') }}"
               class="btn btn-default btn-block">
              Do it later
            </a>
          </div>
        </div>
      {% endcall %}
    </div>
  </div>
{% endblock %}