{% extends 'layout/admin.twig' %}

{% block header %}
    {% if config.useLocalAssets %}
        <script src="/assets/socket.io.min.js"></script>
        <script src="/assets/jquery.jeditable.min.js"></script>
    {% else %}
        <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.6.0/socket.io.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jeditable.js/2.0.6/jquery.jeditable.min.js"></script>
    {% endif %}
{% endblock %}

{% block body %}
    <!-- Grids -->
    <div class="column">
        <div class="ui one column very padded grid">
            <div class=" column">
                <h1 class="ui inverted header">{{ t("admin.editBundleSlides.bundle") }} {{ bundle.bundleData.displayName }}</h1>
                <button class="ui basic inverted button" onclick="createNew();">{{ t("actions.createNew") }}</button>
                <button class="ui basic inverted button" onclick="addLink();">{{ t("actions.addWebPage") }}</button>

                <div id="bundleSlides" class="ui sortable slides list">
                    {% for slide in bundle.allSlides %}
                        <div class="ui green message item" id="{{ slide.uuid }}" style="border: 1px solid black;">
                            <div class="right floated content">
                                <button class="ui small basic inverted icon button"
                                        onclick="editSlide('{{ slide.uuid }}', '{{ slide.type }}');"><i
                                            class="edit outline icon"></i></button>
                                <div onclick="duplicateSlide('{{bundle.name}}','{{slide.uuid}}')" class="ui small basic inverted icon button"><i class="ui copy icon"></i></div>
                                <button class="ui small basic inverted icon button"
                                        onclick="remove('{{ slide.uuid }}');"><i class="delete icon"></i>
                                </button>

                            </div>
                            <div class="content">
                                <div class="editable">{{ slide.name }} </div>
                            </div>
                        </div>

                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
    <script>
          var socket = io("{{ config.serverUrl }}/admin");
        var bundleName = "{{ bundle.name }}";
    </script>

    <script>
        function createNew() {
            editSlide("", "slide");
        }

        function addLink() {
            editSlide("", "webpage");
        }

        function editSlide(name, type) {
            switch (type) {
                case "slide":
                    window.open("/admin/edit/slide?bundle=" + bundleName + "&file=" + name, '_blank', 'location=no,height=800,width=1304,scrollbars=no,status=no');
                    break;
                case "webpage":
                    window.open("/admin/edit/link?bundle=" + bundleName + "&file=" + name, '_blank', 'location=no,height=400,width=600,scrollbars=no,status=no');
                    break;
            }
        }

      function duplicateSlide(bundleDir, uuid) {
                if (confirm('{{ t("admin.editBundleSlides.askDuplicate")}}') == true) {
                    socket.emit("admin.duplicateSlide", {bundleName: bundleDir, uuid: uuid});
                }
                return true;
            }

        function emit(eventName, data) {
            socket.emit(eventName, data);
        }

        $(".sortable").sortable({
            beforeStop: function (event, element) {
                var sortedIDs = $(".sortable").sortable("toArray");
                emit("admin.reorderSlides", {bundleName: bundleName, sortedIDs: sortedIDs});
            }
        }).disableSelection();

        $('.editable').editable(function (value, settings) {
            var uuid = $(this).parent().parent().attr("id");
            emit("admin.renameSlide", {uuid: uuid, name: value, bundleName: bundleName});
            return (value);
        }, {
            submit: 'rename',
            tooltip: "Doubleclick to edit...",
            event: "dblclick",
            cssclass: 'ui mini nopadded form',
            cancelcssclass: 'ui tiny basic negative button',
            submitcssclass: 'ui tiny basic positive button',
        });

        function remove(uuid) {
            var obj = {uuid: uuid, bundleName: bundleName};
            if (confirm("Really delete slide?")) {
                emit('admin.removeSlide', obj);
            }
        }

        socket.on("callback.updateBundleData", function() {
             document.location.reload(true);
        });

        socket.on("callback.dashboard.updateSlides", function (data) {
            if (bundleName === data.bundleName) {
                bundleSettings = data.bundleSettings;
                document.location.reload(true);
            }
        });

    </script>
{% endblock %}