{% block modals %}

    <div class="modal fade" id="add-devices-to-monitoring-group" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="ModalMonitoringGroupTitle">Add Devices to Monitoring Group</h5>
                </div>
                <div class="modal-body">
                    <select id="selectMonitoringGroups"></select>
                    <div class="container">
                        <div style="margin: 30px auto;">
                            <div class="monitoring-groups-container"></div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button id="cancel" type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <a id="addMonitoringGroup" class="btn btn-primary"><i class="fas fa-plus"></i> Add</a>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="add-device-custom-labels" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="ModalLabelTitle">Assign Custom Labels to Selected Devices</h5>
                </div>
                <div class="modal-body">
                    <select id="selectCustomLabels"></select>
                    <div class="container">
                        <div style="margin: 30px auto;">
                            <div class="custom-labels-container"></div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button id="cancel" type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <a id="addCustomLabels" class="btn btn-primary"><i class="fas fa-arrow-right"></i> Assign</a>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="add-device-system-labels" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="ModalLabelTitle">Assign System Labels to Selected Devices</h5>
                </div>
                <div class="modal-body">
                    <select id="selectSystemLabels"></select>
                    <div class="container">
                        <div style="margin: 30px auto;">
                            <div class="system-labels-container"></div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button id="cancel" type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <a id="addSystemLabels" class="btn btn-primary"><i class="fas fa-arrow-right"></i> Assign</a>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="add-device-fw" tabindex="-1" role="dialog" aria-labelledby="ModalFw" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="ModalFwTitle">Assign Firmware to Selected Devices</h5>
                </div>
                <div class="modal-body">
                    <select id="selectFws"></select>
                </div>
                <div class="modal-footer">
                    <button id="cancel" type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <a id="addFws" class="btn btn-primary"><i class="fas fa-arrow-right"></i> Assign</a>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="add-device-config" tabindex="-1" role="dialog" aria-labelledby="ModalConfig" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="ModalConfigTitle">Assign Config Profile to Selected Devices</h5>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <select id="selectConfigs"></select>
                    </div>
                    <div class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="overwrite">
                        <label class="custom-control-label" for="overwrite">Check if you would like to overwrite already assigned config profiles.</label>
                        <small id="emailHelp" class="form-text text-muted">If not checked devices with assigned config profiles will be skiped.</small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="cancel" type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <a id="addConfigs" class="btn btn-primary"><i class="fas fa-arrow-right"></i> Assign</a>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="add-device-agent-profile" tabindex="-1" role="dialog" aria-labelledby="ModalConfig" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="ModalConfigTitle">Assign Agent Profile to Selected Devices</h5>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <select id="selectAgentProfiles"></select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="cancel" type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <a id="assignAgentProfiles" class="btn btn-primary"><i class="fas fa-arrow-right"></i> Assign</a>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="remove-device-config" tabindex="-1" role="dialog" aria-labelledby="ModalRemoveConfig" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="ModalConfigTitle">Remove Config Profile.</h5>
                </div>
                <div class="modal-body">
                    Do you really want to remove config profile for selected device?
                </div>
                <div class="modal-footer">
                    <button id="cancel" type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <a id="remove-config-confirm" class="btn btn-danger btn-ok"><span class="fas fa-trash"></span> Remove</a>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="remove-device-custom-label" tabindex="-1" role="dialog" aria-labelledby="ModalRemoveCustomLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="ModalConfigTitle">Remove Custom Label.</h5>
                </div>
                <div class="modal-body">
                    <select id="selectRemoveCustomLabels"></select>
                    <div class="container">
                        <div style="margin: 30px auto;">
                            <div class="custom-labels-remove-container"></div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="cancel" type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <a id="remove-custom-label-confirm" class="btn btn-danger btn-ok"><span class="fas fa-trash"></span> Remove</a>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="remove-device-system-label" tabindex="-1" role="dialog" aria-labelledby="ModalRemoveSystemLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="ModalConfigTitle">Remove System Label</h5>
                </div>
                <div class="modal-body">
                    <select id="selectRemoveSystemLabels"></select>
                    <div class="container">
                        <div style="margin: 30px auto;">
                            <div class="system-labels-remove-container"></div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="cancel" type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <a id="remove-system-label-confirm" class="btn btn-danger btn-ok"><span class="fas fa-trash"></span> Remove</a>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="confirm-reboot" tabindex="-1" role="dialog" aria-labelledby="confirmDeleteLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="confirmDeleteLabel">Reboot Device</h5>
                </div>
                <div class="modal-body">
                    Do you really want to reboot selected device?
                </div>
                <div class="modal-footer">
                    <button id="cancel" type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <a id="reboot-confirm-button" class="btn btn-danger btn-ok"><span class="fas fa-refresh"></span> Reboot</a>
                </div>
            </div>
        </div>
    </div>

