{% extends 'lemoncurry/layout.html' %}
{% block styles %}
<link rel="stylesheet" type="text/stylus" href="{{ static('lemonauth/css/login.styl') }}">
{% endblock %}

{% block main %}
      <div class="container">
        {% if form.errors %}
        <p class="alert alert-danger">
          <strong>uh oh!</strong> your login details didn't match, please try again
        </p>

        {% elif next %}
        {% if request.user.is_authenticated %}
        <p class="alert alert-warning">
          <strong>hang on!</strong> your account doesn't have access to this page :( to proceed, please log in to an account that does have access!
        </p>
        {% else %}
        <p class="alert alert-warning">
          <strong>oops!</strong> please log in to see this page
        </p>
        {% endif %}

        {% endif %}
        <form class="card" method="post" action="{{ url('lemonauth:login') }}">
          <div class="card-body">
            <div class="form-group">
              <label for="{{ form.username.id_for_label }}">username</label>
              <input class="form-control" type="text" autocomplete="username" required id="{{ form.username.auto_id }}" name="{{ form.username.name }}" value="{{ form.username.value() or '' }}">
            </div>

            <div class="form-group">
              <label for="{{ form.password.id_for_label }}">password</label>
              <input class="form-control" type="password" autocomplete="current-password" required id="{{ form.password.auto_id }}" name="{{ form.password.name }}">
            </div>

            <div class="form-group">
              <label for="{{ form.otp_token.id_for_label }}">otp token</label>
              <input class="form-control" type="text" required id="{{ form.otp_token.auto_id }}" name="{{ form.otp_token.name }}">
            </div>

            <div class="form-group form-check">
              <input class="form-check-input" type="checkbox" id="{{ form.otp_trust_agent.auto_id }}" name="{{ form.otp_trust_agent.name }}">
              <label for="{{ form.otp_trust_agent.id_for_label }}" class="form-check-label">
                remember this browser (don't tick this on a public computer!)
              </label>
            </div>
          </div>

          <div class="card-footer">
            <button class="btn btn-primary" type="submit">
              <i class="fas fa-sign-in-alt" aria-hidden="true"></i>
              log in
            </button>
          </div>

          {{ csrf_input }}
          <input type="hidden" name="next" value="{{ next }}">
        </form>
      </div>
{% endblock %}