{% extends "dartcms/base/index.html" %}

{% load i18n static dartcms_helpers %}

{% block js %}
    {{ block.super }}
    <script src="{% static 'dartcms/assets/easyui/jquery.easyui.min.js' %}" type="text/javascript"></script>
    <script type="text/javascript" src="{% static 'dartcms/js/lib/jquery-form/jquery.form.js' %}"></script>
    <script type="text/javascript"
            src="{% static 'dartcms/js/lib/jquery-validation/jquery.validate.min.js' %}"></script>

    <script type="text/javascript"
            src="https://cdn.jsdelivr.net/momentjs/2.14.1/moment-with-locales.min.js"></script>

    <script type="text/javascript"
            src="{% static 'dartcms/assets/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js' %}"></script>

    <script type="text/javascript"
            src="{% static 'dartcms/assets/bootstrap-multiselect/js/bootstrap-multiselect.js' %}"></script>
    <script type="text/javascript" src="{% static 'dartcms/assets/tinymce/tinymce.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'dartcms/js/apps/base/http.js' %}"></script>
    <script type="text/javascript" src="{% static 'dartcms/js/apps/base/grid.js' %}"></script>
    <script type="text/javascript" src="{% static 'dartcms/js/apps/base/forms.js' %}"></script>

    {% get_current_language as LANG %}

    {% if LANG == 'ru' or LANG == 'ru-ru' %}
        <script type="text/javascript"
                src="{% static 'dartcms/js/lib/jquery-validation/localization/messages_ru.min.js' %}"></script>
        <script type="text/javascript"
                src="{% static 'dartcms/assets/easyui/locale/easyui-lang-ru.js' %}"></script>
    {% endif %}

{% endblock %}

{% block css %}
    {{ block.super }}
    <link rel="stylesheet" href="{% static 'dartcms/assets/easyui/themes/metro/easyui.css' %}"/>
    <link rel="stylesheet" href="{% static 'dartcms/assets/easyui/themes/icon.css' %}"/>
    <link rel="stylesheet"
          href="{% static 'dartcms/assets/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css' %}"/>
    <link rel="stylesheet" href="{% static 'dartcms/assets/tinymce/skins/lightgray/skin.min.css' %}"/>
    <link rel="stylesheet"
          href="{% static 'dartcms/assets/bootstrap-multiselect/css/bootstrap-multiselect.css' %}"/>
{% endblock %}

{% block breadcrumbs_current_path %}
    <li class="active">{{ page_header|capfirst }}{% if parent_str %} - {{ parent_str }} {% endif %}</li>
{% endblock %}

{% block inline_js %}
    {{ block.super }}
    {% include 'dartcms/views/partials/tinymce.html' %}
    {% include 'dartcms/views/partials/datepickers.html' %}
    <script>
        $(function () {

            var grid = $('#id-datagrid'),
                gridToolbar = [
                    {% if parent_url %}
                        {
                            text: '{% trans 'Back' %}',
                            iconCls: 'icon-back',
                            handler: function () {
                                window.location.href = '{{ parent_url }}';
                            }
                        },
                    {% endif %}

                    {% if 'insert' in grid_actions %}
                        {
                            text: '{% trans 'Add' %}',
                            iconCls: 'icon-add',
                            handler: function () {
                                openFormModal('{{ request.path }}insert/', function () {
                                    grid.datagrid('reload');
                                });
                            }
                        },
                    {% endif %}

                    {% if 'update' in grid_actions %}
                        {
                            text: '{% trans 'Edit' %}',
                            iconCls: 'icon-edit',
                            handler: function () {
                                var selected = grid.datagrid('getSelected');
                                if (selected) {
                                    openFormModal('{{ request.path }}update/' + selected.pk + '/', function () {
                                        grid.datagrid('reload');
                                    });
                                }
                            }
                        },
                    {% else %}
                        {
                            text: '{% trans 'View' %}',
                            iconCls: 'icon-more',
                            handler: function () {
                                var selected = grid.datagrid('getSelected');
                                if (selected) {
                                    openFormModal('{{ request.path }}update/' + selected.pk + '/', function () {
                                        grid.datagrid('reload');
                                    }, undefined, function (modal) {
                                        $('input, textarea, select', modal).addClass('disabled').attr('disabled', 'disabled');
                                        $('a', modal)
                                    });
                                }
                            }
                        },
                    {% endif %}

                    {% if 'delete' in grid_actions %}
                        {
                            text: '{% trans 'Delete' %}',
                            iconCls: 'icon-remove',
                            handler: function () {
                                var selected = grid.datagrid('getSelections');
                                var ss = [];
                                for(var i=0; i<selected.length; i++){
                                    var row = selected[i];
                                    ss.push(row.pk);
                                }
                                if (selected) {
                                    openFormModal('{{ request.path }}delete/' + ss + '/', function () {
                                        grid.datagrid('clearSelections');
                                        grid.datagrid('reload');
                                    });
                                }
                            }
                        },
                    {% endif %}

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

                ],
                body = $('body');

            {% get_current_language as LANG %}

            {% if LANG == 'ru' or LANG == 'ru-ru' %}
                var date_format = 'DD.MM.YYYY';
            {% else %}
                var date_format = 'YYYY-MM-DD';
            {% endif %}

            grid.datagrid({
                url: '{{ request.path }}',
                queryParams: request.GET,
                method: 'get',
                idField: 'pk',
                singleSelect: {{ single_select|yesno:"true,false" }},
                fitColumn: true,
                fit: true,
                pagination: true,
                remoteSort: true,
                toolbar: gridToolbar,
                onOpen: function (data) {
                    $('.grid-loading-indicator').remove();
                    $('.grid-wrapper').animate({opacity: 1}, 500);
                    $('.search-form-wrapper').css('visibility', 'visible');
                },
                columns: [
                    [
                        {
                            field: 'pk',
                            hidden: true
                        },
                        {% for column in grid_columns %}
                            {
                                sortable: true,
                                field: '{{ column.field }}',
                                width: '{{ column.width }}',
                                title: '{{ column.label }}',
                                formatter: function (value, row, index) {
                                    {% if column.type == 'BOOLEAN' %}
                                        if (value) {
                                            return '<i class="fa fa-check-circle"></i>';
                                        } else {
                                            return '<i class="fa fa-remove"></i>';
                                        }
                                    {% elif column.type == 'DATETIME' %}
                                        return moment(value).format(date_format + ' HH:mm:ss');
                                    {% elif column.type == 'DATE' %}
                                        return moment(value).format(date_format);
                                    {% elif column.type == 'TIME' %}
                                        return moment(value).format('HH:mm:ss');
                                    {% elif column.type == 'FILE' %}
                                        if (value)
                                            return '<a href="' + value + '">' + value + '</a>';
                                    {% elif column.type == 'IMAGE' %}
                                        if (value)
                                            return '<img src="' + value + '" class="img img-thumbnail"/>';
                                    {% else %}
                                        return value;
                                    {% endif %}
                                }
                            }{% if not forloop.last %},{% endif %}
                        {% endfor %}
                    ]
                ]
            });
        });
    </script>
{% endblock %}

{% block page_content %}
    <div class="page-header">
        <h1>{{ page_header|capfirst }}{% if parent_str %}  <small>{{ parent_str }}</small> {% endif %}</h1>
    </div>

    {% 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"></table>
        </div>
    {% endblock %}
{% endblock %}