<div class="statusBox">
    <h2>{{ 'dashboard.status.encoder_title' | translate }}</h2>
    <div *ngIf="encoders?.length != 0; else noEncoders">
        <div *ngFor="let encoder of encoders">
            <ul>
                <li *ngIf="encoder.ParentId == 0">
                    <div [innerHTML]="'dashboard.status.encoder_text' 
                        | translate: { DisplayName: encoder.Inputs[0].DisplayName, CardDetails: cardDetails(encoder.Id),
                        HostName: encoder.HostName, State: encoderStatuses(encoder.Id)}"></div>
                    <ng-container *ngFor="let sub of encoders">
                        <ng-container *ngIf="sub.Recording && (sub.Id == encoder.Id || sub.ParentId == encoder.Id)">
                            '{{ sub.Recording.Title }}' on {{ sub.Recording.Channel.CallSign }}.
                            {{ 'dashboard.status.endtime_text' |
                            translate: { EndTime: utility.formatTime(sub.Recording.Recording.EndTs) } }}
                            <br>
                        </ng-container>
                    </ng-container>
                </li>
            </ul>
        </div>
    </div>
</div>
<ng-template #noEncoders>
    <div>{{ 'dashboard.status.no_encoders' | translate }}</div>
</ng-template>