@props([
    'symbol' => 'BINANCE:BTCUSDT',
    'height' => 280,
])

<div class="vpm-tv-mini" style="height: {{ (int) $height }}px;" data-vpm-tv-mini data-tv-symbol="{{ $symbol }}">
    <div class="tradingview-widget-container vpm-tv-mini__embed" style="height:100%;width:100%;"></div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('[data-vpm-tv-mini]').forEach(function (wrap) {
        function theme() {
            return document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light';
        }

        function render() {
            var host = wrap.querySelector('.vpm-tv-mini__embed');
            if (!host) return;
            host.innerHTML = '<div class="tradingview-widget-container__widget" style="height:100%;width:100%;"></div>';
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.src = 'https://s3.tradingview.com/external-embedding/embed-widget-mini-symbol-overview.js';
            script.async = true;
            script.text = JSON.stringify({
                symbol: wrap.dataset.tvSymbol,
                width: '100%',
                height: '100%',
                locale: 'en',
                dateRange: '12M',
                colorTheme: theme(),
                isTransparent: false,
                autosize: true,
                largeChartUrl: @json(route('app.markets.trading-room')),
                noTimeScale: false,
            });
            host.appendChild(script);
        }

        render();
        window.addEventListener('vpm:theme-change', render);
    });
});
</script>
@endpush