<div class="flex flex-column relative flex-auto">
    <div class="toolbar flex justify-content-between align-items-center pm-8 surface-section relative lg:static  surface-border"
        style="height: 80px;" *ngIf="showTopBar else hidden">
        <div class="toolbar flex align-items-left flex-shrink-0" style="height: 80px;">
            <a pRipple class="p-ripple p-element my-3 mx-1 flex align-items-center cursor-pointer p-3 lg:hidden lg:justify-content-center
                 hover:bg-gray-800 border-round text-300 hover:text-0
                transition-duration-150 transition-colors" (click)="toggleShowSidebar()">
                <i class="pi pi-bars mr-1 lg:ml-1 text-base lg:text-xl "></i>
                <span class="p-ink" ng serve></span>
            </a>
            <img class="py-2 pl-1" src="images/mythtv.png" alt="Image" height="80">
            <div class="hidden md:inline-flex">
                <h1>{{ 'navbar.mainheading' | translate }}</h1>
            </div>
        </div>
        <div class="toolbar flex flex-grow-1 align-items-end" style="height: 80px;">
            <button pButton pRipple icon="pi pi-angle-up" class="p-button-text lg:col-offset-3 p-button-secondary"
                (click)="showTopBar=false" pTooltip="{{ 'navbar.hide' | translate }}"></button>
        </div>
        <div class="pr-2 toolbar" style="height: 80px;">
            <a pRipple style="height: 80px;" class="toolbar p-ripple p-element my-2 mx-2 flex align-items-center cursor-pointer p-3 md:hidden md:justify-content-center
                 hover:bg-gray-800 border-round text-300 hover:text-0 transition-duration-150 transition-colors"
                (click)="toggleShowNavbar()">
                <i class="pi pi-ellipsis-v mr-1 md:mr-0 text-base md:text-xl "></i>
                <span class="p-ink" ng serve></span>
            </a>
            <ul class="toolbar list-none p-0 m-0 md:flex md:align-items-center select-none md:flex-row surface-section border-1
             md:border-none surface-border right-0 top-100 z-2 shadow-2 md:shadow-none absolute md:static"
                [hidden]="m_showNavbar">
                <li class="toolbar" style="height: 80px;">
                    <div class="text-primary mt-5 font-light">
                        {{ dataService.loggedInUser }} &nbsp;&nbsp;&nbsp;
                    </div>
                </li>
                <li *ngIf="!dataService.loggedInUser" class="toolbar" style="height: 80px;">
                    <button pButton label="{{ 'navbar.login' | translate }}" class="p-button-text p-button-primary mt-4"
                        (click)="showLogin();"></button>
                </li>
                <li *ngIf="dataService.loggedInUser" class="toolbar" style="height: 80px;">
                    <button pButton label="{{ 'navbar.logout' | translate }}"
                        class="p-button-text p-button-primary mt-4" (click)="logout()"></button>
                </li>

                <li class="toolbar" style="height: 80px;">
                    <a pRipple tooltipPosition="bottom" pTooltip="{{ 'navbar.switchTheme' | translate }}"
                        (click)="themePanel.toggle($event)"
                        class="p-ripple p-element my-3 mx-1 flex align-items-center cursor-pointer p-2 lg:justify-content-center
                         hover:bg-gray-800 border-round text-300 hover:text-0 transition-duration-150 transition-colors">
                        <div *ngIf="m_selectedTheme">
                            <img src="images/themes/{{m_selectedTheme.Image}}" class="mr-2 lg:mr-0"
                                style="width: 32px; height: 32px;">
                        </div>
                        <span class="font-medium inline md:hidden">{{ 'navbar.switchTheme' | translate }}</span>
                        <span class="p-ink"></span>
                    </a>
                </li>
                <li class="toolbar" style="height: 80px;">
                    <a pRipple tooltipPosition="bottom" pTooltip="{{ 'navbar.changeLanguage' | translate }}"
                        (click)="languagePanel.toggle($event)"
                        class="p-ripple p-element my-3 mx-1 flex align-items-center cursor-pointer p-3 lg:justify-content-center
                         hover:bg-gray-800 border-round text-300 hover:text-0 transition-duration-150 transition-colors">
                        <div *ngIf="m_selectedLanguage">
                            <img src="images/locale/{{m_selectedLanguage.Image}}" class="mr-2 lg:mr-0"
                                style="width: 32px;">
                        </div>
                        <span class="font-medium inline md:hidden">{{ 'navbar.changeLanguage' | translate }}</span>
                        <span class="p-ink"></span>
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <ng-template #hidden>
        <div class="toolbar block flex flex-grow-1 justify-content-center align-items-end " style="height: 2rem;">
            <button pButton pRipple icon="pi pi-angle-down" class="p-button-text p-button-secondary"
                (click)="showTopBar=true" pTooltip="{{ 'navbar.show' | translate }}"></button>
        </div>
    </ng-template>

