{% extends "login/base.html" %}

{% load utils %}
{% load i18n %}

{% block card_title %}
{% trans 'Authorize Application' %}
{% endblock %}

{% block card %}
<form method="POST" class="pf-c-form">
    {% csrf_token %}
    {% if not error %}
        {% csrf_token %}
        {% for field in form %}
            {% if field.is_hidden %}
                {{ field }}
            {% endif %}
        {% endfor %}
        <div class="pf-c-form__group">
            <p class="subtitle">
                {% blocktrans with remote=client.name %}
                You're about to sign into {{ remote }}.
                {% endblocktrans %}
            </p>
            <p>{% trans "Application requires following permissions" %}</p>
            <ul class="pf-c-list">
                {% for scope in scopes %}
                <li>{{ scope.name }}</li>
                {% endfor %}
            </ul>
            {{ hidden_inputs }}
            {{ form.errors }}
            {{ form.non_field_errors }}
        </div>
        <div class="pf-c-form__group">
            <p>
                {% blocktrans with user=user %}
                You are logged in as {{ user }}. Not you?
                {% endblocktrans %}
                <a href="{% url 'passbook_flows:default-invalidation' %}">{% trans 'Logout' %}</a>
            </p>
        </div>
        <div class="pf-c-form__group pf-m-action">
            <input type="submit" class="pf-c-button pf-m-primary" name="allow" value="{% trans 'Continue' %}">
            <a href="{% back %}" class="pf-c-button pf-m-secondary">{% trans "Cancel" %}</a>
        </div>
        <div class="pf-c-form__group" style="display: none;" id="loading">
            <div class="pf-c-form__horizontal-group">
                <span class="pf-c-spinner" role="progressbar" aria-valuetext="Loading...">
                    <span class="pf-c-spinner__clipper"></span>
                    <span class="pf-c-spinner__lead-ball"></span>
                    <span class="pf-c-spinner__tail-ball"></span>
                </span>
            </div>
        </div>
    {% else %}
    <div class="login-group">
        <p class="subtitle">
            {% blocktrans with err=error.error %}Error: {{ err }}{% endblocktrans %}
        </p>
        <p>{{ error.description }}</p>
    </div>
    {% endif %}
</form>
{% endblock %}

{% block scripts %}
<script>
document.querySelector("form").addEventListener("submit", (e) => {
    document.getElementById("loading").removeAttribute("style");
});
</script>
{% endblock %}