{% extends "limited_width.html.j2" %}

{% block page_content %}
<div class="col s12 m4">
  <h3>New to Opaque?</h3>
  <p>It's free to join and easy to use. Continue on to our registration page to create your Opaque account.</p>
  <p><a href="{{ url_for('auth.register') }}" class="waves-effect waves-light btn">Registration</a>
</div>

<div class="col s12 m8">
  <div class="card small">
    <form method="POST">
      <div class="card-content">
        {{ form.hidden_tag() }}
        <div class="input-field">
          <i class="material-icons prefix">person</i>
          {{ form.login(class='validate', placeholder='Email address or username') }}
          {{ form.login.label }}
          {% for error in form.login.errors %}
            <span class="helper-text red-text">{{ error }}</span>
          {% endfor %}
        </div>
        <div class="input-field">
          <i class="material-icons prefix">vpn_key</i>
          {{ form.password(class='validate') }}
          {{ form.password.label }}
          {% for error in form.password.errors %}
            <span class="helper-text red-text">{{ error }}</span>
          {% endfor %}
        </div>
        <a href="{{ url_for('auth.password_reset_request') }}" class="left">Forgot your password?</a>
        <div class="switch right">
          <label>
            Remember me
            {{ form.remember_me() }}
            <span class="lever"></span>
          </label>
        </div>
      </div>
      <div class="card-action">
        {{ form.submit(class='btn right') }}
      </div>
    </form>
  </div>
</div>
{% endblock %}