<div class="rdio-status">
    <div class="led" [ngClass]="ledStyle"></div>
</div>
<div class="rdio-display" [ngClass]="{ idle: !dimmer }" (dblclick)="toggleFullscreen.emit()">
    <div class="row">
        <div>
            <span>{{ clock | date:'HH:mm' }}</span>
        </div>
        <div *ngIf="!linked">
            <span>NO LINK</span>
        </div>
        <div>
            <span>Q: {{ callQueue }}</span>
        </div>
    </div>
    <div class="row small"></div>
    <div class="row">
        <div>
            <span>{{ callSystem }}</span>
        </div>
        <div>
            <span>{{ callTag }}</span>
        </div>
    </div>
    <div class="row">
        <div>
            <span>{{ callTalkgroup }}</span>
        </div>
        <div>
            <span>{{ callProgress | date:'HH:mm' }}</span>
        </div>
    </div>
    <div class="row big">
        <span>{{ callTalkgroupName }}</span>
    </div>
    <div class="row">
        <div>
            <span>F: {{ callFrequency || 0 }}</span>
        </div>
        <div>
            <span>TGID: {{ callTalkgroupId || 0 }}</span>
        </div>
    </div>
    <div class="row">
        <div>
            <span>E: {{ callError || 0 }} S: {{ callSpike || 0 }}</span>
        </div>
        <div>
            <span *ngIf="callUnit">UID: {{ callUnit }}</span>
        </div>
    </div>
    <div class="row right small">
        <div>
            <span class="flag" [ngClass]="{ flaged: avoided }">AVOID</span>
        </div>
        <div>
            <span class="flag" [ngClass]="{ flaged: patched }">PATCH</span>
        </div>
    </div>
    <div class="wrapper">
        <div class="auth" [ngClass]="{ visible: auth }">
            <form class="mat-elevation-z8" autocomplete="off" [formGroup]="authForm" (ngSubmit)="authenticate()">
                <mat-form-field>
                    <input #password matInput type="password" autocomplete="off" formControlName="password"
                        placeholder="Unlock code" (blur)="authFocus()">
                    <mat-error *ngIf="authForm.get('password')?.hasError('expired')">
                        This unlock code has expired
                    </mat-error>
                    <mat-error *ngIf="authForm.get('password')?.hasError('tooMany')">
                        Too many connections
                    </mat-error>
                </mat-form-field>
            </form>
        </div>
        <table class="history">
            <thead>
                <tr>
                    <th>
                        <span>Time</span>
                    </th>
                    <th>
                        <span>System</span>
                    </th>
                    <th>
                        <span>Talkgroup</span>
                    </th>
                    <th>
                        <span>Name</span>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let previousCall of callHistory">
                    <td>
                        <span>{{ previousCall?.dateTime | date:'HH:mm' }}</span>
                    </td>
                    <td>
                        <span>{{ previousCall?.systemData?.label || previousCall?.system}}</span>
                    </td>
                    <td>
                        <span>{{ previousCall?.talkgroupData?.label || previousCall?.talkgroup }}</span>
                    </td>
                    <td>
                        <span>{{ previousCall?.talkgroupData?.name || previousCall?.frequency }}</span>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<div class="rdio-control">
    <div class="row">
        <button class="rdio-button" (click)="livefeed()"
            [ngClass]="{ off: livefeedOffline && !playbackMode, on: livefeedOnline, partial: playbackMode }">
            LIVE<br>FEED
        </button>
        <div class="spacer"></div>
        <button class="rdio-button" (click)="holdSystem()" [ngClass]="{ off: !holdSys, on: holdSys }">
            HOLD<br>SYS
        </button>
        <div class="spacer"></div>
        <button class="rdio-button" (click)="holdTalkgroup()" [ngClass]="{ off: !holdTg, on: holdTg }">
            HOLD<br>TG
        </button>
    </div>
    <div class="row">
        <button class="rdio-button" (click)="replay()">
            REPLAY<br>LAST
        </button>
        <div class="spacer"></div>
        <button class="rdio-button" (click)="skip()">
            SKIP<br>NEXT
        </button>
        <div class="spacer"></div>
        <button class="rdio-button" (click)="avoid()">
            AVOID
        </button>
    </div>
    <div class="row">
        <button class="rdio-button" (click)="showSearchPanel()">
            SEARCH<br>CALL
        </button>
        <div class="spacer"></div>
        <button class="rdio-button" (click)="pause()" [ngClass]="{ off: !livefeedPaused, on: livefeedPaused }">
            PAUSE
        </button>
        <div class="spacer"></div>
        <button class="rdio-button" (click)="showSelectPanel()">
            SELECT<br>TG
        </button>
    </div>
</div>