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

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

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

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

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

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

                <nz-descriptions-item nzTitle="Last Table Total Update">
                    {{
                        item.searchIndexCompilerQueueLastTableTotalUpdate
                            | date: "medium"
                    }}
                </nz-descriptions-item>
            </nz-descriptions>
        </div>

        <nz-divider></nz-divider>

        <div class="status-section">
            <h3>Search Object (Result) Compiler</h3>
            <nz-descriptions nzBordered [nzColumn]="1">
                <nz-descriptions-item nzTitle="Status">
                    <nz-tag
                        [nzColor]="
                            item.searchObjectCompilerQueueStatus
                                ? 'success'
                                : 'error'
                        "
                    >
                        {{
                            item.searchObjectCompilerQueueStatus
                                ? "Running"
                                : "Stopped"
                        }}
                    </nz-tag>
                </nz-descriptions-item>

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

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

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

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

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

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

    <nz-empty
        *ngIf="!(statusData$ | async)"
        [nzNotFoundContent]="'No status data available'"
    ></nz-empty>
</nz-card>
