{% extends 'dartcms/views/grid.html' %}

{% load i18n static %}

{% block js %}
    {{ block.super }}
    <script type="text/javascript" src="{% static 'dartcms/assets/easyui/ext/treegrid-dnd.js' %}"></script>
    <script type="text/javascript" src="{% static 'dartcms/assets/easyui/ext/datagrid-filter.js' %}"></script>
{% endblock %}

{% block inline_js %}
    {% include 'dartcms/views/partials/tinymce.html' %}
    <script>
        $(function () {
            var grid = $('#id-datagrid'),
                gridToolbar = [
                    {
                        text: '{% trans 'Add' %}',
                        iconCls: 'icon-add',
                        handler: function () {
                            var selected = grid.treegrid('getSelected');
                            if (selected) {
                                openFormModal('{{ request.path }}insert/?parent=' + selected.pk, function (res) {
                                    grid.treegrid('append', {
                                        parent: selected.pk,
                                        data: [res.data]
                                    });
                                    grid.treegrid('select', res.data.pk);
                                    {% if not search_params_str %}
                                        grid.treegrid('enableDnd', res.data.pk);
                                    {% endif %}
                                });
                            }
                        }
                    },
                    {
                        text: '{% trans 'Edit' %}',
                        iconCls: 'icon-edit',
                        handler: function () {
                            var selected = grid.treegrid('getSelected');
                            if (selected) {
                                openFormModal('{{ index_url }}update/' + selected.pk + '/', function (res) {
                                    grid.treegrid('update', {
                                        id: selected.pk,
                                        row: res.data
                                    });
                                });
                            }
                        }
                    },
                    {
                        text: '{% trans 'Delete' %}',
                        iconCls: 'icon-remove',
                        handler: function () {
                            var selected = grid.treegrid('getSelected');
                            if (selected) {
                                openFormModal('{{ index_url }}delete/' + selected.pk + '/', function () {
                                    grid.treegrid('remove', selected.pk);
                                });
                            }
                        }
                    },
                    {% if additional_grid_actions %}
                        {% for action in additional_grid_actions %}
                            {
                                text: '{{ action.label }}',
                                iconCls: 'icon-{{ action.icon }}',
                                handler: function () {
                                    {% if not action.kwarg_name %}
                                        var url = '{{ request.path }}{{ action.url }}/';
                                    {% else %}
                                        var selected = grid.datagrid('getSelected');
                                        if (selected) {
                                            var url = '{{ request.path }}{{ action.url }}/' + selected.pk + '/';
                                        }
                                    {% endif %}
                                    if (url) {
                                        {% if action.target %}
                                            window.open(url, '{{ action.target }}');
                                        {% else %}
                                            window.location.href = url;
                                        {% endif %}
                                    }
                                }
                            },
                        {% endfor %}
                    {% endif %}
                ];

            grid.treegrid({
                idField: 'pk',
                singleSelect: true,
                fitColumn: true,
                fit: true,
                toolbar: gridToolbar,
                treeField: 'title',
                url: '{% url 'dartcms:pages:get_tree' %}{{ search_params_str | safe}}',
                onLoadSuccess: function (row) {
                    $('.grid-loading-indicator').remove();
                    $('.grid-wrapper').animate({opacity: 1}, 500);
                    {% if not search_params_str %}
                    $(this).treegrid('enableDnd', row?row.pk:null);
                    {% endif %}
                    if (row == null) {
                        $(this).treegrid('expand', 1)
                    }
                    $('.search-form-wrapper').css('visibility', 'visible');
                },
                onDrop: function (target, source, point) {
                    var url = '';
                    if (point == 'append') {
                        url = '{% url 'dartcms:pages:append' %}' + '?target=' + target.pk + '&source=' + source.pk;
                        $.ajax({
                            dataType: 'json',
                            method: 'POST',
                            url: url
                        }).done(function (response) {
                            if (!response.result) {
                                new PNotify({
                                    title: gettext('Warning'),
                                    text: gettext('Page can not be appended to target'),
                                    icon: 'fa fa-warning'
                                });
                            } else {
                                new PNotify({
                                    title: gettext('Success'),
                                    text: gettext('Page appended to target'),
                                    icon: 'fa fa-info'
                                });
                                grid.treegrid('reload', target.pk);
                            }
                        });
                    } else {
                        var position = point == 'bottom' ? 'right' : 'left';
                        url = '{% url 'dartcms:pages:move' %}' + '?target=' + target.pk + '&source=' + source.pk + '&position=' + position;
                        $.ajax({
                            dataType: 'json',
                            method: 'POST',
                            url: url
                        }).done(function (response) {
                            if (!response.result) {
                                new PNotify({
                                    title: gettext('Warning'),
                                    text: gettext('Page can not be moved'),
                                    icon: 'fa fa-warning'
                                });
                            } else {
                                new PNotify({
                                    title: gettext('Success'),
                                    text: gettext('Page moved'),
                                    icon: 'fa fa-info'
                                });
                            }
                        });
                    }
                }
            });

        });
    </script>
{% endblock %}

{% block grid %}
    {% include 'dartcms/views/partials/loading_indicator.html' %}
    {% if search_form %}
        {% include 'dartcms/views/partials/grid_search.html' %}
    {% endif %}

    <div class="grid-wrapper" style="opacity: 0;">
        <table id="id-datagrid">
            <thead>
            <tr>
                <th data-options="field:'pk', hidden:true">ID</th>
                {% for column in grid_columns %}
                    <th data-options="field:'{{ column.field }}'" width="{{ column.width }}">{{ column.label }}</th>
                {% endfor %}
            </tr>
            </thead>
        </table>
    </div>
{% endblock %}