<div class="at-Layout">
    <div class="at-Layout-topNav">
        <at-top-nav-item is-shown="missingLicense" class="at-Layout-topNavItem--logo">
            <a href="/#/">
                <img ng-src="/static/assets/logo-header.svg">
            </a>
        </at-top-nav-item>
        <div class="at-Layout-topNavRightAligner"></div>
        <at-top-nav-item class="at-Layout-topNavItem--user">
            <a ng-href="/#/users/{{ $parent.layoutVm.currentUserId }}">
                <i class="fa fa-user"
                    alt="{{ $parent.layoutVm.getString('CURRENT_USER_LABEL') }} {{ $parent.layoutVm.currentUsername }}">
                </i>
                <span>{{ $parent.layoutVm.currentUsername }}</span>
            </a>
        </at-top-nav-item>
        <at-top-nav-item>
            <a ui-sref="about">
                <i class="fa fa-info-circle" alt="{{ vm.getString('ABOUT') }}"></i>
            </a>
        </at-top-nav-item>
        <at-top-nav-item>
            <a href="http://docs.ansible.com/ansible-tower/" target="_blank">
                <i class="fa fa-book" alt="{{ $parent.layoutVm.getString('VIEW_DOCS') }}"></i>
            </a>
        </at-top-nav-item>
        <at-top-nav-item class="at-Layout-topNavItem--socket"
            ng-if="$parent.layoutVm.socketState &&
                $parent.layoutVm.socketState !== 'ok'">
                    <div><i class="fa" ng-class="$parent.layoutVm.socketIconClass"></i></div>
        </at-top-nav-item>
        <at-top-nav-item is-shown="missingLicense">
            <a href="/#/logout" is-always-shown="license">
                <i class="fa fa-power-off" alt="{{ $parent.layoutVm.getString('LOGOUT') }}"></i>
            </a>
        </at-top-nav-item>
    </div>
    <at-side-nav>
        <div class="at-Layout-sideNavSpacer at-Layout-sideNavSpacer--first">
          <span class="at-Layout-sideNavHeader">
              {{:: $parent.layoutVm.getString('VIEWS_HEADER') }}
          <span>
        </div>
        <at-side-nav-item icon-class="fa-tachometer" route="dashboard" name="DASHBOARD">
        </at-side-nav-item>
        <at-side-nav-item icon-class="fa-spinner" route="jobs" name="JOBS">
        </at-side-nav-item>
        <at-side-nav-item icon-class="fa-calendar" route="schedules" name="SCHEDULES">
        </at-side-nav-item>
        <at-side-nav-item icon-class="fa-columns" route="portalMode.myJobs" name="MY_VIEW">
        </at-side-nav-item>
        <div class="at-Layout-sideNavSpacer">
            <span class="at-Layout-sideNavHeader">
                {{:: $parent.layoutVm.getString('RESOURCES_HEADER') }}
            <span>
        </div>
        <at-side-nav-item icon-class="fa-pencil-square-o" route="templates" name="TEMPLATES">
        </at-side-nav-item>
        <at-side-nav-item icon-class="fa-key" route="credentials" name="CREDENTIALS">
        </at-side-nav-item>
        <at-side-nav-item icon-class="fa-folder-open" route="projects" name="PROJECTS">
        </at-side-nav-item>
        <at-side-nav-item icon-class="fa-sitemap" route="inventories" name="INVENTORIES">
        </at-side-nav-item>
        <at-side-nav-item icon-class="fa-code" route="inventoryScripts" name="INVENTORY_SCRIPTS">
        </at-side-nav-item>
        <div class="at-Layout-sideNavSpacer">
            <span class="at-Layout-sideNavHeader">
                {{:: $parent.layoutVm.getString('ACCESS_HEADER') }}
            <span>
        </div>
        <at-side-nav-item icon-class="fa-building" route="organizations" name="ORGANIZATIONS">
        </at-side-nav-item>
        <at-side-nav-item icon-class="fa-user" route="users" name="USERS">
        </at-side-nav-item>
        <at-side-nav-item icon-class="fa-users" route="teams" name="TEAMS">
        </at-side-nav-item>
        <div class="at-Layout-sideNavSpacer" ng-show="$parent.layoutVm.isSuperUser || $parent.layoutVm.isOrgAdmin">
            <span class="at-Layout-sideNavHeader">
                {{:: $parent.layoutVm.getString('ADMINISTRATION_HEADER') }}
            <span>
        </div>
        <at-side-nav-item icon-class="fa-list-alt" route="credentialTypes" name="CREDENTIAL_TYPES"
             system-admin-only="true">
        </at-side-nav-item>
        <at-side-nav-item icon-class="fa-bell" route="notifications" name="NOTIFICATIONS"
            ng-show="$parent.layoutVm.isSuperUser || $parent.layoutVm.isOrgAdmin || $parent.layoutVm.isNotificationAdmin">
        </at-side-nav-item>
        <at-side-nav-item icon-class="fa-briefcase" route="managementJobsList" name="MANAGEMENT_JOBS"
            system-admin-only="true">
        </at-side-nav-item>
        <at-side-nav-item icon-class="fa-server" route="instanceGroups" name="INSTANCE_GROUPS"
            ng-show="$parent.layoutVm.isSuperUser || $parent.layoutVm.isOrgAdmin">
        </at-side-nav-item>
        <at-side-nav-item icon-class="fa-cubes" route="applications" name="APPLICATIONS"
            ng-show="$parent.layoutVm.isSuperUser || $parent.layoutVm.isOrgAdmin">
        </at-side-nav-item>
        <at-side-nav-item icon-class="fa-cog" route="settings" name="SETTINGS"
            system-admin-only="true" show-settings-sub-menu="true" no-tooltip-on-collapsed="true">
        </at-side-nav-item>
    </at-side-nav>
    <div class="at-Layout-main" ng-class="{'at-Layout-main--noLicense': vm.licenseIsMissing}">
        <div class="at-Layout-content">
            <ng-transclude></ng-transclude>
        </div>
    </div>
</div>
