{$block_props = []}
{$href = ''}
{$target = ''}
{$rel = ''}

{if !empty($data->data['link_props'])}
    {$link_props = $data->data['link_props']}
    {if !empty($link_props.href)}
        {$href = $link_props.href}
    {else}
        {$href = $data->data['additional']['href']}
    {/if}
    {if !empty($link_props.target)}
        {$target = $link_props.target}
    {/if}
    {if !empty($link_props.rel)}
        {$rel = $link_props.rel}
    {/if}
{/if}
{$static_classes_props = 'style-wrapper btn'|cat:(($disabled)?' disabled':'')}
{$anchor_id = $data->data['id']|default:0}
<a {if $anchor_id}id="{$anchor_id|escape}"{/if} href="{$href}" class="{$static_classes_props}" data-static="{$static_classes_props}" data-block-id="{$data->getId()|escape}" data-page-id="{$data->getPageId()|escape}"{if $is_backend} contenteditable="true"{/if} {if !empty($target)}target="_blank"{/if} {if !empty($rel)}rel="nofollow"{/if}>
    {$data->data['html']}
</a>

{if $is_backend}
<script>$(function() { "use strict";
    const block_id = {$data->getId()|json_encode};
    const $wrapper = $('.btn[data-block-id="'+block_id+'"]');
    let data = {$data->data|json_encode};
    $wrapper.on('input', function() {
        data = $.extend({}, $.wa.editor.api.block_storage.getData(block_id));
        data.html = $(this).html();
        $.wa.editor.saveBlockData(block_id, data);
    });

    $wrapper.on('block_data_updated', function(event, updated_block_id, data_new) {
        event.stopPropagation();

        if (updated_block_id == block_id) {
            updateBlockStyles($wrapper, data_new, block_id);

            if (data.product_id !== data_new.product_id && data_new.link_props.href !== data_new.additional.href) {
                data_new.link_props.href = data_new.additional.href;
                $.wa.editor.api.setSelectedBlock(block_id, false, true);
                data.product_id = data_new.product_id;
                $(this).attr('href', data_new.link_props.href);
            }
            $wrapper.toggleClass('disabled', data_new.additional.disabled);
        }
    });

});</script>
{else}
<script>(function() { "use strict";
    const block_id = {$data->getId()|json_encode};
    const $wrapper = $('.btn[data-block-id="'+block_id+'"]');
    const data = {$data->data|json_encode};
    updateBlockStyles($wrapper, data, block_id);
})();</script>
{/if}