{% endblock modals %}

{% block javascripts %}

    <script src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script>
    <script src="{{ path('fos_js_routing_js', {'callback': 'fos.Router.setData'}) }}"></script>

    <script>

        $(document).ready(function(){

            let getAllCustomLabelsRoute = "{{ path('ajax_label_get_all') }}";
            let getAllSystemLabelsRoute = "{{ path('ajax_label_get_system_all') }}";
            let getAllFwsRoute = "{{ path('ajax_fw_get_all') }}";
            let getAllConfigsRoute = "{{ path('ajax_device_get_config_profiles') }}";
            let getAllAgentProfilesRoute = "{{ path('ajax_device_get_agent_profiles') }}";
            let getAllMonitoringGroupsRoute = "{{ path('ajax_monitoring_group_get_all') }}";
            let labelItems = {};
            let fwItems = {};
            let configItems = {};
            let agentProfileItems = {};
            let monitoringGroupItems = {};

            let SelectFieldCustomLabels  = tail("#selectCustomLabels", {
                search: true,
                classNames: "default white",
                descriptions: true,
                hideSelected: true,
                items: labelItems,
                multiple: true,
                hideDisabled: true,
                deselect: true,
                multiSelectAll: true,
                //multiLimit: 15,
                multiShowCount: false,
                multiContainer: ".custom-labels-container",
            });

            let SelectFieldSystemLabels  = tail("#selectSystemLabels", {
                search: true,
                classNames: "default white",
                descriptions: true,
                hideSelected: true,
                items: labelItems,
                multiple: true,
                hideDisabled: true,
                deselect: true,
                multiSelectAll: true,
                //multiLimit: 15,
                multiShowCount: false,
                multiContainer: ".system-labels-container",
            });

            let SelectFieldFws  = tail("#selectFws", {
                search: true,
                classNames: "default white",
                descriptions: true,
                hideSelected: true,
                items: fwItems,
                multiple: false,
                hideDisabled: true,
                deselect: true,
                multiSelectAll: false,
                multiShowCount: false
            });

            let SelectFieldConfigs  = tail("#selectConfigs", {
                search: true,
                classNames: "default white",
                descriptions: true,
                hideSelected: true,
                items: configItems,
                multiple: false,
                hideDisabled: true,
                deselect: true,
                multiSelectAll: false,
                multiShowCount: false
            });

            let SelectFieldAgentProfiles  = tail("#selectAgentProfiles", {
                search: true,
                classNames: "default white",
                descriptions: true,
                hideSelected: true,
                items: agentProfileItems,
                multiple: false,
                hideDisabled: true,
                deselect: true,
                multiSelectAll: false,
                multiShowCount: false
            });

            let SelectFieldMonitoringGroups  = tail("#selectMonitoringGroups", {
                search: true,
                classNames: "default white",
                descriptions: true,
                hideSelected: true,
                items: monitoringGroupItems,
                multiple: true,
                hideDisabled: true,
                deselect: true,
                multiSelectAll: true,
                //multiLimit: 15,
                multiShowCount: false,
                multiContainer: ".monitoring-groups-container",
            });

            let SelectFieldRemoveCustomLabels  = tail("#selectRemoveCustomLabels", {
                search: true,
                classNames: "default white",
                descriptions: true,
                hideSelected: true,
                items: labelItems,
                multiple: true,
                hideDisabled: true,
                deselect: true,
                multiSelectAll: true,
                //multiLimit: 15,
                multiShowCount: false,
                multiContainer: ".custom-labels-remove-container",
            });

            let SelectFieldRemoveSystemLabels  = tail("#selectRemoveSystemLabels", {
                search: true,
                classNames: "default white",
                descriptions: true,
                hideSelected: true,
                items: labelItems,
                multiple: true,
                hideDisabled: true,
                deselect: true,
                multiSelectAll: true,
                //multiLimit: 15,
                multiShowCount: false,
                multiContainer: ".system-labels-remove-container",
            });

            SelectFieldCustomLabels.on('open', function (){
                $.ajax({
                    url: getAllCustomLabelsRoute,
                    context: document.body,
                    success: function(data){
                        SelectFieldCustomLabels.options.add(data);
                    }
                });
            })

            SelectFieldSystemLabels.on('open', function (){
                $.ajax({
                    url: getAllSystemLabelsRoute,
                    context: document.body,
                    success: function(data){
                        SelectFieldSystemLabels.options.add(data);
                    }
                });
            })

            SelectFieldFws.on('open', function (){
                $.ajax({
                    url: getAllFwsRoute,
                    context: document.body,
                    success: function(data){
                        SelectFieldFws.options.add(data);
                    }
                });
            })

            SelectFieldConfigs.on('open', function (){
                $.ajax({
                    url: getAllConfigsRoute,
                    context: document.body,
                    success: function(data){
                        SelectFieldConfigs.options.add(data);
                    }
                });
            })

            SelectFieldAgentProfiles.on('open', function (){
                $.ajax({
                    url: getAllAgentProfilesRoute,
                    context: document.body,
                    success: function(data){
                        SelectFieldAgentProfiles.options.add(data);
                    }
                });
            })

            SelectFieldMonitoringGroups.on('open', function (){
                $.ajax({
                    url: getAllMonitoringGroupsRoute,
                    context: document.body,
                    success: function(data){
                        SelectFieldMonitoringGroups.options.add(data);
                    }
                });
            })

            SelectFieldRemoveCustomLabels.on('open', function (){
                $.ajax({
                    url: getAllCustomLabelsRoute,
                    context: document.body,
                    success: function(data){
                        SelectFieldRemoveCustomLabels.options.add(data);
                    }
                });
            })

            SelectFieldRemoveSystemLabels.on('open', function (){
                $.ajax({
                    url: getAllSystemLabelsRoute,
                    context: document.body,
                    success: function(data){
                        SelectFieldRemoveSystemLabels.options.add(data);
                    }
                });
            })

            let routeAddDeviceCustomLabels = "{{ path('ajax_device_add_label')|escape('js') }}";
            let routeAddDeviceSystemLabels = "{{ path('ajax_device_add_system_label')|escape('js') }}";
            let routeAddDeviceFws = "{{ path('ajax_device_add_fw')|escape('js') }}";
            let routeAddDevicesClonedFrom = "{{ path('ajax_device_add_config_profile')|escape('js') }}";
            let routeAddDevicesToMonitoringGroup = "{{ path('ajax_device_add_to_monitoring_group')|escape('js') }}";
            let routeAssignDeviceAgentProfile = "{{ path('ajax_device_add_agent_profile')|escape('js') }}";
            let routeRemoveDevicesClonedFrom = "{{ path('ajax_device_remove_config_profile')|escape('js') }}";
            let routeRemoveDeviceCustomLabels = "{{ path('ajax_device_remove_custom_label')|escape('js') }}";
            let routeRemoveDeviceSystemLabels = "{{ path('ajax_device_remove_system_label')|escape('js') }}";

            $('a#addCustomLabels').click({componentSelect: SelectFieldCustomLabels}, function(e){
                $('#add-device-custom-labels').modal('hide');
                let selectedItems = e.data.componentSelect.options.selected
                let items = [];
                selectedItems.forEach(function(item, index, arr){
                    items.push(item.value);
                })

                let selectedDatatableItems = $.map(oTable.rows(".selected").data(), function (i) {
                    return i
                });

                $.ajax({
                    method: "POST",
                    url: routeAddDeviceCustomLabels,
                    data: {'labels': items, 'selectedDevices': selectedDatatableItems},
                    success:function(result){
                        SelectFieldCustomLabels.reload();
                        oTable.ajax.reload();
                        let toastOptions = {
                            title: "Success",
                            message: result.message,
                            status: 1,
                            timeout: 20000
                        }
                        Toast.create(toastOptions);
                    }});
            });

            $('a#addSystemLabels').click({componentSelect: SelectFieldSystemLabels}, function(e){
                $('#add-device-system-labels').modal('hide');
                let selectedItems = e.data.componentSelect.options.selected
                let items = [];
                selectedItems.forEach(function(item, index, arr){
                    items.push(item.value);
                })

                let selectedDatatableItems = $.map(oTable.rows(".selected").data(), function (i) {
                    return i
                });

                $.ajax({
                    method: "POST",
                    url: routeAddDeviceSystemLabels,
                    data: {'labels': items, 'selectedDevices': selectedDatatableItems},
                    success:function(result){
                        SelectFieldSystemLabels.reload();
                        oTable.ajax.reload();
                        let toastOptions = {
                            title: "Success",
                            message: result.message,
                            status: 1,
                            timeout: 20000
                        }
                        Toast.create(toastOptions);
                    }});
            });

            $('a#addFws').click({componentSelect: SelectFieldFws}, function(e){
                $('#add-device-fw').modal('hide');
                let selectedItems = e.data.componentSelect.options.selected
                let items = [];
                selectedItems.forEach(function(item, index, arr){
                    items.push(item.value);
                })

                let selectedDatatableItems = $.map(oTable.rows(".selected").data(), function (i) {
                    return i
                });

                $.ajax({
                    method: "POST",
                    url: routeAddDeviceFws,
                    data: {'fws': items, 'selectedDevices': selectedDatatableItems},
                    success:function(result){
                        SelectFieldFws.reload();
                        oTable.ajax.reload();
                        if(result.success.length != 0){
                            let toastOptions = {
                                title: "Success",
                                message: result.message + result.success.join(','),
                                status: 1, //'SUCCESS',
                                timeout: 20000
                            }
                            Toast.create(toastOptions);
                        }
                        if(result.errors.length != 0){
                            let toastOptions = {
                                title: "Error",
                                message: 'Fw version cannot be set for devices: ' + result.errors.join(','),
                                status: 2, //'WARNING',
                                timeout: 20000
                            }
                            Toast.create(toastOptions);
                        }
                    }});
            });

            $('a#addConfigs').click({componentSelect: SelectFieldConfigs}, function(e){
                $('#add-device-config').modal('hide');
                let selectedItems = e.data.componentSelect.options.selected
                let items = [];
                selectedItems.forEach(function(item, index, arr){
                    items.push(item.value);
                })

                let selectedDatatableItems = $.map(oTable.rows(".selected").data(), function (i) {
                    return i
                });

                let overwriteCheckboxStatus = $('#overwrite').prop('checked');

                $.ajax({
                    method: "POST",
                    url: routeAddDevicesClonedFrom,
                    data: {'devices': items, 'selectedDevices': selectedDatatableItems, 'overwrite': overwriteCheckboxStatus},
                    success:function(result){
                        SelectFieldConfigs.reload();
                        oTable.ajax.reload();
                        if(result.success.length != 0){
                            let toastOptions = {
                                title: "Success",
                                message: result.message + result.success.join(','),
                                status: 1,
                                timeout: 20000
                            }
                            Toast.create(toastOptions);
                        }
                        if(result.errors.length != 0){
                            let toastOptions = {
                                title: "Error",
                                message: 'Config Profile cannot be set for devices: ' + result.errors.join(','),
                                status: 2, //'ERROR',
                                timeout: 20000
                            }
                            Toast.create(toastOptions);
                        }
                        $('#overwrite').prop('checked', false);
                    }});
            });

            $('a#assignAgentProfiles').click({componentSelect: SelectFieldAgentProfiles}, function(e){
                $('#add-device-agent-profile').modal('hide');
                let selectedItems = e.data.componentSelect.options.selected
                let items = [];
                selectedItems.forEach(function(item, index, arr){
                    items.push(item.value);
                })

                let selectedDatatableItems = $.map(oTable.rows(".selected").data(), function (i) {
                    return i
                });

                $.ajax({
                    method: "POST",
                    url: routeAssignDeviceAgentProfile,
                    data: {'agentProfiles': items, 'selectedDevices': selectedDatatableItems},
                    success:function(result){
                        SelectFieldConfigs.reload();
                        oTable.ajax.reload();
                        if(result.success.length != 0){
                            let toastOptions = {
                                title: "Success",
                                message: result.message + result.success.join(','),
                                status: 1,
                                timeout: 20000
                            }
                            Toast.create(toastOptions);
                        }
                        if(result.errors.length != 0){
                            let toastOptions = {
                                title: "Error",
                                message: 'Agent Profile cannot be set for devices: ' + result.errors.join(','),
                                status: 2, //'ERROR',
                                timeout: 20000
                            }
                            Toast.create(toastOptions);
                        }
                    }});
            });

            $('a#addMonitoringGroup').click({componentSelect: SelectFieldMonitoringGroups}, function(e){
                $('#add-devices-to-monitoring-group').modal('hide');
                let selectedItems = e.data.componentSelect.options.selected
                let items = [];
                selectedItems.forEach(function(item, index, arr){
                    items.push(item.value);
                })

                let selectedDatatableItems = $.map(oTable.rows(".selected").data(), function (i) {
                    return i
                });

                $.ajax({
                    method: "POST",
                    url: routeAddDevicesToMonitoringGroup,
                    data: {'monitoringGroups': items, 'selectedDevices': selectedDatatableItems},
                    success:function(result){
                        SelectFieldMonitoringGroups.reload();
                        oTable.ajax.reload();
                        let toastOptions = {
                            title: "Success",
                            message: result.message,
                            status: 1,
                            timeout: 20000
                        }
                        Toast.create(toastOptions);
                    }});
            });

            $('a#remove-config-confirm').click(function(e){
                $('#remove-device-config').modal('hide');

                let selectedDatatableItems = $.map(oTable.rows(".selected").data(), function (i) {
                    return i
                });

                $.ajax({
                    method: "POST",
                    url: routeRemoveDevicesClonedFrom,
                    data: {'selectedDevices': selectedDatatableItems},
                    success:function(result){
                        SelectFieldConfigs.reload();
                        oTable.ajax.reload();
                        let toastOptions = {
                            title: "Success",
                            message: result.message + result.success.join(','),
                            status: 1,
                            timeout: 20000
                        }
                        Toast.create(toastOptions);
                    }});
            });

            $('a#remove-custom-label-confirm').click({componentSelect: SelectFieldRemoveCustomLabels}, function(e){
                $('#remove-device-custom-label').modal('hide');
                let selectedItems = e.data.componentSelect.options.selected
                let items = [];
                selectedItems.forEach(function(item, index, arr){
                    items.push(item.value);
                })

                let selectedDatatableItems = $.map(oTable.rows(".selected").data(), function (i) {
                    return i
                });

                $.ajax({
                    method: "POST",
                    url: routeRemoveDeviceCustomLabels,
                    data: {'labels': items, 'selectedDevices': selectedDatatableItems},
                    success:function(result){
                        SelectFieldRemoveCustomLabels.reload();
                        oTable.ajax.reload();
                        let toastOptions = {
                            title: "Success",
                            message: result.message,
                            status: 1,
                            timeout: 20000
                        }
                        Toast.create(toastOptions);
                    }});
            });

            $('a#remove-system-label-confirm').click({componentSelect: SelectFieldRemoveSystemLabels}, function(e){
                $('#remove-device-system-label').modal('hide');
                let selectedItems = e.data.componentSelect.options.selected
                let items = [];
                selectedItems.forEach(function(item, index, arr){
                    items.push(item.value);
                })

                let selectedDatatableItems = $.map(oTable.rows(".selected").data(), function (i) {
                    return i
                });

                $.ajax({
                    method: "POST",
                    url: routeRemoveDeviceSystemLabels,
                    data: {'labels': items, 'selectedDevices': selectedDatatableItems},
                    success:function(result){
                        SelectFieldRemoveSystemLabels.reload();
                        oTable.ajax.reload();
                        let toastOptions = {
                            title: "Success",
                            message: result.message,
                            status: 1,
                            timeout: 20000
                        }
                        Toast.create(toastOptions);
                    }});
            });

            $('a#reboot-confirm-button').click(function(e){
                $('#confirm-reboot').modal('hide');

                $.ajax({
                    method: "GET",
                    url: $('#reboot-button').attr('href'),
                    success:function(result){
                        let toastOptions = {
                            title: "Success",
                            message: result.message + result.success.join(','),
                            status: 1,
                            timeout: 20000
                        }
                        Toast.create(toastOptions);
                    },
                    error:function (result) {
                        var err = JSON.parse(result.responseText);
                                                let toastOptions = {
                            title: "Error",
                            message: err.message,
                            status: 2,
                            timeout: 20000
                        }
                        Toast.create(toastOptions);
                    }

                });
            });

        });

    </script>

{% endblock %}