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

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

{% block body %}
    <h1>Attribute - Add</h1>
    {{ form_start(form, {'attr': {'novalidate': 'novalidate'}}) }}
    {{ form_row(form.credentials) }}
    {{ form_row(form.Name) }}
    {{ form_row(form.Mandatory) }}
    <div>
        <label class="control-label">Possible values</label>
        <div class="possible-values"
             data-prototype="{{ form_widget(form.PossibleValues.vars.prototype)|e('html_attr') }}"
             style="margin-bottom: 15px;">
            {% for possibleValue in form.PossibleValues %}
                <div class="row possible-value">
                    <div class="col-xs-11">{{ form_row(possibleValue, { 'label': false }) }}</div>
                    <div class="col-xs-1">
                        <a href="#" class="remove-value">
                            <i class="glyphicon glyphicon-remove"></i>
                        </a>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
    {{ form_row(form.DefaultValue) }}
    {{ form_row(form.Translatable) }}
    {{ form_row(form.GroupId) }}
    <div class="hidden">
        {{ form_row(form.PossibleValues) }}
    </div>
    {{ form_end(form) }}

    {% if wsRequest %}
        <h3>Webservice Request</h3>
        <pre>{{ wsRequest }}</pre>
    {% endif %}

    {% if wsResponse %}
        <h3>Webservice Response</h3>
        <pre>{{ wsResponse }}</pre>
    {% endif %}

    <h3>Help</h3>
    <pre>{% include 'SsoHelpBundle:Attribute:xml/add.html.twig' %}</pre>

    <script>
        // possible values
        $(document).ready(function () {
            var $newLinkDiv = $('<div class="row"><div class="col-xs-12"><a href="#" class="add_value_link btn btn-default">Add a possible value</a></div></div>'),
                $collectionHolder = $('div.possible-values');

            $collectionHolder.append($newLinkDiv);
            $collectionHolder.data('index', $collectionHolder.find(':input').length);

            $('.add_value_link').on('click', function (e) {
                e.preventDefault();
                addValueForm($collectionHolder, $newLinkDiv);
            });

            $(document).on('click', '.remove-value', function (e) {
                e.preventDefault();
                $(this).parents('.possible-value').remove();
                return false;
            });
        });

        function addValueForm($collectionHolder, $newLinkDiv) {
            var prototype = $collectionHolder.data('prototype');
            var index = $collectionHolder.data('index');
            var newForm = prototype.replace(/__name__/g, index);
            $collectionHolder.data('index', index + 1);
            var $newFormDiv = $('<div class="row possible-value"><div class="col-xs-11"><div class="form-group">' + newForm + '</div></div></div>');
            $newFormDiv.append('<div class="col-xs-1"><a href="#" class="remove-value"><i class="glyphicon glyphicon-remove"></i></a></div>');
            $newLinkDiv.before($newFormDiv);
        }
    </script>
{% endblock %}
