<template>
    <div class="my-10 md:my-20">
        <div class="container mx-auto">
            <div id="tv-medium-widget"></div>
            <div class="tradingview-widget-copyright"><a href="https://uk.tradingview.com/symbols/LSE-TPFG/" rel="noopener" target="_blank"><span class="blue-text">The Property Franchise Group Quotes</span></a> by TradingView</div>
        </div>
    </div>
</template>

<script>
/* global TradingView */
export default {
    props: {
        block: {
            type: Object,
            required: true
        }
    },
    head: {
        script: [
            { src: 'https://s3.tradingview.com/tv.js', body: true, defer: true }
        ]
    },
    mounted() {
        // If we don't wait 1 second before this loads
        // it causes some weird issues in Safari on iOS
        setTimeout(() => {
            new TradingView.MediumWidget(
                {"container_id": "tv-medium-widget", "symbols": [["The Property Franchise Group", "LSE:TPFG|1y"]], "greyText": "Quotes by", "gridLineColor": "#e9e9ea", "fontColor": "#83888D", "underLineColor": "#dbeffb", "trendLineColor": "#4bafe9", "width": "100%", "height": "400px", "locale": "uk"}
            );
        }, 1000);
    }
}
</script>