{% extends "admin/change_form.html" %}

{% block content %}
    {{block.super}}

    {% if original %}

    <div>
        <h2>Choose Permissions</h2>
        <select multiple="multiple" id="chatterbox-scopes">
        {% for value, label in original.available_permissions %}
            <option value="{{ value }}">{{ label }}</option>
        {% endfor %}
        </select>
        <a href="#" id="get-authorization">Get Authorization</a>
        <script type="text/javascript" charset="utf-8">
            (function($) {

                var authorizationUrl = "{{ original.authorization_url|safe }}";
                var chatterboxId = "{{ original.uuid }}";
                var redirectUrl = "{{ original.redirect_url }}";

                var state = "{{ original.state }}"

                var $scopes = $("#chatterbox-scopes");
                var $action = $("#get-authorization");

                $action.on('click', function(){
                    var target = null;

                    var data = {
                        scope: $scopes.val(),
                        redirect_url: redirectUrl
                    }

                    var params = $.param(data);

                    target = window.location.origin + '/chatterbox/authorize/'+ chatterboxId + '/?' + params;
                    window.open(target);
                });

            })(django.jQuery);
        </script>
    </div>
    {% endif %}
{% endblock %}
