<clr-header class="header-5 header" [attr.style]="getBgColor()">
    <div class="branding">
        <a href="javascript:void(0)" class="nav-link" (click)="homeAction()">
            <img
                [attr.src]="'images/' + customStyle?.product?.logo"
                *ngIf="customStyle?.product?.logo; else elseBlock"
                class="headerLogo" />
            <ng-template #elseBlock
                ><img [src]="'images/harbor-logo.svg'" class="harbor-logo"
            /></ng-template>
            <span class="title">{{
                customStyle?.product?.name
                    ? customStyle?.product?.name
                    : (appTitle | translate)
            }}</span>
        </a>
    </div>

    <global-search></global-search>
    <div class="header-actions">
        <clr-dropdown
            class="dropdown-lang dropdown bottom-left"
            *ngIf="!isSessionValid">
            <button class="nav-icon nav-icon-width" clrDropdownToggle>
                <clr-icon shape="world" class="icon-left"></clr-icon>
                <span class="currentLocale">{{ currentLang }}</span>
                <clr-icon size="10" shape="caret down"></clr-icon>
            </button>
            <clr-dropdown-menu *clrIfOpen>
                <a
                    *ngFor="let lang of guiLanguages"
                    href="javascript:void(0)"
                    clrDropdownItem
                    (click)="switchLanguage(lang[0])"
                    [class.lang-selected]="matchLang(lang[0])"
                    >{{ lang[1][0] }}</a
                >
            </clr-dropdown-menu>
        </clr-dropdown>
        <clr-dropdown
            class="dropdown-locale dropdown bottom-left"
            *ngIf="!isSessionValid">
            <button class="nav-icon nav-icon-width" clrDropdownToggle>
                <clr-icon shape="date" class="icon-left"></clr-icon>
                <span class="currentLocale">{{
                    currentDatetimeRendering | translate
                }}</span>
                <clr-icon size="10" shape="caret down"></clr-icon>
            </button>
            <clr-dropdown-menu *clrIfOpen>
                <a
                    *ngFor="let rendering of guiDatetimeRenderings"
                    href="javascript:void(0)"
                    clrDropdownItem
                    (click)="switchDatetimeRendering(rendering[0])"
                    [class.locale-selected]="
                        matchDatetimeRendering(rendering[0])
                    "
                    >{{ rendering[1] | translate }}</a
                >
            </clr-dropdown-menu>
        </clr-dropdown>
        <div class="nav-divider"></div>
        <clr-dropdown class="dropdown" *ngIf="isSessionValid">
            <button class="nav-text" clrDropdownToggle>
                <clr-icon
                    shape="user"
                    class="is-inverse user-icon"
                    size="24"></clr-icon>
                <span>{{ accountName }}</span>
                <clr-icon
                    class="user-down"
                    size="10"
                    shape="caret down"></clr-icon>
            </button>
            <clr-dropdown-menu [clrPosition]="'bottom-right'" *clrIfOpen>
                <a
                    href="javascript:void(0)"
                    clrDropdownItem
                    (click)="openAccountSettingsModal()"
                    >{{ 'ACCOUNT_SETTINGS.PROFILE' | translate }}</a
                >
                <a
                    href="javascript:void(0)"
                    clrDropdownItem
                    (click)="openPreferencesModal()"
                    >{{ 'ACCOUNT_SETTINGS.PREFERENCES' | translate }}</a
                >
                <a
                    *ngIf="canChangePassword"
                    href="javascript:void(0)"
                    clrDropdownItem
                    (click)="openChangePwdModal()"
                    >{{ 'ACCOUNT_SETTINGS.CHANGE_PWD' | translate }}</a
                >
                <a
                    href="javascript:void(0)"
                    clrDropdownItem
                    (click)="openAboutDialog()"
                    >{{ 'ACCOUNT_SETTINGS.ABOUT' | translate }}</a
                >
                <div class="dropdown-divider"></div>
                <a
                    href="javascript:void(0)"
                    clrDropdownItem
                    (click)="logOut()"
                    >{{ 'ACCOUNT_SETTINGS.LOGOUT' | translate }}</a
                >
            </clr-dropdown-menu>
        </clr-dropdown>
        <a
            href="javascript:void(0)"
            id="aboutMenu"
            class="nav-link nav-text nav-about-link"
            (click)="openAboutDialog()"
            *ngIf="!isSessionValid"
            >{{ 'ACCOUNT_SETTINGS.ABOUT' | translate }}</a
        >
    </div>
</clr-header>
