<h1>{{ 'testbed.title' | translate }}</h1><hr>
<div *ngIf="(m_hostname$ | async)?.String as hostname; else loading">
    <p>{{ 'testbed.welcome' | translate }} {{hostname}}</p>
</div>
<div *ngIf="(m_timezone$ | async)?.TimeZoneInfo as timezone; else loading">
    <p>It is currently {{timezone.CurrentDateTime}} in timezone {{timezone.TimeZoneID}}, UTC offset
        {{timezone.UTCOffset / 3600}} hours</p>
</div>
<div *ngIf="(m_connectionInfo$ | async)?.ConnectionInfo as info; else loadingOrError">
    <p>MythTV version is {{info.Version.Version}} from branch {{info.Version.Branch}} using protocol
        {{info.Version.Protocol}}</p>
</div>
<div *ngIf="(m_setting$ | async)?.String as setting; else loading">
    <p>Setting "SecurityPin" is currently set to "{{setting}}"</p>
</div>

<div>
    <p>Latest websocket message: {{ m_websocketMsg }}</p>
</div>

<div *ngIf="(m_databaseStatus$ | async)?.DatabaseStatus as dbstatus; else loading">
    <!-- <p>Database is "{{dbstatus.Connected ? Connected : Not Connected}}"</p> -->
</div>

<p-accordion class="col-12 w-full">
    <ng-container *ngIf="(m_storageGroupList$ | async)?.RecStorageGroupList as StorageGroupDir; else loading">
        <p-accordionTab header="Storage Groups">
            <ul>
                <ng-container *ngFor="let sg of StorageGroupDir">
                    <li>Storage Group: {{sg}}</li>
                </ng-container>
            </ul>
        </p-accordionTab>
    </ng-container>

    <ng-container *ngIf="(m_storageGroupDirs$ | async)?.StorageGroupDirList as sgArray; else loading">
        <p-accordionTab header="Storage Group Dir List">
            <ul>
                <ng-container *ngFor="let sg of sgArray.StorageGroupDirs">
                    <li>SG: {{ sg.GroupName }}, Directory: {{ sg.DirName }}</li>
                </ng-container>
            </ul>
        </p-accordionTab>
    </ng-container>

    <ng-container *ngIf="(m_settingsList$ | async) as s_list; else loading">
        <p-accordionTab header="Settings List on host {{ s_list.SettingList.HostName }}">
            <ng-template pTemplate="content">
                <ul>
                    <ng-container *ngFor="let setting of (s_list.SettingList.Settings| keyvalue)">
                        <li>{{ setting.key }}: {{ setting.value }}</li>
                    </ng-container>
                </ul>
            </ng-template>
        </p-accordionTab>
    </ng-container>

    <ng-container *ngIf="(m_hashTest$ | async) as file; else loading">
        <p-accordionTab header="File Hash">
            <ng-template pTemplate="content">
                File Hash is {{ file.Hash }}
            </ng-template>
        </p-accordionTab>
    </ng-container>

    <ng-container *ngIf="(m_categoryList$ | async) as categoryList; else loading">
        <p-accordionTab header="Category List">
            <ng-template pTemplate="content">
                <ul>
                    <ng-container *ngFor="let category of categoryList.CategoryList">
                        <li>{{category}}</li>
                    </ng-container>
                </ul>
            </ng-template>
        </p-accordionTab>
    </ng-container>
</p-accordion>

<div *ngIf="(m_iconUrl$ | async)?.urls as url; else loading">
    <img src={{url}} height="57"/>
</div>

<div *ngIf="(m_downloadTest$ | async) as x; else loading">
    <p>File Download {{x.bool}}</p>
</div>

<div *ngIf="(m_addStorageGroupDir$ | async) as x; else loading">
    <p>Add group {{x.bool}}</p>
</div>

<ng-template #downloadFailed>Failed</ng-template>

<ng-template #loadingOrError>
    <div *ngIf="errorRes else loading">
        <p>Failed to get connection info: {{errorRes.message}}</p>
    </div>
    <ng-template #loading>
        <p>Loading ConnectionInfo...</p>
    </ng-template>
</ng-template>

<ng-template #loading>
    <p>{{ 'common.loading' | translate }} ...</p>
</ng-template>

<p-button class="p-2" (click)="setSecurityPin('1234')">Set PIN to 1234</p-button>
<p-button class="p-2" (click)="setSecurityPin('0000')">Set PIN to 0000</p-button>
<p-button class="p-2" (click)="addStorageGroup()">Add SG</p-button>

<h4>Translation Test</h4>
<div>{{ 'primeng.passwordPrompt' | translate }}</div>

<ng-container *ngFor="let sg of m_storageGroups">
    <div>
        Id: {{sg.Id}} GroupName: {{sg.GroupName}} HostName: {{sg.HostName}}
    </div>
</ng-container>
