
// Initialize the main Vue instance
document.addEventListener('DOMContentLoaded', function () {
    new Vue({
        el: '#dashboard',
        data: {
            imports: [],
            importsLoaded: false
        },
        mounted() {
            var instance = this;
            this.GetImports();
            window.setInterval(function () {
                instance.GetImports()
            }, 1000);
        },
        methods: {
            async GetImports() {
                var importsResponse = await fetch("/api/Import/GetAllImports");
                this.imports = await importsResponse.json();
                this.importsLoaded = true;
            },
            async DeleteImport(importItem) {
                if (confirm("Are you sure you want to delete this import?")) {
                    await fetch("/api/Import/DeleteImport?id=" + importItem.id);
                    this.GetImports();
                }
            }
        },
        template:
            `
            <div>
                <h3 v-if="importsLoaded">Imports:</h3>
                <div v-if="imports && imports.length > 0" class="row">
                    <div class="col-md-6" v-for="importItem in imports" :key="'import-id-' + importItem.id">
                        <div class="card stats-card mb-3">
                            <div class="card-body">
                                <div class="d-flex align-items-center">
                                    <i class="bi bi-folder dashboard-icon"></i>
                                    <div>
                                        <div class="text-muted">{{importItem.status}}</div>
                                        <div class="stats-number mb-3" style="max-height:1em;" :title="importItem.name">{{importItem.name && importItem.name.length > 0 ? importItem.name : 'Untitled import'}}</div>
                                        <div class="text-muted">{{importItem.totalItems}} total</div>
                                        <div class="text-muted">{{importItem.processedItems}} processed</div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-footer bg-light-gray d-flex align-items-center justify-content-between">
                                <a class="text-danger" href="javascript:void(0)" @click="DeleteImport(importItem)">Delete</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-else class="row">
                    <div class="col-md-12">
                        No imports were recorded.
                    </div>
                </div>
            </div>
        `
    });
});