<nz-card class="status-card">
    <ng-container *ngIf="statusData$ | async as item">
        <h3>Document Compiler</h3>
        <nz-descriptions nzBordered [nzColumn]="1">
            <nz-descriptions-item nzTitle="Status">
                <nz-tag
                    [nzColor]="
                        item.documentCompilerQueueStatus ? 'success' : 'error'
                    "
                >
                    {{
                        item.documentCompilerQueueStatus ? "Running" : "Stopped"
                    }}
                </nz-tag>
            </nz-descriptions-item>

            <nz-descriptions-item nzTitle="Queue Size">
                {{ item.documentCompilerQueueSize }}
            </nz-descriptions-item>

            <nz-descriptions-item nzTitle="Total Processed">
                {{ item.documentCompilerQueueProcessedTotal }}
            </nz-descriptions-item>

            <nz-descriptions-item nzTitle="Last Error">
                <span class="error-text">{{
                    item.documentCompilerQueueLastError || "None"
                }}</span>
            </nz-descriptions-item>

            <nz-descriptions-item nzTitle="Last Update Date">
                {{ item.documentCompilerQueueLastUpdateDate | date: "medium" }}
            </nz-descriptions-item>

            <nz-descriptions-item nzTitle="Queue Table Total">
                {{ item.documentCompilerQueueTableTotal }}
            </nz-descriptions-item>

            <nz-descriptions-item nzTitle="Last Queue Table Total Update">
                {{
                    item.documentCompilerQueueLastTableTotalUpdate
                        | date: "medium"
                }}
            </nz-descriptions-item>
        </nz-descriptions>
    </ng-container>
</nz-card>
