{% extends "base.html" %}
<!--  -->
{% block content %}
<div class="hero">
  <div class="container hero-body sing-in-resp">
    <div class="column is-4 is-offset-4 is-mobile">
      <h1 class="title has-text-centered">Sign In</h1>

      <!-- form -->
      <form action="" method="POST" autocomplete="off">
        {{ form.hidden_tag() }}

        <!-- username -->
        <div class="field">
          <label>{{ form.username.label }}</label>
          <p class="control has-icons-left">
            {{ form.username(class="input", placeholder="username", autocomplete="off") }}
            <span class="icon is-small is-left">
              <i class="fas fa-user"></i>
            </span>
          </p>
          {% for error in form.username.errors %}
          <span class="help" style="color: red;">{{ error }}</span>
          {% endfor %}
        </div>

        <!-- password and remember -->
        <div class="field">
          <label>{{ form.password.label }}</label>
          <p class="control has-icons-left">
            {{ form.password(class="input", placeholder="password", autocomplete="off") }}
            <span class="icon is-small is-left">
              <i class="fas fa-lock"></i>
            </span>
          </p>
          {% for error in form.password.errors %}
          <span class="help" style="color: red;">{{ error }}</span>
          {% endfor %}
        </div>
        <p>{{ form.remember_me(class="checkbox check-space", type="checkbox") }} {{ form.remember_me.label }}</p>

        <!-- submit -->
        <div class="field">
          <p class="control">
            <button class="button is-active is-fullwidth">Login</button>
          </p>
      </form>
      <hr>

      <!-- forgot password? -->
      <p class="help">Forgot your password?
        <a href="{{ url_for('auth.reset_password_request') }}">Reset it.</a>
      </p>
      </div>
    </div>
  </div>
  {% endblock content %}