{% extends "web/_base.html" %}
{% load static %}
{% block title %}Log in{% endblock %}
{% block content %}
    <h1 class="mb-3">Log in</h1>
    {% if request.signon %}
        <h2 class="mb-3">Log in with an external account</h2>
        <ul class="list-group mb-4">
            {% for provider, identity in request.signon.status %}
                <li class="list-group-item list-group-item-action">
                    {% if provider.icon %}
                        <img style="vertical-align: text-top;
                                    height: 1em"
                             class="mr-2"
                             alt="{{ provider.label }} icon"
                             src="{% static provider.icon %}">
                    </img>
                {% else %}
                    <i class="mr-2 bi bi-box-arrow-in-right"></i>
                {% endif %}
                {% if identity %}
                    Logged in with {{ provider.label }} as {{ identity.subject }}
                {% else %}
                    <a href="{{ provider.get_authorization_url }}">Login with {{ provider.label }}</a>
                {% endif %}
                {% if provider.name == "salsa" %}
                    <br>
                    <small><i class="bi bi-exclamation-triangle"></i> In this early phase of Debusine development, external login with
                        Salsa is limited to users in the <i>debian</i> group: that is,
                    Debian Developers</small>
                {% endif %}
            </li>
        {% endfor %}
    </ul>
{% endif %}
<h2 class="mb-3">Log in with a Debusine account</h2>
{% if form.errors %}<p>Your username and password didn't match. Please try again.</p>{% endif %}
<form method="post" action="{% url "accounts:login" %}">
    {% csrf_token %}
    <table class="table table-sm">
        <tr>
            <td>{{ form.username.label_tag }}</td>
            <td>{{ form.username }}</td>
        </tr>
        <tr>
            <td>{{ form.password.label_tag }}</td>
            <td>{{ form.password }}</td>
        </tr>
    </table>
    <p>
        <input class="btn btn-primary btn-sm" type="submit" value="Login">
    </p>
</form>
{% endblock %}
