<div
  class="app-main-header"
  ng-class="{
    open: vm.navOpen,
    'nav-hidden-on-startup': vm.navHiddenOnStartup,
    drawerOpen: vm.openDrawer
  }"
  ng-mouseleave="vm.hideAppSwitcher()"
>
  <div class="header-bar">
    <button
      class="navigator-toggle main-header-button"
      ng-class="{ 'nav-hidden-on-startup': vm.navHiddenOnStartup }"
      title="{{ 'Toggle navigator' | translate }}"
      type="button"
      ng-click="vm.toggleNav()"
      ng-if="vm.rootNodes().length"
    >
      <i c8y-icon="dedent-right"></i>
    </button>
    <div class="app-view">
      <c8y-app-icon
        class="c8y-app-icon"
        app="vm.currentApp"
        white="false"
      ></c8y-app-icon>
      <div ng-show="vm.isLoading()">
        <c8y-loading></c8y-loading>
      </div>
      <span
        class="page-header"
        ng-show="!vm.isLoading()"
      >
        <c8y-ui-title></c8y-ui-title>
        <c8y-ui-breadcrumbs class="app-breadcrumbs"></c8y-ui-breadcrumbs>
      </span>
    </div>

    <c8y-ui-search class="main-header-item"></c8y-ui-search>

    <c8y-ui-actions class="main-header-item"></c8y-ui-actions>

    <div
      class="app-switcher-dropdown main-header-item dropdown"
      uib-dropdown
      ng-show="vm.applications.length > 1"
    >
      <button
        class="main-header-button dropdown-toggle c8y-dropdown"
        aria-label="'Application switcher' | translate"
        aria-haspopup="true"
        type="button"
        uib-dropdown-toggle
      >
        <i
          class="icon-2x"
          c8y-icon="th"
        ></i>
      </button>
      <div
        class="dropdown-menu app-switcher-dropdown-menu"
        uib-dropdown-menu
      >
        <div
          class="app-switcher-sagcloud"
          ng-if="vm.oneCloudApplications && vm.oneCloudApplications.length > 0"
        >
          <a
            class="appLink"
            ng-class="{ active: app.currentApp }"
            title="{{ app | humanizeAppName }}"
            ng-repeat="app in vm.oneCloudApplications"
            ng-href="{{ vm.getHref(app) }}"
          >
            <c8y-app-icon
              class="c8y-app-icon"
              app="app"
              white="false"
            ></c8y-app-icon>
            <span class="text-truncate-wrap">{{ app | humanizeAppName }}</span>
          </a>
        </div>

        <div class="app-switcher">
          <a
            class="appLink"
            ng-class="{ active: app.currentApp }"
            title="{{ app | humanizeAppName }}"
            ng-repeat="app in vm.applications"
            ng-href="{{ vm.getHref(app) }}"
          >
            <c8y-app-icon
              class="c8y-app-icon"
              app="app"
              white="false"
            ></c8y-app-icon>
            <span class="text-truncate-wrap">{{ app | humanizeAppName }}</span>
          </a>
        </div>
      </div>
    </div>

    <div
      class="main-header-item dropdown"
      is-open="vm.menuStatus.userOpen"
      uib-dropdown
    >
      <button
        class="main-header-button dropdown-toggle c8y-dropdown"
        type="button"
        uib-dropdown-toggle
      >
        <span
          class="hidden-xs hidden-sm userName text-truncate d-inline-block"
          style="vertical-align: text-bottom; max-width: 104px"
          title="{{ vm.getUserName() }}"
        >
          {{ vm.getUserName() }}
        </span>
        <i
          class="icon-2x"
          c8y-icon="c8y-user"
        ></i>
      </button>

      <ul
        class="dropdown-menu dropdown-menu-right"
        uib-dropdown-menu
      >
        <li>
          <a
            title="{{ 'User settings' | translate }}"
            href=""
            ng-click="vm.editUser()"
          >
            <i c8y-icon="profile"></i>
            {{ 'User settings' | translate }}
          </a>
        </li>

        <li>
          <a
            title="{{ 'Access denied requests' | translate }}"
            href=""
            ng-click="vm.showAccessDeniedRequestsList()"
          >
            <i c8y-icon="access"></i>
            {{ 'Access denied requests' | translate }}
          </a>
        </li>

        <li>
          <a
            title="{{ 'Logout' | translate }}"
            href=""
            ng-click="vm.logout()"
          >
            <i c8y-icon="sign-out"></i>
            {{ 'Logout' | translate }}
          </a>
        </li>

        <li ng-show="vm.activateSupportUserAvailable">
          <a
            title="{{ 'Activate support' | translate }}"
            href=""
            ng-click="vm.activateSupportAccess()"
            ng-if="!vm.supportActivated"
          >
            <i c8y-icon="c8y-c8y-support"></i>
            {{ 'Activate support' | translate }}
          </a>
          <a
            title="{{ 'Deactivate support' | translate }}"
            href=""
            ng-click="vm.deactivateSupportAccess()"
            ng-if="vm.supportActivated"
          >
            <i c8y-icon="c8y-icon-duocolor c8y-support"></i>
            {{ 'Deactivate support' | translate }}
          </a>
        </li>

        <li ng-if="vm.supportUrl">
          <a
            title="{{ 'Request support' | translate }}"
            href="{{ vm.supportUrl }}"
            target="_blank"
            rel="noopener noreferrer"
          >
            <i c8y-icon="question-circle"></i>
            {{ 'Request support' | translate }}
          </a>
        </li>

        <li
          class="divider"
          role="separator"
          ng-if="!vm.hideVersions"
        ></li>

        <li
          class="dropdown-header text-pre-normal"
          style="margin-top: -1px"
          ng-if="!vm.hideVersions"
        >
          <i
            class="text-muted"
            c8y-icon="info-circle"
          ></i>
          <span
            class="text-muted"
            translate
          >
            Version: {{ vm.backendVersion }} (backend), {{ vm.uiVersion }} (UI)
          </span>
        </li>
      </ul>
    </div>
    <!-- /.userinfo -->

    <!-- right drawer button -->
    <button
      class="drawer-toggle main-header-button"
      title="{{ 'Toggle side drawer' | translate }}"
      type="button"
      ng-if="vm.showRightDrawer"
      ng-click="vm.openDrawer = !vm.openDrawer"
    >
      <i c8y-icon="dedent"></i>
    </button>
  </div>
  <div class="head-toggler">
    <button
      title="{{ 'Toggle' | translate }}"
      type="button"
      ng-click="vm.toggle()"
    >
      <i c8y-icon="dedent-right"></i>
    </button>
  </div>
  <c8y-right-drawer ng-if="vm.showRightDrawer"></c8y-right-drawer>
</div>
