{% extends 'components/shell.html' %}
{% block content %}
<section class="login-container site-section site-section--register">
  <h1 class="site-section__heading">Register</h1>
  <div class="site-section__register-cta">
    Already have an account? <a href="{{ url_for('account.get_login', location=location) }}">Log in!</a>
  </div>
  <form
    id="register_form"
    class="form"
    method="POST"
    action="{{ url_for('account.post_register') }}"
    data-pattern="{{ props.username_regex }}"
  >
    <input
      type="hidden"
      id="serialized-favorites"
      name="favorites"
    />
    <input type="hidden" name="location" value="{{location}}" />
    <div class="form__section">
      <label class="form__label" for="new-username">Username:</label>
      <input
        id="new-username"
        class="left-align-text form__input form__input--text"
        type="text"
        name="username"
        value="{{ request.form['username'] }}"
      />
      <ul>
        <li id="username-char-count" class="form__hint">3-15 characters</li>
        <li id="username-allowed-characters" class="form__hint">Contains only letters, numbers, or @+.-</li>
      </ul>
    </div>

    <div class="form__section">
      <label class="form__label" for="new-password">Password:</label>
      <input
        id="new-password"
        class="left-align-text form__input form__input--password"
        type="password"
        name="password"
        autocomplete="new-password"
      >
      <ul>
        <li id="password-char-count" class="form__hint">5+ characters</li>
      </ul>
    </div>
    <div class="form__section">
      <label class="form__label" for="password-confirm">Confirm Password:</label>
      <input
        id="password-confirm"
        class="left-align-text form__input form__input--password"
        type="password"
        name="confirm_password"
        autocomplete="new-password"
      >
      <ul>
        <li id="password-confirm-matches" class="form__hint">Matches password</li>
      </ul>
    </div>
    <div class="form__section">
      <button
        id="submit"
        class="form__button form__button--submit"
        type="submit"
        disabled
      >Register</button>
    </div>
  </form>
</section>

{% endblock %}
