<style>
    #modal {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        opacity: 0;
        transition: opacity .5s ease;
        width: 500px;
        height: 480px;
        z-index: -1;
    }
    #modal.visible {
        opacity: 1;
        transition: opacity .2s ease;
        z-index: 9000;
    }


    #overlay {
        position: fixed;
        top: 0;
        left: 0;
        opacity: 0;
        transition: opacity .2s ease;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, .45);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(20px);
        z-index: -1;
        transform: scale(0);
    }
    #overlay.visible {
        transition: opacity .2s ease;
        opacity: 1;
        transform: scale(1);
        z-index: 1000;
    }

    #dismiss_modal {
        width: 24px;
        height: 24px;
        position: absolute;
        right: 10px;
        top: 8px;
        opacity: .5;
        cursor: pointer;
        z-index: 1200;
    }

    @media screen and (max-width: 600px) {
        #modal.visible {
            width: 90%;
            height: 80%;
            top: 28px;
        }
        #overlay {
            backdrop-filter: blur(3px);
        }
    }
</style>

<div id="overlay"></div>
<div id="modal" class="bg-white p-8  rounded-2xl shadow-2xl">
    <div id="dismiss_modal">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
          </svg>
          
    </div>
    <div class="">
        <div class="items-center">
            <img class="h-5 lg:h-7 w-auto my-4" src="{{assets_dir}}/logo/logo_color.svg" alt="">
            <div class="text-2xl font-semibold my-2">
                La newsletter gratuita 
            </div>
            <p>I migliori contenuti realizzati da HDmotori, impreziositi da commenti e sintesi inediti, ogni giorno nella tua e-mail.</p>
            {% include "templates/components/common/newsletter_form.twig" %}
        </div>
    </div>
</div>

<script>
    function shouldShowModal() {
        const lastShown = localStorage.getItem('modalLastShown');
        if (!lastShown ) {
            return true;
        }
        const now = new Date().getTime();
        const oneDay = 24 * 60 * 60 * 1000; // millisecondi in un giorno
        const thirtyDays = oneDay * 30;    //  millisecondi in 30 giorni
        return (now - lastShown) > thirtyDays;
    }

    function showModal() {



        document.getElementById('modal').classList.add('visible');
        document.getElementById('overlay').classList.add('visible');
        localStorage.setItem('modalLastShown', new Date().getTime());
    }


    // Show modal on scroll
    window.onscroll = function () {
        let scrollPosition = window.scrollY || document.documentElement.scrollTop;
        let windowHeight = document.documentElement.scrollHeight - window.innerHeight;
        let scrollPercentage = (scrollPosition / windowHeight) * 100;

        if (scrollPercentage > 25 && shouldShowModal()) {
            
        //if (scrollPercentage > 0 ) {
            showModal();
            window.onscroll = null; // Remove the scroll event listener after displaying the modal
        }

    };

    // Hide modal on overlay click
    document.getElementById('overlay').onclick = function () {
        document.getElementById('modal').classList.remove('visible');
        document.getElementById('overlay').classList.remove('visible');
    };
    document.getElementById('dismiss_modal').onclick = function () {
        document.getElementById('modal').classList.remove('visible');
        document.getElementById('overlay').classList.remove('visible');
    };
</script>



