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

{% block title %}Edit Attribute{% endblock %}

{% block body %}
    <div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         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">
                    <p>You are about to delete one attribute, this procedure is irreversible.</p>
                    <p>Do you want to proceed?</p>
                    <p>We hope that you know what you do!</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <a href="#" class="btn btn-danger danger">Delete</a>
                </div>
            </div>
        </div>
    </div>

    <h1>Edit Attribute</h1>
    <div class="well clearfix">
        {{ form_start(edit_form) }}
        {{ form_row(edit_form.name) }}
        {{ form_row(edit_form.mandatory) }}

        <label class="control-label">Possible values</label>
        <div class="possible-values"
             data-prototype="{{ form_widget(edit_form.possibleValues.vars.prototype)|e('html_attr') }}"
             style="margin-bottom: 15px;">
            {% for possibleValue in edit_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(edit_form.defaultValue) }}
        {{ form_row(edit_form.translatable) }}
        {{ form_row(edit_form.AttributeGroup) }}
        <div class="hidden">
            {{ form_row(edit_form.possibleValues) }}
        </div>
        {{ form_end(edit_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>
        $('#confirm-delete').on('show.bs.modal', function (e) {
            $(this).find('.danger').attr('href', $(e.relatedTarget).data('href'));
            //$('.debug-url').html('Delete URL: <strong>' + $(this).find('.danger').attr('href') + '</strong>');
        });

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