{% extends "SsoDemoBundle:UserApplication:base.html.twig" %}

{% block title %}{{ parent() }} - ShowDetails {% endblock %}

{% block body %}
    <h1>UserApplication - ShowDetails</h1>

    {{ form(form, {'attr': {'novalidate': 'novalidate'}}) }}

    <ul class="deleteTypes" data-prototype="{{ form_widget(form.ApplicationName.vars.prototype)|escape }}">
    </ul>
    <script>
        var $collectionHolderAdd, $collectionHolderDelete;
        var $addTagLink = $('<a class="btn btn-danger" href="#" class="add_tag_link">Add Application</a>');
        var $removeTagLink = $('<a class="btn btn-danger" href="#" class="delete_tag_link">Remove Type</a>');
        var $newLinkLi = $('<div></div>').append($addTagLink);
        var $newDeleteLinkLi = $('<div></div>').append($removeTagLink);

        jQuery(document).ready(function () {

            $collectionHolderAdd = $('#form_ApplicationName');

            $collectionHolderAdd.append($newLinkLi);

            $collectionHolderAdd.data('index', $collectionHolderAdd.find(':input').length);

            $addTagLink.on('click', function (e) {
                e.preventDefault();
                appendTagForm($collectionHolderAdd, $newLinkLi);
            });


            function appendTagForm($collectionHolder, $newLinkLi) {
                var prototype = $collectionHolder.data('prototype');
                var index = $collectionHolder.data('index');
                var newForm = prototype.replace(/__name__/g, '').replace(/label__/g, '');
                $collectionHolder.data('index', index + 1);
                var $newFormLi = $('<div class="form-group"></div>').append(newForm);

                $newFormLi.append('<a href="#" class="remove-tag btn btn-danger">x</a>');
                $newLinkLi.before($newFormLi);

                $('.remove-tag').click(function (e) {
                    e.preventDefault();
                    $(this).parent().remove();
                    return false;
                });
            }

        });

    </script>


    {% include 'SsoDemoBundle:Layout:form.html.twig' %}
    {% include 'SsoDemoBundle:UserApplication/javascripts:showdetails.html.twig' %}
    <h3>Help</h3>

    <div class="panel-group" id="accordion">

        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseApplicationShowDetailsRequest">
                        Request Example
                    </a>
                </h4>
            </div>
            <div id="collapseApplicationShowDetailsRequest" class="panel-collapse collapse">
                <div class="panel-body">

                    <h3>Request Example:</h3>
                    {% include 'SsoHelpBundle:UserApplication:xml/showDetails.html.twig' %}

                </div>
            </div>
        </div>

        <br/>

        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseApplicationShowDetailsResponse">
                        Response Success Example
                    </a>
                </h4>
            </div>
            <div id="collapseApplicationShowDetailsResponse" class="panel-collapse collapse">
                <div class="panel-body">

                    <h3>Response Success Example:</h3>
                    {% include 'SsoHelpBundle:UserApplication:xml/response/showDetails.html.twig' %}

                </div>
            </div>
        </div>

    </div>
{% endblock %}
