<div id="{{ htmlUid }}">
    <!-- Modal -->
    <div class="modal fade" id="{{ htmlUid }}ApplicationAddModal" tabindex="-1" role="dialog"
         aria-labelledby="{{ htmlUid }}ApplicationAddModalLabel" 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 }}ApplicationAddModalLabel">Add Applications</h4>
                </div>
                <div class="modal-body clearfix">
                    {{ form(application_add_form) }}
                </div>
            </div>
        </div>
    </div>

    <h3>Applications</h3>
    {% if user.UserApplications|length > 0 %}
        <ul class="list-group">
            {% for userApplication in user.UserApplications %}
                <li class="list-group-item">
                    {{ userApplication.Name }}
                    <ul class="record_actions">
                        <li>
                            <a class="btn btn-default btn-xs view-attributes" data-toggle="button"
                               data-hide-text="Hide Attributes"
                               href="{{ path('_admin_backend_webservice_user_application_attribute_show', { 'userApplicationId': userApplication.Id, 'userId': userApplication.User.Id }) }}">Show
                                Attributes</a>
                        </li>
                        <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, 'createApplicationDeleteFormView', [userApplication.User.Id, userApplication.Application.Id]) %}
                            {{ form(form) }}
                        </li>
                        <li>
                            {% set form = attribute(controller, 'createApplicationActiveFormView', [userApplication.User.Id, userApplication.Application.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>
                    <div style="clear:both">
                        <div class="attributes"
                             data-url="{{ path('_admin_backend_webservice_user_application_attribute_show', { 'userApplicationId': userApplication.Id, 'userId': userApplication.User.Id }) }}"></div>
                    </div>
                </li>
            {% endfor %}
        </ul>
    {% else %}
        <p>User is not linked to any application yet.</p>
    {% endif %}

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

<script>
    $(function () {
        $('#{{ htmlUid }}ApplicationAddModal').on('shown.bs.modal', function () {
            var itemsPerPage = 10;
            $("#{{ htmlUid }} .searchApplications").select2({
                placeholder: "Enter application name",
                multiple: true,
                minimumInputLength: 0,
                ajax: {
                    url: "{{ path('_admin_backend_webservice_application_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 }} .view-attributes").click(function () {
            var me = $(this),
                container = me.closest("li.list-group-item").find(".attributes");
            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>
