<!--

    Copyright (c) 2015-2018 Red Hat, Inc.
    This program and the accompanying materials are made
    available under the terms of the Eclipse Public License 2.0
    which is available at https://www.eclipse.org/legal/epl-2.0/

    SPDX-License-Identifier: EPL-2.0

    Contributors:
      Red Hat, Inc. - initial API and implementation

-->
<div class="left-sidebar-container" id="navbar">
  <md-toolbar class="flex-shrink-none">
    <md-progress-linear md-mode="indeterminate" ng-hide="navbarController.profile && navbarController.profile.userId"></md-progress-linear>
    <div ng-show="navbarController.profile && navbarController.profile.userId"
         layout="column" flex>

      <div flex="none"
           layout="row" layout-align="start center">
        <section class="navbar-top-logo logo-color-white" layout="column" layout-align="center left" ng-include="branding.logoText">
        </section>
        <div flex></div>
        <navbar-notification id="navbar-notification-container"></navbar-notification>
      </div>

      <md-divider md-theme="factory-theme"></md-divider>

      <div class="admin-navbar-menu">
        <section class="left-sidebar-menu" layout="column" layout-align="center center">
          <md-list layout="column">
            <md-list-item flex class="navbar-subsection-item">
              <md-button nav-bar-selected flex che-reload-href href="{{navbarController.menuItemUrl.dashboard}}" layout-align="left"
                         target="_self">
                <div class="navbar-item" layout="row" layout-align="start center" id="dashboard-item">
                  <md-icon md-font-icon="navbar-icon chefont cheico-dashboard" aria-label="Dashboard"></md-icon>
                  <span>Dashboard</span>
                </div>
              </md-button>
            </md-list-item>
            <md-list-item flex class="navbar-subsection-item">
              <md-button nav-bar-selected flex che-reload-href href="{{navbarController.menuItemUrl.workspaces}}" layout-align="left">
                <div class="navbar-item" layout="row" layout-align="start center" id="workspaces-item">
                  <md-icon md-font-icon="navbar-icon chefont cheico-workspace"></md-icon>
                  <span>Workspaces</span>
                  <span class="navbar-number" ng-show="navbarController.getWorkspacesNumber()">&nbsp;({{navbarController.getWorkspacesNumber()}})</span>
                </div>
              </md-button>
            </md-list-item>
            <md-list-item flex class="navbar-subsection-item">
              <md-button nav-bar-selected flex che-reload-href
                         href="{{navbarController.menuItemUrl.stacks}}" layout-align="left">
                <div class="navbar-item" layout="row" layout-align="start center" id="stacks-item">
                  <md-icon md-font-icon="navbar-icon material-design icon-ic_inbox_24px"></md-icon>
                  <span>Stacks</span>
                </div>
              </md-button>
            </md-list-item>
            <md-list-item flex class="navbar-subsection-item">
              <md-button nav-bar-selected flex che-reload-href
                         href="{{navbarController.menuItemUrl.factories}}" layout-align="left">
                <div class="navbar-item" layout="row" layout-align="start center" id="factories-item">
                  <md-icon md-font-icon="navbar-icon chefont cheico-factory"></md-icon>
                  <span>Factories</span>
                  <span class="navbar-number" ng-show="navbarController.getFactoriesNumber()">&nbsp;({{navbarController.getFactoriesNumber()}})</span>
                </div>
              </md-button>
            </md-list-item>
            <md-list-item flex class="navbar-subsection-item">
              <md-button nav-bar-selected flex che-reload-href
                         href="{{navbarController.menuItemUrl.administration}}" layout-align="left">
                <div class="navbar-item" layout="row" layout-align="start center" id="administration-item">
                  <md-icon md-font-icon="navbar-icon material-design icon-ic_settings_24px"></md-icon>
                  <span>Administration</span>
                </div>
              </md-button>
            </md-list-item>
            <md-list-item flex class="navbar-subsection-item" ng-if="navbarController.isPermissionServiceAvailable && !navbarController.userServices.hasInstallationManagerService && !navbarController.hasPersonalAccount">
              <md-button nav-bar-selected flex che-reload-href
                         href="{{navbarController.menuItemUrl.organizations}}" layout-align="left">
                <div class="navbar-item" layout="row" layout-align="start center">
                  <md-icon md-font-icon="fa navbar-icon fa-sitemap"></md-icon>
                  <span>Organizations</span>
                  <span class="navbar-number" ng-show="navbarController.getOrganizationsNumber()">&nbsp;({{navbarController.getOrganizationsNumber()}})</span>
                </div>
              </md-button>
            </md-list-item>
          </md-list>
        </section>
      </div>

      <div class="admin-navbar-menu"
           ng-if="navbarController.userServices.hasInstallationManagerService || navbarController.userServices.hasAdminUserService">
        <section class="left-sidebar-menu" layout="column" layout-align="start start">

          <div class="navbar-section navbar-section-title"
               flex layout="row" layout-align="start start">
            <span>Administration</span>
          </div>
          <md-list layout="column">
            <md-list-item flex class="navbar-subsection-item"
                          ng-if="navbarController.isKeycloackPresent === false && navbarController.userServices.hasAdminUserService">
              <md-button nav-bar-selected flex che-reload-href
                         href="{{navbarController.menuItemUrl.usermanagement}}"
                         layout-align="left">
                <div class="navbar-item" layout="row" layout-align="start center"  id="users-item">
                  <i class="fa fa-user fa-lg navbar-icon"></i>
                  <span>Users</span>
                </div>
              </md-button>
            </md-list-item>
            <md-list-item flex class="navbar-subsection-item"
                          ng-if="navbarController.userServices.hasInstallationManagerService">
              <md-button nav-bar-selected flex che-reload-href
                         href="{{navbarController.menuItemUrl.organizations}}" layout-align="left">
                <div class="navbar-item" layout="row" layout-align="start center"  id="organizations-item">
                  <md-icon md-font-icon="fa navbar-icon fa-sitemap"></md-icon>
                  <span>Organizations</span>
                  <span class="navbar-number" ng-show="navbarController.getRootOrganizationsNumber()">&nbsp;({{navbarController.getRootOrganizationsNumber()}})</span>
                </div>
              </md-button>
            </md-list-item>
          </md-list>
        </section>
      </div>

      <navbar-recent-workspaces></navbar-recent-workspaces>

      <navbar-teams flex layout="column" layout-aling="start strength"></navbar-teams>

      <div class="admin-navbar-menu"
           layout="column" layout-align="end stretch" flex>
        <section class="left-sidebar-menu navbar-account-section"
                 ng-if="navbarController.isPermissionServiceAvailable">
          <md-list layout="column" flex>

            <md-list-item class="navbar-subsection-item">
              <navbar-dropdown-menu flex
                                    navbar-dropdown-items="navbarController.accountItems"
                                    navbar-dropdown-offset="15 -45">
                <md-button ng-href="" layout-align="left">
                  <div class="navbar-item navbar-identity" layout="row" layout-align="start center" id="navbar-user-panel">

                    <i class="navbar-icon" flex="none">
                      <img class="developers-face" id="developers-face" gravatar-src="navbarController.profile.email"/>
                    </i>
                    <span flex style="text-align: left;" id="user-name">{{navbarController.getUserName()}}</span>
                    <i class="fa fa-angle-up navbar-icon" aria-hidden="true"></i>
                  </div>
                </md-button>
              </navbar-dropdown-menu>
            </md-list-item>
          </md-list>
        </section>
      </div>

    </div>
  </md-toolbar>

  <div class="navbar-iframe-button-left-border" ng-show="showIDE"></div>
</div>
