<!-- Sidebar -->
<div id="sidebar-wrapper">
  <div class="sidebar-header">
    <a ui-sref="portainer.home">
      <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">
      <li class="sidebar-list">
        <a ui-sref="portainer.home" ui-sref-active="active">Home <span class="menu-icon fa fa-home fa-fw"></span></a>
      </li>
      <li class="sidebar-title endpoint-name" ng-if="applicationState.endpoint.name"> <span class="fa fa-plug space-right"></span>{{ applicationState.endpoint.name }} </li>
      <docker-sidebar-content
        ng-if="applicationState.endpoint.mode"
        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' || applicationState.endpoint.mode.provider === 'VMWARE_VIC'"
        admin-access="!applicationState.application.authentication || isAdmin"
        offline-mode="endpointState.OfflineMode"
      ></docker-sidebar-content>
      <li class="sidebar-title" authorization="IntegrationStoridgeAdmin" ng-if="applicationState.endpoint.mode && applicationState.endpoint.extensions.length > 0">
        <span>Integrations</span>
      </li>
      <li
        authorization="IntegrationStoridgeAdmin"
        class="sidebar-list"
        ng-if="
          applicationState.endpoint.mode &&
          applicationState.endpoint.extensions.indexOf('storidge') !== -1 &&
          applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE' &&
          applicationState.endpoint.mode.role === 'MANAGER'
        "
      >
        <a ui-sref="storidge.cluster" ui-sref-active="active">Storidge <span class="menu-icon fa fa-bolt fa-fw"></span></a>
        <div
          class="sidebar-sublist"
          ng-if="
            toggle &&
            ($state.current.name === 'storidge.cluster' ||
              $state.current.name === 'storidge.profiles' ||
              $state.current.name === 'storidge.monitor' ||
              $state.current.name === 'storidge.profiles.new' ||
              $state.current.name === 'storidge.profiles.profile' ||
              $state.current.name === 'storidge.drives' ||
              $state.current.name === 'storidge.drives.drive' ||
              $state.current.name === 'storidge.cluster.node')
          "
        >
          <a ui-sref="storidge.monitor" ui-sref-active="active">Monitor</a>
        </div>
        <div
          class="sidebar-sublist"
          ng-if="
            toggle &&
            ($state.current.name === 'storidge.cluster' ||
              $state.current.name === 'storidge.profiles' ||
              $state.current.name === 'storidge.monitor' ||
              $state.current.name === 'storidge.profiles.new' ||
              $state.current.name === 'storidge.profiles.profile' ||
              $state.current.name === 'storidge.drives' ||
              $state.current.name === 'storidge.drives.drive' ||
              $state.current.name === 'storidge.cluster.node')
          "
        >
          <a ui-sref="storidge.profiles" ui-sref-active="active">Profiles</a>
        </div>
        <div
          class="sidebar-sublist"
          ng-if="
            toggle &&
            ($state.current.name === 'storidge.cluster' ||
              $state.current.name === 'storidge.profiles' ||
              $state.current.name === 'storidge.monitor' ||
              $state.current.name === 'storidge.profiles.new' ||
              $state.current.name === 'storidge.profiles.profile' ||
              $state.current.name === 'storidge.drives' ||
              $state.current.name === 'storidge.drives.drive' ||
              $state.current.name === 'storidge.cluster.node')
          "
        >
          <a ui-sref="storidge.drives" ui-sref-active="active">Drives</a>
        </div>
      </li>
      <li class="sidebar-title" ng-if="(!applicationState.application.authentication || isAdmin) && applicationState.application.enableHostManagementFeatures">
        <span>Scheduler</span>
      </li>
      <li class="sidebar-list" ng-if="(!applicationState.application.authentication || isAdmin) && applicationState.application.enableHostManagementFeatures">
        <a ui-sref="portainer.schedules" ui-sref-active="active">Host jobs <span class="menu-icon fa fa-clock fa-fw"></span></a>
      </li>
      <li class="sidebar-title" ng-if="isAdmin && applicationState.application.enableEdgeComputeFeatures">
        <span>Edge Compute</span>
      </li>
      <li class="sidebar-list" ng-if="isAdmin && applicationState.application.enableEdgeComputeFeatures">
        <a ui-sref="edge.groups" ui-sref-active="active">Edge Groups <span class="menu-icon fa fa-object-group fa-fw"></span></a>
      </li>
      <li class="sidebar-list" ng-if="isAdmin && applicationState.application.enableEdgeComputeFeatures">
        <a ui-sref="edge.stacks" ui-sref-active="active">Edge Stacks <span class="menu-icon fa fa-layer-group fa-fw"></span></a>
      </li>
      <li class="sidebar-title">
        <span>Settings</span>
      </li>
      <li class="sidebar-list" ng-if="!applicationState.application.authentication || isAdmin">
        <a ui-sref="portainer.extensions" ui-sref-active="active">Extensions <span class="menu-icon fa fa-bolt fa-fw"></span></a>
      </li>
      <li class="sidebar-list" ng-if="applicationState.application.authentication && (isAdmin || isTeamLeader)">
        <a ui-sref="portainer.users" ui-sref-active="active">Users <span class="menu-icon fa fa-users fa-fw"></span></a>
        <div
          class="sidebar-sublist"
          ng-if="
            toggle &&
            ($state.current.name === 'portainer.users' ||
              $state.current.name === 'portainer.users.user' ||
              $state.current.name === 'portainer.teams' ||
              $state.current.name === 'portainer.teams.team' ||
              $state.current.name === 'portainer.roles' ||
              $state.current.name === 'portainer.roles.role' ||
              $state.current.name === 'portainer.roles.new')
          "
        >
          <a ui-sref="portainer.teams" ui-sref-active="active">Teams</a>
        </div>
        <div
          class="sidebar-sublist"
          ng-if="
            toggle &&
            ($state.current.name === 'portainer.users' ||
              $state.current.name === 'portainer.users.user' ||
              $state.current.name === 'portainer.teams' ||
              $state.current.name === 'portainer.teams.team' ||
              $state.current.name === 'portainer.roles' ||
              $state.current.name === 'portainer.roles.role' ||
              $state.current.name === 'portainer.roles.new')
          "
        >
          <a ui-sref="portainer.roles" ui-sref-active="active">Roles</a>
        </div>
      </li>
      <li class="sidebar-list" ng-if="!applicationState.application.authentication || isAdmin">
        <a ui-sref="portainer.endpoints" ui-sref-active="active">Endpoints <span class="menu-icon fa fa-plug fa-fw"></span></a>
        <div
          class="sidebar-sublist"
          ng-if="
            toggle &&
            ($state.current.name === 'portainer.endpoints' ||
              $state.current.name === 'portainer.endpoints.endpoint' ||
              $state.current.name === 'portainer.endpoints.new' ||
              $state.current.name === 'portainer.endpoints.endpoint.access' ||
              $state.current.name === 'portainer.groups' ||
              $state.current.name === 'portainer.groups.group' ||
              $state.current.name === 'portainer.groups.group.access' ||
              $state.current.name === 'portainer.groups.new' ||
              $state.current.name === 'portainer.tags')
          "
        >
          <a ui-sref="portainer.groups" ui-sref-active="active">Groups</a>
        </div>
        <div
          class="sidebar-sublist"
          ng-if="
            toggle &&
            ($state.current.name === 'portainer.endpoints' ||
              $state.current.name === 'portainer.endpoints.endpoint' ||
              $state.current.name === 'portainer.endpoints.new' ||
              $state.current.name === 'portainer.endpoints.endpoint.access' ||
              $state.current.name === 'portainer.groups' ||
              $state.current.name === 'portainer.groups.group' ||
              $state.current.name === 'portainer.groups.group.access' ||
              $state.current.name === 'portainer.groups.new' ||
              $state.current.name === 'portainer.tags')
          "
        >
          <a ui-sref="portainer.tags" ui-sref-active="active">Tags</a>
        </div>
      </li>
      <li class="sidebar-list">
        <a ui-sref="portainer.registries" ui-sref-active="active">Registries <span class="menu-icon fa fa-database fa-fw"></span></a>
      </li>
      <li class="sidebar-list" ng-if="!applicationState.application.authentication || isAdmin">
        <a ui-sref="portainer.settings" ui-sref-active="active">Settings <span class="menu-icon fa fa-cogs fa-fw"></span></a>
        <div
          class="sidebar-sublist"
          ng-if="
            toggle &&
            ($state.current.name === 'portainer.settings' || $state.current.name === 'portainer.settings.authentication' || $state.current.name === 'portainer.about') &&
            applicationState.application.authentication &&
            isAdmin
          "
        >
          <a ui-sref="portainer.settings.authentication" ui-sref-active="active">Authentication</a></div
        >
        <div
          class="sidebar-sublist"
          ng-if="
            toggle && ($state.current.name === 'portainer.settings' || $state.current.name === 'portainer.settings.authentication' || $state.current.name === 'portainer.about')
          "
        >
          <a ui-sref="portainer.about" ui-sref-active="active">About</a>
        </div>
      </li>
    </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">{{ uiVersion }}</span>
      </div>
    </div>
  </div>
</div>
<!-- End Sidebar -->
