window.addEventListener("DOMContentLoaded", function (event) {
    //All the carousels on the page
	let dynamic_carousels = document.querySelectorAll('.cards-section')
    //Loop through them
	for (let i = 0, len = dynamic_carousels.length; i < len; i++){
        let section = dynamic_carousels[i];
        let siteFragmentId = section.getAttribute('data-site-fragment-id');
        let carousel = section.querySelector('.cards');
        //let carouselWrapperDynamic = section.querySelector(".carousel-wrapper-dynamic");
        let elementType = carousel.getAttribute('data-element-type');
        let article_teaser = new Vue({
            el: carousel,
            created() {
                let language = document.getElementById("language").value;
                let elementId = document.getElementById("elementId").value;
                let siteId = document.getElementById("siteId").value;
                let mode = document.getElementById("mode").value;
                let serverUrl = document.getElementById("serverUrl").value;
                this.fetchData(serverUrl, language, elementId, siteId, mode);
            },
            data: {
                contents: null
            },
            methods: {
                fetchData(serverUrl, language, elementId, siteId, mode) {
                    axios.get(serverUrl + 'api/dynamic/getOtherArticles/' + elementId + '/' + siteId + '/' + language + '/' + mode + '/' + siteFragmentId + '/-1/' + elementType).then(response => {
                        this.contents = response.data;
                        setTimeout(function () {
                            //createCarousel(carouselWrapperDynamic, 0);
							//prepareCarousel("carousel1");
                        }, 100);
                    });
                }
            }
        })
    }
});