<div id="{{ htmlUid }}">
    <!-- Modal -->
    <div class="modal fade" id="{{ htmlUid }}UserAddModal" tabindex="-1" role="dialog"
         aria-labelledby="{{ htmlUid }}UserAddModalLabel" 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 }}UserAddModalLabel">Add Users</h4>
                </div>
                <div class="modal-body clearfix">
                    {{ form_start(user_add_form) }}
                    {{ form_row(user_add_form.Users) }}
                    {{ form_end(user_add_form) }}
                </div>
            </div>
        </div>
    </div>

    <h3>Users</h3>
    {% if application.UserApplications|length > 0 %}
        <ul class="list-group">
            {% for userApplication in application.UserApplications %}
                <li class="list-group-item">
                    {{ userApplication.User.Username }}
                    <ul class="record_actions clearfix">
                        <li>
                            <a class="btn btn-default btn-xs view-roles" data-toggle="button"
                               data-hide-text="Hide Roles"
                               href="{{ path('_admin_backend_webservice_user_application_role_show', { 'userApplicationId': userApplication.Id }) }}">Show
                                Roles</a>
                        </li>
                        <li>
                            {% set form = attribute(controller, 'createUserDeleteFormView', [userApplication.Application.Id, userApplication.User.Id]) %}
                            {{ form(form) }}
                        </li>
                        <li>
                            {% set form = attribute(controller, 'createUserActiveFormView', [userApplication.Application.Id, userApplication.User.Id, userApplication.Active ? 0 : 1]) %}
                            {{ form(form) }}
                        </li>
                    </ul>
                    <span class="badge">{% if userApplication.Active %}active{% else %}inactive{% endif %}</span>
                    <div style="clear:both">
                        <div class="roles"
                             data-url="{{ path('_admin_backend_webservice_user_application_role_show', { 'userApplicationId': userApplication.Id }) }}"></div>
                    </div>
                </li>
            {% endfor %}
        </ul>
    {% else %}
        <p>Application is not linked to any user yet.</p>
    {% endif %}

    <button class="btn btn-primary" data-toggle="modal" data-target="#{{ htmlUid }}UserAddModal">
        Add Users
    </button>
</div>

<script>
    $(function () {
        var itemsPerPage = 10;
        $("#{{ htmlUid }} .searchUsers").select2({
            placeholder: "Enter username",
            multiple: true,
            minimumInputLength: 0,
            width: "100%",
            ajax: {
                url: "{{ path('_admin_backend_webservice_user_search') }}",
                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 }} .view-roles").click(function () {
            var me = $(this),
                container = me.closest("li.list-group-item").find(".roles");
            if (me.hasClass("btn-pressed")) {
                me.removeClass("btn-pressed").button("reset");
                container.slideUp("slow", function () {
                    container.empty();
                });
            } else {
                me.addClass("btn-pressed").button("hide");
                container.hide().load(me.attr("href"), function () {
                    container.slideDown();
                });
            }
        });
        $("#{{ 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>
