<div id="main-menu" role="navigation">
	<div id="main-menu-inner">
		<ul class="navigation">
			<li ui-sref-active="active">
				<a ui-sref="dashboard">
					<i class="menu-icon fa fa-dashboard"></i>
					<span class="mm-text animated fadeIn">{{ 'DASHBOARD' | translate }}</span>
				</a>
			</li>
			<li ng-class="{ 'active': $state.includes('products') }">
				<a ui-sref="products.browse">
					<i class="menu-icon fa fa-th"></i>
					<span class="mm-text animated fadeIn">{{ 'PRODUCTS' | translate | capitalize}}</span>
				</a>
			</li>
			<li ng-class="{ 'active': $state.includes('reports') }">
				<a ui-sref="reports.latest">
					<i class="menu-icon fa fa-file"></i>
					<span class="mm-text animated fadeIn">{{ 'REPORTS' | translate }}</span>
				</a>
			</li>
			<li ui-sref-active="active" ng-if="accessUtils.hasImportAccess()">
				<a ui-sref="import">
					<i class="menu-icon fa fa-files-o"></i>
					<span class="mm-text animated fadeIn">{{ 'IMPORT' | translate }}</span>
				</a>
			</li>
			<li class="mm-dropdown" id="settingsMenuRoot"
				ng-class="{ 'active': $state.includes('settings'), 'open': $state.includes('settings') }">
				<a href="">
					<i class="menu-icon fa fa-tasks"></i>
					<span class="mm-text mmc-dropdown-delay animated fadeIn" style="position: relative; left: -3px; top: -1px;"
						ng-cloak>{{ 'SETTINGS' | translate }}</span>
				</a>
				<ul class="mmc-dropdown-delay animated fadeInLeft">
				<!-- <li ng-if="user.admin" ui-sref-active="active"> -->
					<li ng-if="accessUtils.hasPriceStrategyAccess()" ui-sref-active="active">
						<a ui-sref="settings.pricingstrategy">
							<span class="mm-text">{{ 'PRICING_STRATEGY' | translate }}</span>
						</a>
					</li>
					<li ng-if="user.admin" ui-sref-active="active">
						<a ui-sref="settings.tenant">
							<span class="mm-text">{{ 'TENANT' | translate }}</span>
						</a>
					</li>
					<li ui-sref-active="active">
						<a ui-sref="settings.user">
							<span class="mm-text">{{ 'USER' | translate }}</span>
						</a>
					</li>
				</ul>
			</li>
			<li class="mm-dropdown" ng-if="accessUtils.hasSystemSettingsAccess()" id="systemMenuRoot"
				ng-class="{ 'active': $state.includes('system'), 'open': $state.includes('system') }">
				<a href="">
					<i class="menu-icon fa fa-cog"></i>
					<span class="mm-text mmc-dropdown-delay animated fadeIn" style="position: relative; left: -3px; top: -1px;"
						ng-cloak>{{ 'SYSTEM' | translate }}</span>
				</a>
				<ul class="mmc-dropdown-delay animated fadeInLeft">
					<li ng-class="{ 'active': $state.includes('system.actions') }" ng-if="accessUtils.hasSystemSettingsAccess()">
						<a ui-sref="system.actions.services">
							<span class="mm-text">{{ 'ACTIONS' | translate }}</span>
						</a>
					</li>
					<li ui-sref-active="active" ng-if="accessUtils.hasSystemSettingsAccess()">
						<a ui-sref="system.cluster">
							<span class="mm-text">{{ 'CLUSTER' | translate }}</span>
						</a>
					</li>
					<li ng-class="{ 'active': $state.includes('system.crawling') }" ng-if="accessUtils.hasSystemSettingsAccess()">
						<a ui-sref="system.crawling.statistics">
							<span class="mm-text">{{ 'CRAWLING' | translate }}</span>
						</a>
					</li>
					<li ng-class="{ 'active': $state.includes('system.info') }" ng-if="accessUtils.hasSystemSettingsAccess()">
						<a ui-sref="system.info.general">
							<span class="mm-text">{{ 'INFO' | translate }}</span>
						</a>
					</li>
					<li ui-sref-active="active" ng-if="accessUtils.hasSystemSettingsAccess()">
						<a ui-sref="system.logs">
							<span class="mm-text">{{ 'LOGS' | translate }}</span>
						</a>
					</li>
					<li ui-sref-active="active" ng-if="accessUtils.hasSystemSettingsAccess()">
						<a ui-sref="system.parsing">
							<span class="mm-text">{{ 'PARSING' | translate }}</span>
						</a>
					</li>
					<li ui-sref-active="active" ng-if="accessUtils.hasSystemSettingsAccess()">
						<a ui-sref="system.properties">
							<span class="mm-text">{{ 'PROPERTIES' | translate }}</span>
						</a>
					</li>
					<li ng-class="{ 'active': $state.includes('system.proxy') }" ng-if="accessUtils.hasSystemSettingsAccess()">
						<a ui-sref="system.proxy.list">
							<span class="mm-text">{{ 'PROXY' | translate }}</span>
						</a>
					</li>
					<li ui-sref-active="active" ng-if="accessUtils.hasSystemSettingsAccess()">
						<a ui-sref="system.sessions">
							<span class="mm-text">{{ 'SESSIONS' | translate }}</span>
						</a>
					</li>
					<li ui-sref-active="active" ng-if="accessUtils.hasSystemSettingsAccess()">
						<a ui-sref="system.synonyms">
							<span class="mm-text">{{ 'SYNONYMS' | translate }}</span>
						</a>
					</li>
					<li ui-sref-active="active" ng-if="accessUtils.hasSystemSettingsAccess()">
						<a ui-sref="system.tenants">
							<span class="mm-text">{{ 'TENANTS' | translate }}</span>
						</a>
					</li>
					<li ui-sref-active="active" ng-if="accessUtils.hasSystemSettingsAccess()">
						<a ui-sref="system.users">
							<span class="mm-text">{{ 'USERS' | translate }}</span>
						</a>
					</li>
				</ul>
			</li>
		</ul>
	</div>
</div>