@if (isDemo) {
  <div class="notification-header">
    You are using a demo account. Finding our software useful?
    <a href="https://app.gauzy.co/#/auth/register"> Click here to Sign Up and start using for free! </a>
  </div>
}
<div class="main-header">
  <!-- The breadcrumb trail used to live here. It now renders under the page
       title (ngx-header-title): the header band is already dense with
       selectors, and the trail was being squeezed to nothing on pages that
       show every selector. -->
  @if (createQuickActionsMenu?.length > 0) {
    <div class="header-lead">
      <nb-action
        size="small"
        [class.left]="position === 'normal'"
        [class.right]="position === 'inverse'"
        class="show-large-up"
        >
        <button type="button" nbButton class="button create" status="primary" size="small" (click)="openQuickActions()">
          + {{ 'BUTTONS.CREATE' | translate }}
        </button>
      </nb-action>
    </div>
  }
  <div class="header-container">
    <div class="actions" size="small" [class.left]="position === 'normal'" [class.right]="position === 'inverse'">
      @if (showTeamsSelector && !showExtraActions && selectorsVisibility?.team) {
        <nb-action
          class="show-large-up"
          >
          <ga-team-selector
            dropdownClass="header-entity-select"
            [employeeId]="(employee$ | async)?.id"
            [projectId]="(project$ | async)?.id"
            [shortened]="true"
            class="header-selector team-selector"
          ></ga-team-selector>
        </nb-action>
      }

      @if (showProjectsSelector && !showExtraActions && selectorsVisibility?.project) {
        <nb-action
          class="show-large-up"
          >
          <ga-project-selector
            dropdownClass="header-entity-select"
            [employeeId]="(employee$ | async)?.id"
            [shortened]="true"
            class="header-selector project-selector"
          ></ga-project-selector>
        </nb-action>
      }

      @if (showEmployeesSelector && !showExtraActions && selectorsVisibility?.employee) {
        <nb-action
          class="show-large-up"
          >
          <ga-employee-selector
            dropdownClass="header-entity-select"
            class="header-selector employee-selector"
          ></ga-employee-selector>
        </nb-action>
      }

      @if (showDateSelector && !showExtraActions && selectorsVisibility?.date) {
        <!-- .date-range-action: styled `position: static` so the picker's INLINE dropdown
             escapes the .header-container scroll clip — see header.component.scss. -->
        <nb-action class="date-range-action">
          @if (organization?.id) {
            <ngx-date-range-picker
              [firstDayOfWeek]="organization.startWeekOn"
              class="date-range-selector"
            ></ngx-date-range-picker>
          }
        </nb-action>
      }

      @if (showOrganizationsSelector && selectorsVisibility?.organization) {
        <nb-action
          class="show-large-up organization-selector-container"
          >
          <ga-organization-selector
            dropdownClass="header-entity-select"
            class="header-selector organization-selector"
          ></ga-organization-selector>
        </nb-action>
      }

      <nb-action
        icon="options-2-outline"
        class="toggle-layout show-large-down"
        (click)="toggleExtraActions()"
      ></nb-action>

      <!-- The speech-bubble help menu (Support Chat / FAQ / Help / About) used
           to sit here. Those entries now live in the Quick Settings panel
           (ngx-theme-settings), which is reached from the gear action below. -->

      @if (isEnabledTimeTracking()) {
        <nb-action class="timer-action" (click)="toggleTimerWindow()">
          <nb-icon icon="clock-outline"></nb-icon>
          <span>{{ timerDuration }}</span>
          <ga-time-tracker-status class="status"></ga-time-tracker-status>
        </nb-action>
      }

      <!-- The AI assistant entry point lives on the sidebar's brand row
           (`.ai-agent-launch` in one-column.layout.html); a second copy here was
           redundant, so the header no longer carries a chat control. -->

      @for (action of navigationBuilderService.sidebarActions$ | async; track action) {
        <nb-action
          [icon]="action.icon"
          [class]="action.class"
          (click)="toggleSidebarActions(action)"
        ></nb-action>
      }
    </div>
  </div>

  @if (showExtraActions) {
    <div (window:resize)="closeExtraActionsIfLarge($event)" class="extra-actions">
      @if (selectorsVisibility?.team) {
        <div>
          <h6>{{ 'HEADER.SELECT_TEAM' | translate }}</h6>
        </div>
        <ga-team-selector
          dropdownClass="header-entity-select"
          [employeeId]="(employee$ | async)?.id"
          [projectId]="(project$ | async)?.id"
          [shortened]="true"
          class="header-selector team-selector"
        ></ga-team-selector>
      }
      @if (selectorsVisibility?.project) {
        <div>
          <h6>{{ 'HEADER.SELECT_PROJECT' | translate }}</h6>
        </div>
        <ga-project-selector
          dropdownClass="header-entity-select"
          [employeeId]="(employee$ | async)?.id"
          [shortened]="true"
          class="header-selector project-selector"
        ></ga-project-selector>
      }
      @if (selectorsVisibility?.employee) {
        <div>
          <h6>{{ 'HEADER.SELECT_EMPLOYEE' | translate }}</h6>
        </div>
        @if (showEmployeesSelector) {
          <ga-employee-selector
            dropdownClass="header-entity-select"
            class="header-selector employee-selector"
          ></ga-employee-selector>
        }
      }
      @if (selectorsVisibility?.date) {
        <div>
          <h6>{{ 'HEADER.SELECT_A_DATE' | translate }}</h6>
        </div>
        @if (showDateSelector) {
          <ngx-date-range-picker class="date-range-selector"></ngx-date-range-picker>
        }
      }
      @if (selectorsVisibility?.organization) {
        <div>
          <h6>{{ 'HEADER.SELECT_AN_ORGANIZATION' | translate }}</h6>
        </div>
        @if (showOrganizationsSelector) {
          <ga-organization-selector
            dropdownClass="header-entity-select"
            class="header-selector organization-selector"
          ></ga-organization-selector>
        }
      }
    </div>
  }

  @if (isEnabledTimeTracking()) {
    <ng-template ngxPermissionsOnly="TIME_TRACKER">
      <ngx-web-time-tracker></ngx-web-time-tracker>
    </ng-template>
  }
</div>