var VPpengumuman = (function () {
    let vp_template = `
    <div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-inner" id="pencar" style="border-radius:1rem">
        </div>
    </div>
    `
    return {
        template: vp_template,
        computed: {
            pengumuman() {
                return this.$store.state.config.pengumuman;
            }
        },
        watch: {
            pengumuman() {
                this.build();
            }
        },
        methods: {
            build() {
                let temp = ``;
                this.pengumuman.forEach((elem, i) => {
                    temp += this.buildItem(elem, i == 0)
                });
                document.getElementById('pencar').innerHTML = this.pengumuman.length > 0 ? temp : '';
            },
            buildItem(p, active = false) {
                return `<div class="carousel-item ${active ? 'active' : ''}">
                            <div class="single-hero-slide bg-img bg-overlay p-3">
                                <div class="h-100 d-flex align-items-center">
                                    <div class="slide-text">
                                        <h3 class="text-white"><i class="bi bi-bell"></i> ${p.judul}</h3>
                                        <small><span class="text-white text-muted"><i class="bi bi-bookmark"></i> ${p.time}</span></small>
                                        <div class="text-white">${p.body}</div>
                                    </div>
                                </div>
                            </div>
                        </div>`;
            },
        }
    }
})();