<!--
  ~ Copyright (C) 2017/2021 e-voyageurs technologies
  ~
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~ http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<div class="d-flex align-items-center justify-content-between w-100">
  <div class="logo-containter">
    <div
      class="logo"
      (click)="goToHome()"
    >
      <img
        class="logo-img"
        src="{{ baseHref }}assets/images/logo-black.svg"
      />
      <span class="logo-txt"> Tock Studio </span>
    </div>
  </div>

  <div class="d-flex align-items-center gap-1">
    <div class="d-flex gap-1 align-items-center mode-switch">
      <nb-icon
        nbTooltip="Light Mode"
        icon="brightness-high"
      ></nb-icon>
      <nb-toggle
        [ngModel]="isDarkTheme()"
        (change)="switchTheme()"
        class="darkmode-toggle nb-toggle-reset-label-margin"
        nbTooltip="Switch mode"
      ></nb-toggle>
      <nb-icon
        nbTooltip="Dark Mode"
        icon="brightness-low"
      ></nb-icon>
    </div>

    <nb-form-field *ngIf="state.currentApplication">
      <nb-icon
        nbPrefix
        icon="window"
      ></nb-icon>
      <nb-select
        (selectedChange)="changeApplication($event)"
        [ngModel]="currentApplicationName"
        nbTooltip="Select current application"
        class="mb-0 min-width-5 max-width-15em"
      >
        <nb-option
          *ngFor="let app of state.applications"
          [value]="app.name"
          >{{ app.label }}
        </nb-option>
      </nb-select>
    </nb-form-field>

    <nb-form-field *ngIf="state.namespaces">
      <nb-icon
        nbPrefix
        icon="folder"
      ></nb-icon>
      <nb-select
        (selectedChange)="changeNamespace($event)"
        [selected]="currentNamespaceName"
        nbTooltip="Select current namespace"
        class="mb-0 min-width-5 max-width-15em"
      >
        <nb-option
          *ngFor="let namespace of state.namespaces"
          [value]="namespace.namespace"
          >{{ namespace.namespace }}
        </nb-option>
      </nb-select>
    </nb-form-field>

    <nb-form-field *ngIf="state.currentApplication">
      <nb-icon
        nbPrefix
        icon="globe2"
      ></nb-icon>
      <nb-select
        (selectedChange)="changeLocale($event)"
        [ngModel]="state.currentLocale"
        nbTooltip="Select current locale"
        class="mb-0 min-width-5 max-width-15em"
      >
        <nb-option
          *ngFor="let l of state.currentApplication.supportedLocales"
          [value]="l"
          >{{ state.localeName(l) }}</nb-option
        >
      </nb-select>
    </nb-form-field>

    <button
      nbButton
      ghost
      size="medium"
      (click)="openDialogTest()"
      nbTooltip="Open a test dialog"
    >
      <nb-icon icon="terminal-plus"></nb-icon>
    </button>

    <div
      *ngIf="auth.isLoggedIn() && !auth.isSSO()"
      class="border-left pl-3"
    >
      <button
        nbButton
        ghost
        size="medium"
        (click)="auth.logout()"
        nbTooltip="Logout"
      >
        <nb-icon icon="box-arrow-right"></nb-icon>
      </button>
    </div>
  </div>
</div>
