{* Prepare statically available data which does not need to be reloaded via AJAX *}
<script type="text/javascript">
    window.et360_initialData = {json_encode($et360_initialData)};
    window.et360_adminLocale = '{$language}';
    window.et360_adminBaseUrl = '{$et360_adminBaseUrl}';
</script>


{* Provide a container for the app *}
<div id="et360-app">
    <div class="et360-app-loading text-center">
        <i class="fa fas fa-spinner fa-spin"></i> {__('et360-app-loading')}
    </div>
</div>

{* Add all assets loaded by the backend controller *}
{foreach $et360_assets['css'] as $cssAsset}
    <link href="{$et360_appPath}{$cssAsset}?v={$et360_pluginVersion}" rel="stylesheet" />
{/foreach}
{foreach $et360_assets['js'] as $jsAsset}
    <script src="{$et360_appPath}{$jsAsset}?v={$et360_pluginVersion}" defer="defer" type="text/javascript"></script>
{/foreach}

{* Load all google fonts that might be needed *}
{if !empty($et360_initialData['fontsUrl'])}
    <link href='{$et360_initialData['fontsUrl']}' rel='stylesheet' type='text/css'>
{/if}

{* Make the ET360 app container take ALL of the content wrapper *}
<script type="text/javascript">
    window.addEventListener('DOMContentLoaded', function() {
        (function($) {
            // at this point the defered JS has been loaded
            var $appContainer = $('#et360-app');
            $appContainer.appendTo('.backend-main');
            $('#content_wrapper').hide();
        })(jQuery);

        // Kill CKEDITOR instances periodically - this is not great but CK Editor conflicts with other editors...
        window.setInterval(function() {
            if(typeof CKEDITOR !== 'undefined') {
                for (let name in CKEDITOR.instances) {
                    if(CKEDITOR.instances.hasOwnProperty(name)) {
                        CKEDITOR.instances[name].destroy(true);
                    }
                }
            }
        }, 250);
    });
</script>