<!-- Sidebar -->
<div id="sidebar-wrapper">
  <div class="sidebar-header">
    <a ui-sref="portainer.home" data-cy="portainerSidebar-homeImage">
      <img ng-if="logo" ng-src="{{ logo }}" class="img-responsive logo" />
      <img ng-if="!logo" src="~@/assets/images/logo.png" class="img-responsive logo" alt="Portainer" />
    </a>
    <a ng-click="toggleSidebar()"><span class="menu-icon glyphicon glyphicon-transfer"></span></a>
  </div>
  <div class="sidebar-content">
    <ul class="sidebar">
      <sidebar-menu-item path="portainer.home" icon-class="fa-home fa-fw" class-name="sidebar-list" data-cy="portainerSidebar-home">Home</sidebar-menu-item>

      <li class="sidebar-title endpoint-name" ng-if="applicationState.endpoint.name">
        <span class="fa fa-plug space-right"></span>{{ applicationState.endpoint.name }}
        <kubectl-shell ng-if="applicationState.endpoint.mode && applicationState.endpoint.mode.provider === 'KUBERNETES'" class="kubectl-shell"></kubectl-shell>
      </li>
      <div ng-if="applicationState.endpoint.mode">
        <kubernetes-sidebar
          ng-if="applicationState.endpoint.mode.provider === 'KUBERNETES'"
          is-sidebar-open="toggle"
          endpoint-id="endpointId"
          admin-access="isAdmin"
        ></kubernetes-sidebar>

        <azure-sidebar ng-if="applicationState.endpoint.mode.provider === 'AZURE'" endpoint-id="endpointId"> </azure-sidebar>

        <docker-sidebar
          ng-if="applicationState.endpoint.mode.provider !== 'AZURE' && applicationState.endpoint.mode.provider !== 'KUBERNETES'"
          current-route-name="$state.current.name"
          is-sidebar-open="toggle"
          show-stacks="showStacks"
          endpoint-api-version="applicationState.endpoint.apiVersion"
          swarm-management="applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE' && applicationState.endpoint.mode.role === 'MANAGER'"
          standalone-management="applicationState.endpoint.mode.provider === 'DOCKER_STANDALONE'"
          admin-access="isAdmin || isEndpointAdmin"
          offline-mode="endpointState.OfflineMode"
          endpoint-id="endpointId"
        ></docker-sidebar>
      </div>

      <sidebar-section title="Integrations" ng-if="applicationState.endpoint.mode && applicationState.endpoint.extensions.length > 0" authorization="IntegrationStoridgeAdmin">
        <sidebar-menu
          ng-if="
            applicationState.endpoint.mode &&
            applicationState.endpoint.extensions.indexOf('storidge') !== -1 &&
            applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE' &&
            applicationState.endpoint.mode.role === 'MANAGER'
          "
          icon-class="fa-bolt fa-fw"
          label="Storidge"
          path="storidge.cluster"
          is-sidebar-open="toggle"
          children-paths="['storidge.cluster', 'storidge.profiles', 'storidge.monitor', 'storidge.profiles.new', 'storidge.profiles.profile', 'storidge.drives', 'storidge.drives.drive', 'storidge.cluster.node']"
        >
          <sidebar-menu-item path="storidge.monitor" class-name="sidebar-sublist">Monitor</sidebar-menu-item>
          <sidebar-menu-item path="storidge.profiles" class-name="sidebar-sublist">Profiles</sidebar-menu-item>
          <sidebar-menu-item path="storidge.drives" class-name="sidebar-sublist">Drives</sidebar-menu-item>
        </sidebar-menu>
      </sidebar-section>

      <sidebar-section title="Edge compute" ng-if="isAdmin && applicationState.application.enableEdgeComputeFeatures">
        <sidebar-menu-item path="edge.groups" icon-class="fa-object-group fa-fw" class-name="sidebar-list" data-cy="portainerSidebar-edgeGroups">Edge Groups</sidebar-menu-item>
        <sidebar-menu-item path="edge.stacks" icon-class="fa-layer-group fa-fw" class-name="sidebar-list" data-cy="portainerSidebar-edgeStacks">Edge Stacks</sidebar-menu-item>
        <sidebar-menu-item path="edge.jobs" icon-class="fa-clock fa-fw" class-name="sidebar-list" data-cy="portainerSidebar-edgeJobs">Edge Jobs</sidebar-menu-item>
      </sidebar-section>

      <sidebar-section ng-if="isAdmin || isTeamLeader" title="Settings">
        <sidebar-menu
          icon-class="fa-users fa-fw"
          label="Users"
          path="portainer.users"
          is-sidebar-open="toggle"
          children-paths="['portainer.users.user' ,'portainer.teams' ,'portainer.teams.team' ,'portainer.roles' ,'portainer.roles.role' ,'portainer.roles.new']"
        >
          <sidebar-menu-item path="portainer.teams" class-name="sidebar-sublist" data-cy="portainerSidebar-teams">Teams</sidebar-menu-item>
          <sidebar-menu-item path="portainer.roles" class-name="sidebar-sublist" data-cy="portainerSidebar-roles">Roles</sidebar-menu-item>
        </sidebar-menu>

        <div ng-if="isAdmin">
          <sidebar-menu
            icon-class="fa-plug fa-fw"
            label="Endpoints"
            path="portainer.endpoints"
            is-sidebar-open="toggle"
            children-paths="['portainer.endpoints.endpoint', 'portainer.endpoints.new', 'portainer.endpoints.endpoint.access', 'portainer.groups', 'portainer.groups.group', 'portainer.groups.group.access', 'portainer.groups.new', 'portainer.tags']"
          >
            <sidebar-menu-item path="portainer.groups" class-name="sidebar-sublist" data-cy="portainerSidebar-endpointGroups">Groups</sidebar-menu-item>
            <sidebar-menu-item path="portainer.tags" class-name="sidebar-sublist" data-cy="portainerSidebar-endpointTags">Tags</sidebar-menu-item>
          </sidebar-menu>

          <sidebar-menu-item path="portainer.registries" icon-class="fa-database fa-fw" class-name="sidebar-list" data-cy="portainerSidebar-registries">
            Registries</sidebar-menu-item
          >

          <sidebar-menu label="Settings" icon-class="fa-cogs fa-fw" path="portainer.settings" is-sidebar-open="toggle" children-paths="['portainer.settings.authentication']">
            <sidebar-menu-item path="portainer.settings.authentication" class-name="sidebar-sublist" data-cy="portainerSidebar-authentication">Authentication</sidebar-menu-item>

            <div class="sidebar-sublist">
              <a href="http://www.portainer.io/help_about" target="_blank" data-cy="portainerSidebar-help">Help / About</a>
            </div>
          </sidebar-menu>
        </div>
      </sidebar-section>
    </ul>
    <div class="sidebar-footer-content">
      <div class="update-notification" ng-if="applicationState.application.versionStatus.UpdateAvailable">
        <a target="_blank" href="https://github.com/portainer/portainer/releases/tag/{{ applicationState.application.versionStatus.LatestVersion }}" style="color: #091e5d;">
          <i class="fa-lg fas fa-cloud-download-alt" style="margin-right: 2px;"></i> A new version is available
        </a>
      </div>
      <div>
        <img src="~@/assets/images/logo_small.png" class="img-responsive logo" alt="Portainer" />
        <span class="version" data-cy="portainerSidebar-versionNumber">{{ uiVersion }}</span>
      </div>
    </div>
  </div>
</div>
<!-- End Sidebar -->
