{% extends "@ChamiloTheme/Layout/layout_one_col.html.twig" %}

{% block content %}
    <script>
        var $collectionHolder;

        // setup an "add a tag" link
        var $addTagLink = $('<a href="#" class="btn btn-success add_tag_link">Add</a>');
        var $newLinkLi = $('<li></li>').append($addTagLink);

        $(function () {
            // Get the ul that holds the collection of tags
            $collectionHolder = $('ul.tags');

            // add a delete link to all of the existing tag form li elements
            $collectionHolder.find('li').each(function () {
                addTagFormDeleteLink($(this));
            });

            // add the "add a tag" anchor and li to the tags ul
            $collectionHolder.append($newLinkLi);

            // count the current form inputs we have (e.g. 2), use that as the new
            // index when inserting a new item (e.g. 2)
            $collectionHolder.data('index', $collectionHolder.find(':input').length);

            $addTagLink.on('click', function (e) {
                // prevent the link from creating a "#" on the URL
                e.preventDefault();

                // add a new tag form (see next code block)
                addTagForm($collectionHolder, $newLinkLi);
            });

            // This course
            $('#chamilo_notebook_notebook_shared_0').on('click', function () {
                $('#rights').hide();
            });

            // Only me
            $('#chamilo_notebook_notebook_shared_1').on('click', function () {
                $('#rights').hide();
            });

            // Shared
            $('#chamilo_notebook_notebook_shared_2').on('click', function () {
                $('#rights').show();
            });
        });

        function repoFormatResult(repo) {
            console.log(repo);
            var markup = '<div class="row-fluid">' +
                '<div class="span2"><img src="' + repo.owner.avatar_url + '" /></div>' +
                '<div class="span10">' +
                '<div class="row-fluid">' +
                '<div class="span6">' + repo.full_name + '</div>' +
                '<div class="span3"><i class="fa fa-code-fork"></i> ' + repo.forks_count + '</div>' +
                '<div class="span3"><i class="fa fa-star"></i> ' + repo.stargazers_count + '</div>' +
                '</div>';

            if (repo.description) {
                markup += '<div>' + repo.description + '</div>';
            }

            markup += '</div></div>';

            return markup;
        }

        function addTagFormDeleteLink($tagFormLi) {
            var $removeFormA = $('<a href="#" class="btn btn-danger">Delete</a>');
            $tagFormLi.append($removeFormA);

            $removeFormA.on('click', function (e) {
                // prevent the link from creating a "#" on the URL
                e.preventDefault();

                // remove the li for the tag form
                $tagFormLi.remove();
            });
        }

        function addTagForm($collectionHolder, $newLinkLi) {
            // Get the data-prototype explained earlier
            var prototype = $collectionHolder.data('prototype');

            // get the new index
            var index = $collectionHolder.data('index');

            // Replace '__name__' in the prototype's HTML to
            // instead be a number based on how many items we have
            var newForm = prototype.replace(/__name__/g, index);

            // increase the index with one for the next item
            $collectionHolder.data('index', index + 1);

            // Display the form in the page in an li, before the "Add a tag" link li
            var $newFormLi = $('<li></li>').append(newForm);
            $newLinkLi.before($newFormLi);
            addTagFormDeleteLink($newFormLi);

            $('.sharing_options').on('change', function () {
                var inputId = this.id;
                var hiddenInputId = inputId.replace("sharing", "search");
                var roleId = inputId.replace("sharing", "role");

                var selectRow = $('#' + hiddenInputId);
                var select2 = $('#s2id_' + hiddenInputId);
                var roleRow = $('#' + roleId).parent();

                var url = '';
                switch (this.value) {
                    case 'everyone':
                        roleRow.hide();
                        break;
                    case 'course':
                        selectRow.show();
                        select2.show();
                        roleRow.show();
                        url = Routing.generate('chamilo_core_user_user_mycourses');
                        break;
                    case 'user':
                        selectRow.show();
                        select2.show();
                        roleRow.hide();
                        url = Routing.generate('chamilo_core_user_user_mycourses');
                        break;
                    case 'group':
                        selectRow.show();
                        select2.show();
                        roleRow.hide();
                        url = Routing.generate('chamilo_core_user_user_mycourses');
                        break;
                    default:
                        selectRow.hide();
                        select2.hide();
                        break;
                }

                if (url != '') {
                    selectRow.select2({
                        tags: true,
                        tokenSeparators: [',', ' '],
                        ajax: {
                            url: url,
                            dataType: 'json',
                            type: "GET",
                            delay: 250,
                            data: function (params) {
                                return {
                                    q: params.term, // search term
                                    page: params.page
                                };
                            },
                            results: function (data, page) {
                                data = data.items;
                                return {
                                    results: $.map(data, function (item) {
                                        return {
                                            text: item.title,
                                            slug: item.title,
                                            id: item.id
                                        }
                                    })
                                };
                            }
                        }
                    });
                }
            });
        }
    </script>

    <div class="box box-primary">
        <div class="box-header">
            <h3 class="box-title">{{'Create'|trans}}</h3>
        </div>
        {% set create_url = path('app_document_create_document', {'course': course.code, 'parent': parent_id }) %}
        {% if file_type == 'folder' %}
            {% set create_url = path('app_document_create', {'course': course.code, 'parent': parent_id })  %}
        {% endif %}

        <form method="post"
              action="{{ create_url }}"
        >
            <div class="box-body">
                {{ form_start(form) }}
                {{ form_row(form.title) }}
                {{ form_row(form.comment) }}
                {{ form_row(form.c_id) }}
                {{ form_row(form.filetype) }}
                {#{{ form_row(form.shared) }}#}
                {#<ul id="rights" class="tags"#}
                    {#data-prototype="{{ form_widget(form.rights.vars.prototype)|e }}">#}
                {#</ul>#}
                {{ form_end(form) }}
            </div>
        </form>
    </div>

{% endblock %}
