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

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

{% block title %}
{% title 'Authorize Application' %}
{% endblock %}

{% block card %}
<header class="login-pf-header">
  <h1>{% trans 'Authorize Application' %}</h1>
</header>
<form method="POST">
    {% csrf_token %}
    {% if not error %}
        {% csrf_token %}
        {% for field in form %}
            {% if field.is_hidden %}
                {{ field }}
            {% endif %}
        {% endfor %}
        <div class="form-group">
            <p class="subtitle">
                {% blocktrans with remote=application.name %}
                You're about to sign into {{ remote }}
                {% endblocktrans %}
            </p>
            <p>{% trans "Application requires following permissions" %}</p>
            <ul>
                {% for scope in scopes_descriptions %}
                <li>{{ scope }}</li>
                {% endfor %}
            </ul>
            {{ form.errors }}
            {{ form.non_field_errors }}
            <p>
                {% blocktrans with user=user %}
                You are logged in as {{ user }}. Not you?
                {% endblocktrans %}
                <a href="{% url 'passbook_core:auth-logout' %}">{% trans 'Logout' %}</a>
            </p>
            <div class="form-group">
                <input type="submit" class="btn btn-success btn-disabled btn-lg click-spinner" name="allow" value="{% trans 'Continue' %}">
                <a href="{% back %}" class="btn btn-default btn-lg">{% trans "Cancel" %}</a>
            </div>
            <div class="form-group spinner-hidden hidden">
                <div class="spinner"></div>
            </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>
    $('.click-spinner').on('click', function (e) {
        $('.spinner-hidden').removeClass('hidden');
        $(e.target).addClass('disabled');
    })
</script>
{% endblock %}