{% extends 'base' %} 
{% block body %}

  <body class="auth__body">
  <main class="auth__container">
    <img src="{{ assets.logo.path }}" alt="logo" class="auth__logo" />
    <h1>Join Survey</h1>
    {% include "error_comp" %}
    <form
      action="{{ page.auth.join }}"
      method="POST"
      class="form"
      accept-charset="utf-8"
    >
      <label class="form__label" for="username">
        Username
        <input
          class="form__input"
          name="username"
          required
          id="username"
          type="text"
        />
      </label>

      <label class="form__label" for="email">
        Email(optional)
        <input
          class="form__input"
          name="email"
          id="email"
          type="email"
        />
      </label>

      <label class="form__label" for="password">
        password
        <input
          class="form__input"
          name="password"
          required
          id="password"
          type="password"
        />
      </label>

      <label class="form__label" for="confirm_password">
        Re-enter Password
        <input
          class="form__input"
          name="confirm_password"
          required
          id="confirm_password"
          type="password"
        />
      </label>

      <div class="form__action-container">
        <a href="/forgot-password">Forgot password?</a>
        <button class="form__submit" type="submit">Join</button>
      </div>
    </form>

    <p class="form__alt-action">
      Already have an account?
      <a href="{{ page.auth.login }}"> Login </a>
    </p>
  </main>
  </body>
{% endblock body %}
