
<div class="cache-status-container">
    <ng-container *ngIf="combinedStatus$ | async as combinedStatus">
        <nz-card>
            <nz-descriptions nzTitle="Offline Cache Service" [nzColumn]="1" nzBordered>
                <ng-container *ngIf="combinedStatus.offlineCacheStatus as status">
                    <nz-descriptions-item nzTitle="State Machine State">
                        {{ status.stateString }}
                    </nz-descriptions-item>
                    <nz-descriptions-item nzTitle="Next State">
                        {{ status.nextStateString || "None" }}
                    </nz-descriptions-item>
                    <nz-descriptions-item nzTitle="Timer">
                        {{ status.secondsUntilNextStateCheckString || "None" }}
                    </nz-descriptions-item>
                    <nz-descriptions-item nzTitle="Last Bandwidth Metric">
                        {{ status.lastMetric || "None" }}
                    </nz-descriptions-item>
                    <nz-descriptions-item nzTitle="Is Slow Network">
                        <nz-tag [nzColor]="status.isSlowNetwork ? 'warning' : 'success'">
                            {{ status.isSlowNetwork?.toString() || "None" }}
                        </nz-tag>
                    </nz-descriptions-item>
                    <nz-descriptions-item nzTitle="Last Cache Start">
                        {{ status.lastCachingStartDate | date:'medium' }}
                    </nz-descriptions-item>
                    <nz-descriptions-item nzTitle="Last Cache Complete">
                        {{ status.lastCachingCompleteDate | date:'medium' }}
                    </nz-descriptions-item>
                    <nz-descriptions-item nzTitle="Last Cache Abort">
                        {{ status.lastCachingAbortDate | date:'medium' }}
                    </nz-descriptions-item>
                </ng-container>
            </nz-descriptions>
        </nz-card>

        <nz-card *ngFor="let status of combinedStatus.loaderStatusList" class="status-card">
            <nz-descriptions [nzTitle]="status.pluginName + ' - ' + status.indexName" [nzColumn]="1" nzBordered>
                <nz-descriptions-item nzTitle="Load Progress">
                    <nz-progress
                        [nzPercent]="status.percentComplete"
                        [nzStatus]="status.percentComplete === 100 ? 'success' : 'active'"
                    ></nz-progress>
                </nz-descriptions-item>
                <nz-descriptions-item nzTitle="Loading Queue Count">
                    {{ status.loadingQueueCount }}
                </nz-descriptions-item>
                <nz-descriptions-item nzTitle="Server Chunks">
                    {{ status.totalLoadedCount || "?" }}
                </nz-descriptions-item>
                <nz-descriptions-item nzTitle="Has Completed Once">
                    <nz-tag [nzColor]="status.initialFullLoadComplete ? 'success' : 'processing'">
                        {{ status.initialFullLoadComplete }}
                    </nz-tag>
                </nz-descriptions-item>
            </nz-descriptions>
        </nz-card>
    </ng-container>
</div>