<vdr-action-bar>
    <vdr-ab-left>
        <div class="system-status-header" *ngIf="healthCheckService.status$ | async as status">
            <div class="status-icon">
                <clr-icon
                    [attr.shape]="status === 'ok' ? 'check-circle' : 'exclamation-circle'"
                    [ngClass]="{ 'is-success': status === 'ok', 'is-danger': status !== 'ok' }"
                    size="48"
                ></clr-icon>
            </div>
            <div class="status-detail">
                <ng-container *ngIf="status === 'ok'; else error">
                    {{ 'system.health-all-systems-up' | translate }}
                </ng-container>
                <ng-template #error>
                    {{ 'system.health-error' | translate }}
                </ng-template>
                <div class="last-checked">
                    {{ 'system.health-last-checked' | translate }}:
                    {{ healthCheckService.lastCheck$ | async | localeDate: 'mediumTime' }}
                </div>
            </div>
        </div>
    </vdr-ab-left>
    <vdr-ab-right>
        <vdr-action-bar-items locationId="system-status"></vdr-action-bar-items>
        <button class="btn btn-secondary" (click)="healthCheckService.refresh()">
            <clr-icon shape="refresh"></clr-icon> {{ 'system.health-refresh' | translate }}
        </button>
    </vdr-ab-right>
</vdr-action-bar>

<table class="table">
    <thead>
        <tr>
            <th class="left">
                {{ 'common.name' | translate }}
            </th>
            <th class="left">
                {{ 'system.health-status' | translate }}
            </th>
            <th class="left">
                {{ 'system.health-message' | translate }}
            </th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let row of healthCheckService.details$ | async">
            <td class="align-middle left">{{ row.key }}</td>
            <td class="align-middle left">
                <vdr-chip [colorType]="row.result.status === 'up' ? 'success' : 'error'">
                    <ng-container *ngIf="row.result.status === 'up'; else down">
                        <clr-icon shape="check-circle"></clr-icon>
                        {{ 'system.health-status-up' | translate }}
                    </ng-container>
                    <ng-template #down>
                        <clr-icon shape="exclamation-circle"></clr-icon>
                        {{ 'system.health-status-down' | translate }}
                    </ng-template>
                </vdr-chip>
            </td>
            <td class="align-middle left">{{ row.result.message }}</td>
        </tr>
    </tbody>
</table>
