{% extends base_template %}
{% load i18n widget_tweaks templates %}

{% block content %}
{{ base_template }}
<h1>{% translate "Please Log in" %}</h1>
<form method="post" {% if form_action %}action="{{ form_action }}"{% endif %}>
    {% csrf_token %}

<div style="display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem;">
    {% if form.username %}
    <div><label for="{{ form.username.id_for_label }}" class="login-label" style="font-weight: bold;">{{ form.username.label }}:</label></div>
    <div>{% render_field form.username style="width:100%" %}</div>
    {% endif %}
    {% if form.email %}
    <div><label for="{{ form.email.id_for_label }}" class="login-label" style="font-weight: bold; text-wrap: nowrap;">{{ form.email.label }}:</label></div>
    <div>{% render_field form.email style="width:100%;" %}</div>
    {% endif %}
    {% if form.password %}
    <div><label for="{{ form.password.id_for_label }}" class="login-label" style="font-weight: bold; text-wrap: nowrap;">{{ form.password.label }}:</label></div>
    <div>{% render_field form.password style="width:100%;" %}</div>
    {% endif %}
</div>
<div style="margin-top: 0.5rem; text-align: center;">
    <button class="button button-primary">{% translate "Log in" %}</button>
</div>
{% if password_reset_url %}
<div style="marign-top: .5rem; text-align: center;">
    <a href="{{ password_reset_url }}">{% translate "Forgot your password?" %}</a>
</div>
{% endif %}
</form>
{% endblock content %}