{#
/**
 * Copyright (C) 2020 Xibo Signage Ltd
 *
 * Xibo - Digital Signage - http://www.xibo.org.uk
 *
 * This file is part of Xibo.
 *
 * Xibo is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * any later version.
 *
 * Xibo is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with Xibo.  If not, see <http://www.gnu.org/licenses/>.
 */
#}
{% extends "authed.twig" %}
{% import "inline.twig" as inline %}

{% block pageContent %}
    {% include "theme-dashboard-message.twig" ignore missing %}
    <div class="widget">
        <div class="widget-title">{% trans "All Editable Widgets" %}</div>
        <div class="widget-body">
            <div class="XiboGrid" id="{{ random() }}" data-grid-name="mediaManagerView">
                <div class="XiboFilter card mb-3 bg-light">
                    <div class="FilterDiv card-body" id="Filter">
                        <form class="form-inline">

                            {% set title %}{% trans "Layout" %}{% endset %}
                            {{ inline.input("layout", title, "", "", 'layout-draft') }}

                            {% set title %}{% trans "Region" %}{% endset %}
                            {{ inline.input("region", title, "", "", "layout-draft") }}

                            {% set title %}{% trans "Playlist" %}{% endset %}
                            {{ inline.input("playlist", title, "", "", "playlist") }}

                            {% set title %}{% trans "Media" %}{% endset %}
                            {{ inline.input("media", title) }}

                            {% set title %}{% trans "Module" %}{% endset %}
                            {{ inline.dropdown("type", "single", title, "", [{type:null, name:""}]|merge(modules), "type", "name") }}

                            {% set title = "Widgets From"|trans %}
                            {% set options = [
                                { id: 1, value: "Drafts"|trans },
                                { id: 2, value: "Playlists"|trans }
                            ] %}
                            {{ inline.dropdown("showWidgetsFrom", "single", title, "", options, "id", "value", helpText) }}

                        </form>
                    </div>
                </div>
                <div class="XiboData card pt-3">
                    <table id="entries" class="table table-striped">
                        <thead>
                            <tr>
                                <th>{% trans "Widget" %}</th>
                                <th>{% trans "Type" %}</th>
                                <th>{% trans "Thumbnail" %}</th>
                                <th>{% trans "Layout" %}</th>
                                <th>{% trans "Region" %}</th>
                                <th>{% trans "Playlist" %}</th>
                                <th>{% trans "Display Order" %}</th>
                                <th class="rowMenu"></th>
                            </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javaScript %}
    {# Add common file #}
    {% include "common.twig" %}

    <script type="text/javascript">
        var table;

        $(document).ready(function() {

            if ($('#showWidgetsFrom').val() == 1) {
                $('.playlist').hide();
                $('#playlist').val("");
                $('.layout-draft').show()
            } else {
                $('.layout-draft').hide();
                $('#layout,#region').val("");
                $('.playlist').show()
            }

            $('#showWidgetsFrom').change(function() {
                if ($('#showWidgetsFrom').val() == 1) {
                    $('.playlist').hide();
                    $('#playlist').val("");
                    $('.layout-draft').show()
                } else {
                    $('.layout-draft').hide();
                    $('#layout,#region').val("");
                    $('.playlist').show()
                }
            });

            table = $("#entries").DataTable({
                "language": dataTablesLanguage,
                serverSide: true,
                filter: false,
                searchDelay: 3000,
                "order": [[1, "asc"]],
                ajax: {
                    url: "{{ url_for("mediamanager.search") }}",
                    "data": function (d) {
                        $.extend(d, $("#entries").closest(".XiboGrid").find(".FilterDiv form").serializeObject());
                    }
                },
                "columns": [
                    {"data": "widget"},
                    {"data": "type"},
                    {
                        "name": "widgetId",
                        "data": null,
                        "render": {"_": "thumbnail", "display": "thumbnail", "sort": "widgetId"}
                    },
                    {
                        "data": "layout",
                        "orderable": false
                    },
                    {
                        "data": "region",
                        "orderable": false
                    },
                    {
                        "data": "playlist"
                    },
                    {"data": "displayOrder"},
                    {
                        "orderable": false,
                        "data": dataTableButtonsColumn
                    }
                ]
            });

            table.on('draw', function(e, settings) {
                dataTableDraw(e, settings);

                // Bind to any media replace buttons
                $("#" + e.target.id).find('.MediaManagerReplaceButton').on('click', function() {
                    e.preventDefault();

                    // $(this) is the button
                    var mediaId = $(this).data().mediaId;
                    var widgetId = $(this).data().widgetId;
                    var validExtensions = $(this).data().validExtensions;

                    // Close the current dialog
                    XiboDialogClose();

                    // Open the upload dialog with our options.
                    openUploadForm({
                        url: "{{ url_for("library.add") }}",
                        title: "{% trans "Upload media" %}",
                        multi: false,
                        buttons: {
                            main: {
                                label: "{% trans "Done" %}",
                                className: "btn-primary btn-bb-main",
                                callback: function() {
                                    table.ajax.reload();
                                    XiboDialogClose();
                                }
                            }
                        },
                        templateOptions: {
                            oldMediaId: mediaId,
                            widgetId: widgetId,
                            updateInAllChecked: {% if settings.LIBRARY_MEDIA_UPDATEINALL_CHECKB == 1 %}true{% else %}false{% endif %},
                            deleteOldRevisionsChecked: {% if settings.LIBRARY_MEDIA_DELETEOLDVER_CHECKB == 1 %}true{% else %}false{% endif %},
                            trans: {
                                addFiles: "{% trans "Add Replacement" %}",
                                startUpload: "{% trans "Start Replace" %}",
                                cancelUpload: "{% trans "Cancel Replace" %}",
                                processing: "{% trans "Processing..." %}",
                                updateInLayouts: {
                                    title: "{% trans "Update this media in all layouts it is assigned to?" %}",
                                    helpText: "{% trans "Note: It will only be updated in layouts you have permission to edit." %}"
                                },
                                deleteOldRevisions: {
                                    title: "{% trans "Delete the old version?" %}",
                                    helpText: "{% trans "Completely remove the old version of this media item if a new file is being uploaded." %}"
                                }
                            },
                            upload: {
                                maxSize: {{ libraryUpload.maxSize }},
                                maxSizeMessage: "{{ libraryUpload.maxSizeMessage }}",
                                validExt: validExtensions
                            },
                            folderSelector: false
                        },
                        uploadDoneEvent: function () {
                            XiboDialogClose();
                            table.ajax.reload();
                        }
                    });
                });

                // Bind to any media replace buttons
                $("#" + e.target.id).find('.WidgetEditForm').on('click', function() {
                    e.preventDefault();

                    formHelpers.widgetFormRender($(this), $(this).data());
                });
            });
            table.on('processing.dt', dataTableProcessing);
            dataTableAddButtons(table, $('#entries_wrapper').find('.col-md-6').eq(1));
        });

        /**
         * Media Edit form
         */
        function mediaEditFormOpen(dialog) {

            if (dialog.find("form").data().mediaEditable !== 1) {
                return;
            }

            // Create a new button
            var footer = dialog.find(".modal-footer");
            var mediaId = dialog.find("form").data().mediaId;
            var widgetId = dialog.find("form").data().widgetId;
            var validExtensions = dialog.find("form").data().validExtensions;

            // Append
            var replaceButton = $('<button class="btn btn-warning">').html("{% trans "Replace" %}");
            replaceButton.click(function(e) {
                e.preventDefault();

                // Open the upload dialog with our options.
                openUploadForm({
                    url: "{{ url_for("library.add") }}",
                    title: "{% trans "Upload media" %}",
                    multi: false,
                    buttons: {
                        main: {
                            label: "{% trans "Done" %}",
                            className: "btn-primary btn-bb-main",
                            callback: function() {
                                table.ajax.reload();
                                XiboDialogClose();
                            }
                        }
                    },
                    templateOptions: {
                        oldMediaId: mediaId,
                        widgetId: widgetId,
                        updateInAllChecked: {% if settings.LIBRARY_MEDIA_UPDATEINALL_CHECKB == 1 %}true{% else %}false{% endif %},
                        deleteOldRevisionsChecked: {% if settings.LIBRARY_MEDIA_DELETEOLDVER_CHECKB == 1 %}true{% else %}false{% endif %},
                        trans: {
                            addFiles: "{% trans "Add Replacement" %}",
                            startUpload: "{% trans "Start Replace" %}",
                            cancelUpload: "{% trans "Cancel Replace" %}",
                            processing: "{% trans "Processing..." %}",
                            updateInLayouts: {
                                title: "{% trans "Update this media in all layouts it is assigned to?" %}",
                                helpText: "{% trans "Note: It will only be updated in layouts you have permission to edit." %}"
                            },
                            deleteOldRevisions: {
                                title: "{% trans "Delete the old version?" %}",
                                helpText: "{% trans "Completely remove the old version of this media item if a new file is being uploaded." %}"
                            }
                        },
                        upload: {
                            maxSize: {{ libraryUpload.maxSize }},
                            maxSizeMessage: "{{ libraryUpload.maxSizeMessage }}",
                            validExt: validExtensions
                        },
                        folderSelector: false
                    },
                    uploadDoneEvent: function () {
                        XiboDialogClose();
                        table.ajax.reload();
                    }
                });
            });

            footer.find(".btn-primary").before(replaceButton);
        }
    </script>

    {% for module in assignableModules %}
        {% if module.layoutDesignerJavaScript() != "" %}
            {% include module.layoutDesignerJavaScript() ~ ".twig" %}
        {% endif %}
    {% endfor %}
{% endblock %}