{literal}
    <style>
        #app-comfino-widget-container .comfino-widget {
            max-width: 100%;
        }
    </style>        
{/literal}
<div id="app-comfino-widget-container" data-price="{$price}" data-widget-key="{$widget_key}" data-offer-type="{$offer_type}" data-host="{$host}">
    <div class="preloader"></div>
</div>

{literal}
    <script>
        const container = document.getElementById('app-comfino-widget-container');

        function comfinoWidgetLoad() {
            console.log("loaded!");
            
            const options = {
                widgetKey: container.dataset.widgetKey,
                widgetTargetSelector: '#app-comfino-widget-container',        
                type: 'with-modal',
                offerType: container.dataset.offerType,
                embedMethod: 'INSERT_INTO_FIRST',
                priceObserverLevel: 0,
                price: container.dataset.price,
            };

            const resizeObserver = new MutationObserver(function(entries) {
                const preloaders = container.getElementsByClassName('preloader');
                if (preloaders.length) {
                    preloaders[0].remove();
                }
                console.log("change!");
            });   

            resizeObserver.observe(container,  { childList: true, subtree: true });

            ComfinoProductWidget.init(options);
        }
        
        let script;

        script = document.getElementById('app-comfino-widget-script');

        if (!script) {
            script = document.createElement('script');
            script.onload = comfinoWidgetLoad;
            script.src = '//'+container.dataset.host+'/comfino.min.js';
            script.id = 'app-comfino-widget-script';
            script.async = true;
            document.getElementsByTagName('head')[0].appendChild(script); 
        } else {
            comfinoWidgetLoad();
        }
    </script>
{/literal}