{% extends "base.jinja2" %}

{% block title %}{% trans %}Login{% endtrans %}{% endblock %}

{% block content %}
<div class="grid-x">
  <form action="{{ url('login') }}" method="post" class="cell small-12 medium-6 large-4 medium-offset-3 large-offset-4">
    {{ csrf_input }}
    {% if next %}<input type="hidden" name="next" value="{{ next }}"/>{% endif %}
    <h1>{% trans %}Login{% endtrans %}</h1>
    {% if form.errors %}
      <div>
        <label class="is-invalid-label">{{ form.username.label }}
          {{ form.username|add_class('is-invalid-input') }}
        </label>
        <span class="form-error is-visible">{% trans %}This user is unknown or you got the password wrong.{% endtrans %}</span>
      </div>
      <div>
        <label class="is-invalid-label">{{ form.password.label }}
          {{ form.password|add_class('is-invalid-input') }}
        </label>
        <span class="form-error is-visible">{% trans %}This user is unknown or you got the password wrong.{% endtrans %}</span>
      </div>
    {% else %}
      <div>
        <label>{{ form.username.label_tag() }}
          {{ form.username }}
        </label>
      </div>
      <div>
        <label>{{ form.password.label_tag() }}
          {{ form.password }}
        </label>
      </div>
    {% endif %}
    <div class="text-right">
      <button class="button">{% trans %}Login{% endtrans %}</button>
    </div>
  </form>
</div>
{% endblock %}