{% extends "base.html" %}
{% load i18n static django_bootstrap5 %}
{% block title %}{% trans "Log in" %}{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-6">
        <h2><img src="{% static "img/logo.svg" %}" alt="nsupdate.info logo" height="35" width="35"> {% trans "Login with a local Account" %}</h2>
        <hr />
        {% if form.errors %}
        <p>{% trans "Your username and password didn't match. Please try again." %}</p>
        {% endif %}
        <form role="form" method="post" action="{% url 'login' %}">
            {% csrf_token %}
            {% bootstrap_form form layout='horizontal' horizontal_label_class='col-sm-3 col-lg-3' horizontal_field_class='col-sm-9 col-lg-9' %}
            <div class="form-group row">
                <div class="offset-sm-3 col-sm-9">
                    <div class="form-check">
                        <input id="id_remember_me" name="remember_me" type="checkbox" class="form-check-input">
                        <label class="form-check-label" for="id_remember_me">{% trans "Remember me" %}</label>
                    </div>
                </div>
            </div>
            <div class="form-group row">
                <div class="offset-sm-3 col-sm-9">
                    <input type="submit" class="btn btn-primary" value="{% trans 'Log in' %}" /> <a href="{% url 'password_reset' %}">{% trans 'Forgot your password?' %}</a>
                    <p class="mt-3"><a href="{% url 'registration_register' %}">{% trans "Sign up for a new account..." %}</a></p>
                </div>
            </div>
        </form>
    </div>

    <div class="col-md-6">
        <h2>{% trans "Login with a remote Account" %}</h2>
        <hr />
        {% if backends.backends %}
            <div class="btn-toolbar" role="toolbar">
                {% for backend in backends.backends %}
                    <div class="btn-group">
                        <a class="btn btn-secondary" role="button" href="{% url 'social:begin' backend %}">
                            <i class="fa fa-sign-in-alt fa-fw"></i> {{ backend }}
                        </a>
                    </div>
                {% endfor %}
            </div>
        {% else %}
            <div class="p-3 mb-2 jumbotron-replacement rounded-3">
                <p>{% trans "No remote account logins enabled." %}</p>
                <p>{% trans "Please login with a local account." %}</p>
            </div>
        {% endif %}
    </div>
</div>

<script type="text/javascript">document.getElementById("id_username").focus();</script>
{% endblock %}