</div>

<p-overlayPanel #themePanel [showCloseIcon]="true" [style]="{width: '350px'}">
    <ng-template pTemplate>
        <p-table [value]="m_themes$" selectionMode="single" [paginator]="false" sortField="Name" sortMode="single"
            [scrollable]="true" scrollHeight="500px" rowGroupMode="subheader" groupRowsBy="Category"
            responsiveLayout="scroll">
            <ng-template pTemplate="groupheader" let-theme>
                <tr pRowGroupHeader>
                    <td colspan="2">
                        <span class="font-bold ml-2">{{theme.Category}}</span>
                    </td>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-rowData let-theme>
                <tr [pSelectableRow]="rowData" (click)="changeTheme(theme)">
                    <td style="max-width:80px"><img src="images/themes/{{theme.Image}}" [alt]="theme.image"
                            class="theme-image" /></td>
                    <td>{{theme.Name}}</td>
                </tr>
            </ng-template>
        </p-table>
    </ng-template>
</p-overlayPanel>

<p-overlayPanel #languagePanel [showCloseIcon]="true" [style]="{width: '450px'}">
    <ng-template pTemplate>
        <p-table [value]="m_languages" selectionMode="single" [paginator]="false" sortField="NativeLanguage"
            sortMode="single" [scrollable]="true" scrollHeight="500px" responsiveLayout="scroll">
            <ng-template pTemplate="body" let-rowData let-language>
                <tr [pSelectableRow]="rowData" (click)="languagePanel.hide(); changeLanguage(language)">
                    <td style="max-width:80px"><img src="images/locale/{{language.Image}}" [alt]="language.image"
                            class="theme-image" /></td>
                    <td>
                        <pre><span class="font-bold">{{language.Language}}</span><br>{{language.NativeLanguage}} </pre>
                    </td>
                </tr>
            </ng-template>
        </p-table>
    </ng-template>
</p-overlayPanel>

<form class="ml-3 mr-3" name="loginform" #loginform="ngForm" autocomplete="on">

    <p-dialog header="{{ 'navbar.login' | translate }}" [(visible)]="displayLogin" [modal]="true"
        [style]="{width: '360px'}" [draggable]="false" [resizable]="false" [closable]="false">

        <div class="form-group field">
            <label for="UserName" class="label block">{{ 'navbar.username' | translate }}</label>
            <input pInputText id="UserName" [(ngModel)]="userName" name="UserName" #UserName="ngModel"
                class="mb-2 form-control w-full" autocomplete="username" />
        </div>

        <div class="form-group field">
            <label for="UserPassword" class="label block">{{ 'navbar.userpassword' | translate }}</label>
            <p-password id="UserPassword" [(ngModel)]="userPassword" name="UserPassword" #UserName="ngModel"
                class="mb-2 form-control w-full" [feedback]="false" (keydown.enter)="login()"
                autocomplete="current-password" [toggleMask]="true"></p-password>
        </div>

        <div class="form-group field">
            <p-checkbox inputId="KeepLogin" [(ngModel)]="keepLogin" name="KeepLogin"
                class="mb-2 w-full label" [binary]="true"
                label="{{ 'navbar.keeplogin' | translate }}">
            </p-checkbox>
        </div>


        <ng-template pTemplate="footer">
            <div class="col-12" style="text-align: left;">
                <p-message *ngIf="keepLogin" severity="error"
                    text="{{ 'navbar.keep_pwd_warn' | translate }}"></p-message>
            </div>

            <div class="col-12" style="text-align: left;">
                <p-message *ngIf="errorCount > 0" severity="error"
                    text="{{ 'navbar.loginfail' | translate }}"></p-message>
            </div>

            <p-button *ngIf="!APIAuthReqd" icon="pi pi-times-circle" (click)="closeLogin()"
                label="{{ 'common.cancel' | translate }}" styleClass="p-button-plain">
            </p-button>
            <p-button icon="pi pi-check-circle" (click)="login()" label="{{ 'common.ok' | translate }}"
                styleClass="p-button-plain" [disabled]="!userName || !userPassword"></p-button>
        </ng-template>
    </p-dialog>
</form>