@if ($page?->translatable)
<div class="row">
    <div class="col google-translate-widget text-center my-2 d-print-none">
        <div id="google_translate_element"></div>
        <p class="mt-2 text-white" style="font-size: 0.6rem;">You can translate the content of this page by selecting a language in the select box.</p>
    </div>
</div>

@push('js')
    <script type="text/javascript">
        function googleTranslateElementInit() {
            new google.translate.TranslateElement({
                pageLanguage: 'en',
            }, 'google_translate_element');
        }

        function checkTranslateTopBar() {
            let translateTopBarIframe = $("iframe[id=':1.container']");

            if (translateTopBarIframe.length) {
                translateTopBarIframe
                    .contents()
                    .find('head')
                    .append($('<style rel="stylesheet">@media only screen and (max-width: 600px) { td#options, td > span.VIpgJd-ZVi9od-ORHb-bN97Pc {display: none;} }</style>'));

                clearInterval(timer)
            }
        }

        let timer = setInterval(checkTranslateTopBar, 1000);
    </script>

    <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
@endpush
@endif