{% extends "base.html" %}
{% load i18n %}

{% block content %}
  <div class="heading">
    <h1 class="heading__profiles">{% trans "Log in" %}</h1>
  </div>

  <div class="call-to-action call-to-action--profile">
    <h4 class="heading heading--subtitle">
      {% trans "Not a member yet?" %}
    </h4>
    <a href="{% url "molo.profiles:user_register" %}" class="call-to-action__nav-item-text call-to-action__nav-item-text--login">{% trans "Register" %}</a>
    <h4 class="heading heading--subtitle">
        Login by signing in below.
    </h4>
  </div>

  <div class="profiles">
    <form method="post" action="" class="profiles__form">
    {% csrf_token %}
    {% if form.errors %}
    <span class="error">
    {% trans "Your username and pin do not match. Please try again." %}
    </span>
    {% endif %}

    <fieldset>
    <label for="id_username">{% trans "Username" %}</label>
    {{form.username}}
    </fieldset>

    <fieldset>
    <label for="id_password">{% trans "4-digit pin" %}</label>
    {{form.password}}
    <span class="input-hint">({% trans "Eg.: 2086" %})</span>
    </fieldset>
    <input type="submit" value="{% trans "Log in" %}" class="call-to-action__button call-to-action__button--primary">
    <input type="hidden" name="next" value="{% if request.GET.next %}{{ request.GET.next }}{% else %}{% url "molo.profiles:login_success" %}{% endif %}" class="call-to-action__button call-to-action__button--sprimary" />
  </form>
    <a href="{% url "molo.profiles:forgot_password" %}" class="call-to-action__button call-to-action__button--secondary">
      {% trans "Forgotten your pin?" %}
    </a>
  </div>

{% endblock %}
