{% extends "layouts/minimal.html" %}
{% block title %}{_ "Login" _}{% endblock %}
{% block content %}

<style>
  /* https://stackoverflow.com/a/49278385 */
  html {
      overflow-y: scroll;
      scrollbar-width: none; /* Firefox */
      -ms-overflow-style: none;  /* Internet Explorer 10+ */
  }
  html::-webkit-scrollbar { /* WebKit */
      width: 0;
      height: 0;
  }
  body {
      background-image: url("/img/rune-full-white.png");
      background-position: center;
      background-size: cover;
  }
</style>

<form id="login-form" name="login-form" action="/user/login" method="POST">
  {{ token | safe }}
</form>

<div class="hero is-fullheight">
  <div class="hero-body">
    <div class="container">
      <div class="columns is-centered">
        <div class="column is-5-tablet is-4-desktop is-3-widescreen">
          {% include "messages.html" %} 
        </div>
        <div class="column is-5-tablet is-4-desktop is-3-widescreen">
          <div class="box">
            <div class="field">
              <label class="label" for="email">Email</label>
              <div class="control has-icons-left">
                <input class="input" form="login-form" name="email" id="email" type="text" placeholder="e.g. bobsmith@gmail.com" required>
                <span class="icon is-small is-left">
                  <i class="fa fa-envelope"></i>
                </span>
              </div>
            </div>
            <div class="field">
              <label class="label" for="password">Password</label>
              <div class="control has-icons-left">
                <input class="input" form="login-form" name="password" id="password" type="password" placeholder="*******" required>
                <span class="icon is-small is-left">
                  <i class="fa fa-lock"></i>
                </span>
              </div>
            </div>
            <div class="field is-grouped is-grouped-centered">
              <div class="control">
                <label for="remember-me" class="checkbox">
                  <input type="checkbox" id="remember-me" name="remember-me">
                  Remember me
                </label>
              </div>
            </div>

            <div class="field">
              <button class="button is-success is-fullwidth" form="login-form" type="submit">Login</button>
            </div>

            <hr>

            <div class="field">
              <a class="button is-link is-fullwidth" href="/user/register">Register</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}