@props(['tagembed_id', 'aplicar_estilo' => false])
<div class="tagembed-widget" style="width:100%;height:100%" data-widget-id="{{ $tagembed_id }}"
     data-tags="false" view-url="https://widget.tagembed.com/{{ $tagembed_id }}"></div>

@pushonce('footer-scripts')
    @if($aplicar_estilo)
        <script>
            function styleWidget() {
                const widget = document.querySelector('.tagembed-widget');
                const container = widget.querySelector('.tb_sp_post_container');

                if (container) {
                    container.style.display = 'grid';
                    let cols = 4;
                    if (window.innerWidth <= 400) {
                        cols = 1
                    } else if (window.innerWidth <= 800) {
                        cols = 2
                    }
                    container.style.gridTemplateColumns = `repeat(${cols}, 1fr)`
                    container.style.gap = '28px';

                    const cards = container.querySelectorAll('[role="article"]');
                    cards.forEach(card => {
                        card.style.width = '100%';
                    });
                }
            }

            // Initial load
            const widget = document.querySelector('.tagembed-widget');
            const observer = new MutationObserver((mutations, obs) => {
                const container = widget.querySelector('.tb_sp_post_container');
                if (container) {
                    styleWidget();
                    obs.disconnect();
                }
            });
            observer.observe(widget, {childList: true, subtree: true});

            window.addEventListener('resize', () => {
                setTimeout(() => styleWidget(), 1);
            });
        </script>
    @endif
    @if(!empty($tagembed_id))
        <script src="https://widget.tagembed.com/embed.min.js" type="text/javascript"></script>
    @endif
@endpushonce