{% extends "nopaque.html.j2" %}
{% import 'materialize/wtf.html.j2' as wtf %}

{% block nav_content %}
{% include 'auth/_breadcrumbs.html.j2' %}
{% endblock nav_content %}

{% block styles %}
{{ super() }}
<style>
  main {
    background-image: url("{{ url_for('static', filename='images/parallax_lq/04_german_text_book_paper.jpg') }}");
    background-repeat: no-repeat;
    background-size: cover;
  }
</style>
{% endblock styles %}

{% block page_content %}
<div class="container">
  <div class="row">
    <div class="col s12 m4">
      <div class="card medium">
        <div class="card-content">
          <h1 id="title">{{ title }}</h1>
          <p>Want to boost your research and get going? nopaque is free and no download is needed. Register now!</p>
        </div>
        <div class="card-action right-align">
          <a class="btn" href="{{ url_for('.register') }}"><i class="material-icons left">person_add</i>Register</a>
        </div>
      </div>
    </div>

    <div class="col s12 m8">
      <div class="card medium">
        <form method="POST">
          <div class="card-content">
            {{ login_form.hidden_tag() }}
            {{ wtf.render_field(login_form.user, material_icon='person') }}
            {{ wtf.render_field(login_form.password, material_icon='vpn_key') }}
            <div class="row" style="margin-bottom: 0;">
              <div class="col s6 left-align">
                <a href="{{ url_for('.reset_password_request') }}">Forgot your password?</a>
              </div>
              <div class="col s6 right-align">
                {{ wtf.render_field(login_form.remember_me) }}
              </div>
            </div>
          </div>
          <div class="card-action right-align">
            {{ wtf.render_field(login_form.submit, material_icon='send') }}
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}