{#
/**
 * 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/>.
 */
#}
<script type="text/javascript">
    // Runs after form opens
    function forecastio_form_edit_open() {
        var $form = $(this);

        // Update form fields based on template options
        var updateTemplateOptions = function(updateImage) {
            var templates = $(this).data().extra;
            var templateId = $(this).find('#templateId').val();

            // Hide all options first
            $form.find('.template-option').addClass('d-none');

            // Options from template handling
            $.each(templates, function(templateIndex, template) {
                if(template.id == templateId) {
                    // Dynamic options
                    for (const key in template.options) {
                        if (Object.hasOwnProperty.call(template.options, key)) {
                            var element = template.options[key];
                            $form.find('.template-option-' + key).toggleClass('d-none', !template.options[key]);
                        }
                    }

                    // Upgrade background image option based on
                    if(updateImage) {
                        $form.find('#background-image').val(template.background);
                        handleBackgroundOverride();
                    }
                }
            });
        }.bind(this);

        var filterTemplates = function (refresh) {
            // Get filter value
            var templateTypeValue = $(this).find('#templateType').val();
            var templateOrientationValue = $(this).find('#templateOrientation').val();

            // Set dropdown filter option
            $(this).find('#templateId').data('filterClass', [templateTypeValue, templateOrientationValue]);

            // Clear template id if it's not selected
            if(refresh && $(this).find('#overrideTemplate').is(':checked') == false) {
                $(this).find('#templateId').val(null).trigger('change');
            }
        }.bind(this);

        var handleBackgroundOverride = function () {
            $form.find('.background-select-list').toggle($(this).find('#background-image').val() != 'none');
        }.bind(this);

        // Set duration field, using the helper ()
        formHelpers.setupCheckboxInputFields($(this).find('form'), '#useDuration', '.duration-fields');

        // Set display location field, using the helper ()
        formHelpers.setupCheckboxInputFields($(this).find('form'), '#useDisplayLocation', '', '.locationControls');
        
        // Set override template field, using the helper ()
        formHelpers.setupCheckboxInputFields($(this), '#overrideTemplate', '.template-override-controls, .reloadTemplateButton', '.template-selector-control');

        // Setup editors
        formHelpers.setupTextArea(this, 'currentTemplate');
        formHelpers.setupTextArea(this, 'dailyTemplate');

        // Setup template override
        formHelpers.setupTemplateOverriding(this, '#overrideTemplate', '#templateId', 
            {
                '#currentTemplate': 'main',
                '#dailyTemplate': 'daily',
                '#styleSheet': 'css',
                '#widgetOriginalWidth': 'widgetOriginalWidth',
                '#widgetOriginalHeight': 'widgetOriginalHeight'
            });

        // Trigger set filter on weather type change
        $(this).find('#templateOrientation, #templateType').on('change input', function () {
            filterTemplates(true);
            updateTemplateOptions();
        });

        $(this).find('#templateId').on('change', function() {
            updateTemplateOptions(true);
        });

        // Handle background size select
        $(this).find('#background-image').on('change', function () {
            handleBackgroundOverride();
        });

        filterTemplates(false);
        updateTemplateOptions();
        handleBackgroundOverride();
    }
</script>