{$block_props = []}
{$tag = 'p'}
{if !empty($data->data['tag'])}
    {$tag = $data->data['tag']}
{/if}
{$static_classes_props = 'site-block-product-info style-wrapper f-w'|cat:(($disabled) ? ' opc-5' : '')}
{$anchor_id = $data->data['id']|default:0}
<{$tag} class="{$static_classes_props}" {if $is_backend}style="visibility: hidden;"{/if} data-static="{$static_classes_props}" data-block-id="{$data->getId()|escape}" data-page-id="{$data->getPageId()|escape}" {if $anchor_id}id="{$anchor_id}"{/if}>
    {$html}{* see PHP render() and additionalData() *}
</{$tag}>

{if $is_backend}
<script>
    (function() { "use strict";
        const block_id = {$data->getId()|json_encode};
        const product = {$product|json_encode};
        const wrapper_class = '.site-block-product-info[data-block-id="'+block_id+'"]';
        const $wrapper_parent = $(wrapper_class).parent();

        $wrapper_parent.on('block_data_updated', wrapper_class, function(event, updated_block_id, data) {
            event.stopPropagation();
            if (+updated_block_id === +block_id) {
                const $this = $(this);
                updateBlockStyles($this, data, block_id);
                $this.html(data.additional.html);
                $this.toggleClass('opc-5', data.additional.disabled);
            }
        });
    })();
</script>
{else}
<script>
    (function() { "use strict";
        const block_id = {$data->getId()|json_encode};
        const $wrapper = $('.site-block-product-info[data-block-id="'+block_id+'"]');
        const data = {$data->data|json_encode};
        updateBlockStyles($wrapper, data, block_id);
    })();
</script>
{/if}