<div id="{{ htmlUid }}" style="margin-top: 15px;">
    <!-- Modal -->
    <div class="modal" id="{{ htmlUid }}UserApplicationAttributeEditModal" tabindex="-1" role="dialog"
         aria-labelledby="{{ htmlUid }}UserApplicationAttributeEditLabel" 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 }}UserApplicationAttributeEditLabel">Edit Attribute</h4>
                </div>
                <div class="modal-body clearfix">Loading ...</div>
            </div>
        </div>
    </div>

    <div class="modal" id="{{ htmlUid }}AttributeConfirmDeleteModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h2>Do you really want to delete this attribute?</h2>
                </div>
                <div class="modal-body clearfix">
                    <p>You are about to delete an attribute.</p>
                    <p>Do you want to proceed?</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <a id="{{ htmlUid }}AttributeConfirmDeleteButton" href="#" class="btn btn-danger danger">Delete</a>
                </div>
            </div>
        </div>
    </div>

    <div class="modal" id="{{ htmlUid }}AttributeAddModal" tabindex="-1" role="dialog"
         aria-labelledby="{{ htmlUid }}AttributeAddModalLabel" 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 }}AttributeAddModalLabel">Add Attribute</h4>
                </div>
                <div class="modal-body clearfix">
                    {{ form(attribute_add_form) }}
                </div>
            </div>
        </div>
    </div>

    <ul class="list-group">
        <li class="list-group-item disabled">
            Attributes
            <ul class="record_actions">
                <li>
                    <button class="btn btn-primary btn-xs" data-toggle="modal"
                            data-target="#{{ htmlUid }}AttributeAddModal">
                        Add Attribute
                    </button>
                </li>
            </ul>
        </li>
        {% if userApplicationAttributes|length > 0 %}
            {% for userApplicationAttribute in userApplicationAttributes %}
                <li class="list-group-item">
                    {{ userApplicationAttribute.Name }}
                    <ul class="record_actions">
                        <li>
                            <button class="btn btn-primary btn-xs edit-attributes" data-toggle="modal"
                                    data-target="#{{ htmlUid }}UserApplicationAttributeEditModal"
                                    data-href="{{ path('_admin_backend_webservice_user_application_attribute_edit', { 'userApplicationAttributeId': userApplicationAttribute.Id }) }}">
                                Edit
                            </button>
                            <button class="btn btn-danger btn-xs delete-attributes" data-toggle="modal"
                                    data-target="#{{ htmlUid }}AttributeConfirmDeleteModal"
                                    data-href="{{ path('_admin_backend_webservice_user_application_attribute_delete', { 'userApplicationAttributeId': userApplicationAttribute.Id }) }}">
                                Delete
                            </button>
                        </li>
                    </ul>
                    <span class="badge">{{ userApplicationAttribute.Value }}</span>
                </li>
            {% endfor %}
        {% else %}
            <li class="list-group-item">No attributes set yet.</li>
        {% endif %}
    </ul>
</div>

<script>
    $(function () {
        var itemsPerPage = 10;
        $('#{{ htmlUid }}AttributeAddModal').on('shown.bs.modal', function () {
            $("#{{ htmlUid }} .searchAttributes").select2({
                placeholder: "Enter attribute name",
                multiple: false,
                minimumInputLength: 0,
                ajax: {
                    url: "{{ path('_admin_backend_webservice_application_attribute_search') }}",
                    contentType: "application/json",
                    dataType: "json",
                    data: function (params) {
                        return {
                            applicationId: "{{ userApplication.application.id }}",
                            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 }}UserApplicationAttributeEditModal").on('show.bs.modal', function (event) {
            var pressedButton = $(event.relatedTarget); // Button that triggered the modal
            var href = pressedButton.data("href");
            var modal = $(this);
            var container = modal.find(".modal-body");
            container.load(href);
        });

        /* Add Attribute to users application */
        $("#{{ htmlUid }} form").submit(function (event) {
            var me = $(this);
            event.stopPropagation();
            $.ajax({
                type: "POST",
                url: me.attr("action"),
                data: me.serialize(),
                success: function (data) {
                    $("#{{ htmlUid }}AttributeAddModal .modal-dialog").replaceWith($(data).find('.modal-dialog'));
                }
            });
            return false;
        });

        $("#{{ htmlUid }}AttributeConfirmDeleteModal").on('show.bs.modal', function (event) {
            var pressedButton = $(event.relatedTarget); // Button that triggered the modal
            var href = pressedButton.data("href");
            var modal = $(this);
            modal.data("href", href);
        });

        /* Delete Attribute from users application */
        $("#{{ htmlUid }}AttributeConfirmDeleteButton").click(function (event) {
            var me = $("#{{ htmlUid }}AttributeConfirmDeleteModal");
            event.stopPropagation();
            $.ajax({
                type: "DELETE",
                url: me.data("href"),
                data: me.serialize(),
                success: function (data) {
                    me.find(".modal-dialog").replaceWith($(data).find('.modal-dialog'));
                }
            });
            return false;
        });

        $("#{{ htmlUid }}UserApplicationAttributeEditModal, #{{ htmlUid }}AttributeConfirmDeleteModal, #{{ htmlUid }}AttributeAddModal").on('hide.bs.modal', function (event) {
            var me = $(this);
            me.closest("li.list-group-item").find(".attributes").load(me.closest("li.list-group-item").find(".view-attributes").attr("href"));
        });
    });
</script>
