<h1>This screen is a testbed area</h1><hr>
<div *ngIf="(m_hostname$ | async)?.String as hostname; else loading">
    <p>Welcome to MythTV Backend running on host {{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}} 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 *ngIf="(m_databaseStatus$ | async)?.DatabaseStatus as dbstatus; else loading">
    <!-- <p>Database is "{{dbstatus.Connected ? Connected : Not Connected}}"</p> -->
</div>

<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>Loading ...</p>
</ng-template>

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