{% extends "SsoBackendBundle:token:base.html.twig" %}

{% block title %}Create Attribute{% endblock %}

{% block body %}
    <h1>Create Attribute</h1>
    <div class="well clearfix">
        {{ form_start(form) }}
        {{ form_row(form.name) }}
        {{ form_row(form.mandatory) }}

        <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>
        {{ form_row(form.defaultValue) }}
        {{ form_row(form.translatable) }}
        {{ form_row(form.AttributeGroup) }}
        <div class="hidden">
            {{ form_row(form.possibleValues) }}
        </div>
        {{ form_end(form) }}
        <ul class="record_actions">
            <li>
                <a class="btn btn-success" href="{{ path('_admin_backend_webservice_attributes') }}">
                    Back to the list
                </a>
            </li>
        </ul>
    </div>

    <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 %}
