<script>
    (function($) {
        $(document).ready(function() {
            var signpost;

            signpost = new jBox('Modal', {
                {{ (modal_configuration.modal_title) ? ('title: \'' ~ modal_configuration.modal_title ~ '\',')|raw : '' }}
                content: $('#modal-content-{{ modal_configuration.id }}').html(),
                closeButton: '{{ (modal_configuration.modal_title) ? 'title' : 'box' }}',
                width: 650,
                theme: '{{ (modal_configuration.borderless) ? 'Borderless' : '' }}'{% if not modal_configuration.show_once is empty %},
                onClose: function() {
                    localStorage.setItem('popState-{{ modal_configuration.id }}',Date.now());
                    sessionStorage.setItem('popState-{{ modal_configuration.id }}','shown');
                }
                {% endif %}

            });

            {% if not modal_configuration.show_once is empty %}if((localStorage.getItem('popState-{{ modal_configuration.id }}') < Date.now()-3600 && sessionStorage.getItem('popState-{{ modal_configuration.id }}') != 'shown')){
                {% endif %}setTimeout(function() {
                    signpost.open();
                },{{ modal_configuration.delay|number_format * 1000 }});
            {% if not modal_configuration.show_once is empty %} } {% endif %}

        });
    })(jQuery);
</script>

<div style="display: none" id="modal-content-{{ modal_configuration.id }}">
{{ details|raw }}
</div>