{% use '@Contao/component/_stylesheet.html.twig' %}

{% add 'moo_mediabox' to stylesheets %}
    {% with {file: 'assets/mediabox/css/mediabox-black.min.css'} %}{{ block('stylesheet_component') }}{% endwith %}
{% endadd %}

<script src="{{ asset('js/mediabox.min.js', 'contao-components/mediabox') }}"></script>
<script{{ attrs().setIfExists('nonce', csp_nonce('script-src')) }}>
    window.addEvent('domready', function() {
        var $ = document.id;
        $$('a[data-lightbox]').mediabox({
            // Put custom options here
            clickBlock: false
        }, function(el) {
            return [el.href, el.title, el.getAttribute('data-lightbox')];
        }, function(el) {
            var data = this.getAttribute('data-lightbox').split(' ');
            return (this == el) || (data[0] && el.getAttribute('data-lightbox').match(data[0]));
        });
        $('mbMedia').addEvent('swipe', function(e) {
            (e.direction == 'left') ? $('mbNextLink').fireEvent('click') : $('mbPrevLink').fireEvent('click');
        });
    });
</script>
