{# Bolla di chat fluttuante: apre il bot di Mostry (embed) in un pannello.
   Compare solo se in .env.local è impostato MOSTRY_SITE_BOT_TOKEN. #}
{% if site_bot_token %}
    <div class="cw" id="mostryWidget" data-token="{{ site_bot_token }}">
        <div class="cw__panel" id="cwPanel" hidden>
            <div class="cw__bar">
                <img src="{{ asset('img/logo.png') }}" alt="" class="cw__logo">
                <div class="cw__title">
                    <strong>Assistente Mostry</strong>
                    <span>Di solito risponde subito</span>
                </div>
                <button class="cw__close" id="cwClose" aria-label="Chiudi la chat">
                    <i class="fa-solid fa-xmark"></i>
                </button>
            </div>
            <iframe class="cw__frame" id="cwFrame" title="Chat con l'assistente di Mostry" loading="lazy"></iframe>
        </div>

        <button class="cw__launcher" id="cwLauncher" aria-label="Apri la chat con Mostry" aria-expanded="false">
            <span class="cw__ico cw__ico--open"><i class="fa-solid fa-comment-dots"></i></span>
            <span class="cw__ico cw__ico--close"><i class="fa-solid fa-xmark"></i></span>
        </button>
    </div>

    <script>
        (function () {
            var root = document.getElementById('mostryWidget');
            var launcher = document.getElementById('cwLauncher');
            var panel = document.getElementById('cwPanel');
            var frame = document.getElementById('cwFrame');
            var close = document.getElementById('cwClose');
            var token = root.getAttribute('data-token');
            var caricato = false;
            var aperto = false;

            function apri() {
                if (!caricato) {
                    frame.src = {{ path('home')|json_encode|raw }}.replace(/\/$/, '') + '/embed/' + token;
                    caricato = true;
                }
                panel.hidden = false;
                // forza il reflow così la transizione parte
                void panel.offsetHeight;
                root.classList.add('is-open');
                launcher.setAttribute('aria-expanded', 'true');
                aperto = true;
            }

            function chiudi() {
                root.classList.remove('is-open');
                launcher.setAttribute('aria-expanded', 'false');
                aperto = false;
                // nascondo il pannello a transizione finita
                setTimeout(function () { if (!aperto) panel.hidden = true; }, 250);
            }

            launcher.addEventListener('click', function () { aperto ? chiudi() : apri(); });
            close.addEventListener('click', chiudi);
            document.addEventListener('keydown', function (e) { if (e.key === 'Escape' && aperto) chiudi(); });
        })();
    </script>
{% endif %}