<nz-card class="status-card">
    <ng-container *ngIf="status$ | async as items">
        <div class="status-section">
            <h3>Display Compiler</h3>
            <nz-descriptions nzBordered [nzColumn]="1">
                <nz-descriptions-item nzTitle="Status">
                    <nz-tag
                        [nzColor]="items[0]?.isRunning ? 'success' : 'error'"
                    >
                        {{ items[0]?.isRunning ? "Running" : "Stopped" }}
                    </nz-tag>
                </nz-descriptions-item>
                <nz-descriptions-item nzTitle="Queue Size">
                    {{ items[0]?.queueSize }}
                </nz-descriptions-item>
                <nz-descriptions-item nzTitle="Total Processed">
                    {{ items[0]?.totalProcessed }}
                </nz-descriptions-item>
                <nz-descriptions-item nzTitle="Last Error">
                    <span class="error-text">{{
                        items[0]?.lastError || "None"
                    }}</span>
                </nz-descriptions-item>
            </nz-descriptions>
        </div>

        <nz-divider></nz-divider>

        <div class="status-section">
            <h3>Grid Compiler</h3>
            <nz-descriptions nzBordered [nzColumn]="1">
                <nz-descriptions-item nzTitle="Status">
                    <nz-tag
                        [nzColor]="items[1]?.isRunning ? 'success' : 'error'"
                    >
                        {{ items[1]?.isRunning ? "Running" : "Stopped" }}
                    </nz-tag>
                </nz-descriptions-item>
                <nz-descriptions-item nzTitle="Queue Size">
                    {{ items[1]?.queueSize }}
                </nz-descriptions-item>
                <nz-descriptions-item nzTitle="Total Processed">
                    {{ items[1]?.totalProcessed }}
                </nz-descriptions-item>
                <nz-descriptions-item nzTitle="Last Error">
                    <span class="error-text">{{
                        items[1]?.lastError || "None"
                    }}</span>
                </nz-descriptions-item>
            </nz-descriptions>
        </div>

        <nz-divider></nz-divider>

        <div class="status-section">
            <h3>Location Compiler</h3>
            <nz-descriptions nzBordered [nzColumn]="1">
                <nz-descriptions-item nzTitle="Status">
                    <nz-tag
                        [nzColor]="items[2]?.isRunning ? 'success' : 'error'"
                    >
                        {{ items[2]?.isRunning ? "Running" : "Stopped" }}
                    </nz-tag>
                </nz-descriptions-item>
                <nz-descriptions-item nzTitle="Queue Size">
                    {{ items[2]?.queueSize }}
                </nz-descriptions-item>
                <nz-descriptions-item nzTitle="Total Processed">
                    {{ items[2]?.totalProcessed }}
                </nz-descriptions-item>
                <nz-descriptions-item nzTitle="Last Error">
                    <span class="error-text">{{
                        items[2]?.lastError || "None"
                    }}</span>
                </nz-descriptions-item>
            </nz-descriptions>
        </div>

        <nz-divider></nz-divider>

        <div class="status-section">
            <h3>Branch Compiler</h3>
            <nz-descriptions nzBordered [nzColumn]="1">
                <nz-descriptions-item nzTitle="Status">
                    <nz-tag
                        [nzColor]="items[3]?.isRunning ? 'success' : 'error'"
                    >
                        {{ items[3]?.isRunning ? "Running" : "Stopped" }}
                    </nz-tag>
                </nz-descriptions-item>
                <nz-descriptions-item nzTitle="Queue Size">
                    {{ items[3]?.queueSize }}
                </nz-descriptions-item>
                <nz-descriptions-item nzTitle="Total Processed">
                    {{ items[3]?.totalProcessed }}
                </nz-descriptions-item>
                <nz-descriptions-item nzTitle="Last Error">
                    <span class="error-text">{{
                        items[3]?.lastError || "None"
                    }}</span>
                </nz-descriptions-item>
            </nz-descriptions>
        </div>
    </ng-container>
</nz-card>
