{% 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" 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 %}
    </p>
        </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 %}
