<div id="{{ htmlUid }}" style="margin-top: 15px;">
    <!-- Modal -->
    <div class="modal fade" id="{{ htmlUid }}RoleAddModal" tabindex="-1" role="dialog"
         aria-labelledby="{{ htmlUid }}RoleAddModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span
                                aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title" id="{{ htmlUid }}RoleAddModalLabel">Add Roles</h4>
                </div>
                <div class="modal-body clearfix">
                    {{ form(role_add_form) }}
                </div>
            </div>
        </div>
    </div>

    <ul class="list-group">
        <li class="list-group-item disabled">
            Roles
            <ul class="record_actions">
                <li>
                    <button class="btn btn-primary btn-xs" data-toggle="modal" data-target="#{{ htmlUid }}RoleAddModal">
                        Add Roles
                    </button>
                </li>
            </ul>
        </li>
        {% if userApplicationRoles|length > 0 %}
            {% for userApplicationRole in userApplicationRoles %}
                <li class="list-group-item">
                    {{ userApplicationRole.Name }}
                    <ul class="record_actions clearfix">
                        <li>
                            {% set form = attribute(controller, 'createDeleteFormView', [userApplicationRole.Id]) %}
                            {{ form(form) }}
                        </li>
                        <li>
                            {% set form = attribute(controller, 'createActiveFormView', [userApplicationRole.Id, userApplicationRole.Active ? 0 : 1]) %}
                            {{ form(form) }}
                        </li>
                    </ul>
                    <span class="badge">{% if userApplicationRole.Active %}active{% else %}inactive{% endif %}</span>
                </li>
            {% endfor %}
        {% else %}
            <li class="list-group-item">Users application is not linked to any role yet.</li>
        {% endif %}
    </ul>
</div>

<script>
    $(function () {
        $('#{{ htmlUid }}RoleAddModal').on('shown.bs.modal', function () {
            var itemsPerPage = 10;
            $("#{{ htmlUid }} .searchRoles").select2({
                placeholder: "Enter role name",
                multiple: true,
                minimumInputLength: 0,
                ajax: {
                    url: "{{ path('_admin_backend_webservice_application_role_search', { 'applicationId': userApplication.Application.Id }) }}",
                    contentType: "application/json",
                    dataType: "json",
                    data: function (params) {
                        return {
                            query: params.term,
                            limit: itemsPerPage,
                            page: params.page
                        };
                    },
                    processResults: function (data, page) {
                        var more = (page * itemsPerPage) < data.total;
                        return {
                            results: data.items,
                            more: more
                        };
                    }
                }
            });
        });

        $("#{{ htmlUid }} .record_actions form, #{{ htmlUid }} .modal-body form").submit(function () {
            var me = $(this),
                modal = me.closest(".modal");
            if (modal.length) {
                modal.modal("hide");
            }
            $.post(me.attr('action'), me.serialize(), function (data) {
                var parentContainer = $("#{{ htmlUid }}").parent();
                parentContainer.load(parentContainer.data("url"));
                $("#messageContainer").html(data);
                $("#messageModal").modal();
            });
            return false;
        });
    });
</script>
