{% extends "withoutnav_template.html" %}
{% from "components/page-footer.html" import page_footer %}
{% from "components/form.html" import form_wrapper %}

{% block per_page_title %}
Create an account
{% endblock %}

{% block maincolumn_content %}

<div class="grid-row">
  <div class="grid-col-8">
    <h1 class="font-body-2xl margin-bottom-3">Create an account</h1>
    <p>
      Your account will be created with this email address:
      <span class="nowrap">{{invited_user.email_address}}</span>
    </p>
    {% call form_wrapper() %}
      {#
        This field is to enable password managers to capture the username as
        well as the password, but should not be visible to users, nor should
        the view process the input.
      #}
      <div class="usa-sr-only">
        <label for="username" aria-hidden="true">Email</label>
        <input type="email" name="username" id="username" value="{{ invited_user.email_address }}" disabled="disabled" tabindex="-1" aria-hidden="true" autocomplete="username" />
      </div>
      {{ form.name(param_extensions={}) }}
      {% if invited_user.auth_type == 'sms_auth' %}
        <div class="extra-tracking">
          {{ form.mobile_number(param_extensions={
              "hint": {"text": "We’ll send you a security code by text message"}
          }) }}
        </div>
      {% endif %}
      {{ form.password(param_extensions={
          "hint": {"text": "At least 8 characters"},
          "autocomplete": "new-password"
        }) }}
      {{ page_footer("Continue") }}
      {{form.service}}
      {{form.email_address}}
      {{form.auth_type}}
    {% endcall %}
  </div>
</div>

{% endblock %}