<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Materialize CSS -->
  <link rel="stylesheet" href="{{ url_for('static', filename='materialize.min.css') }}">
  <script src="{{ url_for('static', filename='materialize.min.js') }}"></script>
  <!-- My CSS -->
  <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
  <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
  <title>Create account</title>
</head>
<body>
  <div class="main-view">
    <div class="auth-panel-base">
      <div class="auth-panel-logo-wrapper">
        <img src="{{ url_for('static', filename='do_as_you_wish.jpeg') }}">
      </div>
      <div class="auth-panel-content-wrapper">
        <div class="auth-content-headers-wrapper">
          <div class="auth-cotent-header-title-wrapper">
            <h1>Create your account</h1>
          </div>
          <div class="auth-content-header-subtext-wrapper">
            <span class="h1-subtext">to continue to Chives Exchange</span>
          </div>
        </div>
        <div class="auth-content-form-wrapper">
          <form method="POST" action="/auth/register">
            {{ form.hidden_tag() }}
            <div class="auth-content-form-input-wrapper">
              <div class="form-input-username-cluster-wrapper">
                <div class="username-input-wrapper">
                  <div>{{ form.username(placeholder="Username") }}</div>
                  <div>
                    {% if form.username.errors %}
                      <ul>{% for error in form.username.errors %}<li style="color: red;">{{ error }}</li> {% endfor %}</ul>
                    {% else %}
                      <small>You can user letters, numbers, and periods.</small></div>
                    {% endif %}
                </div>
              </div>
              <div class="form-input-password-cluster-wrapper">
                <div class="password-duplet-inputs-wrapper">
                  <div class="password1-wrapper">{{ form.password(placeholder="Password") }}</div>
                  <div class="password2-wrapper">{{ form.confirm(placeholder="Confirm password") }}</div>
                </div>
                <div>
                  {% if form.password.errors %}
                    <ul>{% for error in form.password.errors %}<li style="color: red;">{{ error }}</li> {% endfor %}</ul>
                  {% else %}
                    <small>Use 8 or more characters with a mix of letters, numbers & symbols</small>
                  {% endif %}
                </div>
              </div>
            </div>
            <div class="auth-content-form-actions-wrapper">
              <div class="auth-content-form-alternative-action-wrapper">
                <a href="{{ url_for('auth.login') }}">Sign-in instead</a>
              </div>
              <div class="auth-content-form-canonical-action-wrapper">
                {{ form.submit(class="waves-effect waves-light btn") }}
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</body>
</html>