<!-- Article Navigation -->
<nav class="navbar navbar-inverse navbar-secondary fixed">
    <div class="container-fluid">
    
        <ul class="nav navbar-nav navbar-right">
	        
	        <!-- SYNC (if previously imported)-->
	        <li ng-if="article.origin && article.origin.length > 0">
	        	<a class="clickable" ng-click="openSync()"><span class="glyphicon glyphicon-refresh"></span> Sync</a>
	        </li>
	        
	        <!-- DOWNLOAD (archive of article) -->
	        <li><a class="clickable" ng-click="download()"><span class="glyphicon glyphicon-download"></span> Download</a></li>
	        
	        <!-- CLOUD: If no API ACCESS / Publications (don't allow any actions) -->
	        <li ng-if="!settings.canAccessCloud() && !(article.entityId.length > 0)" >
	        	<a  class="disabled" 
		        	popover="{{getCloudError()}}" 
			        popover-placement="bottom"
			        popover-trigger="mouseenter">
		        		<span class="glyphicon glyphicon-cloud"></span> AEM Mobile
		        </a>
	        </li>
	        
	        <!-- CLOUD: No access to cloud but has a reference -->
	        <li dropdown is-open="cloudwithID.isOpen" ng-if="!settings.canAccessCloud() && (article.entityId.length > 0) ">
	        	
	        	<a class="clickable" dropdown-toggle>
					<span class="glyphicon glyphicon-cloud"></span> AEM Mobile
				</a>
				
				<ul class="dropdown-menu" role="menu">
					<li class="clickable" ng-if="article.entityId.length > 0">
						<a ng-click="unlink()"><span class="glyphicon glyphicon-scissors"></span> Unlink from Cloud</a>
					</li>
				</ul>
				
	        </li>
	        	        
	        <!-- CLOUD: If API Access + Publications -->
	        <li dropdown is-open="push.isOpen" ng-if="settings.canAccessCloud()">
	        		        	
				<a class="clickable" dropdown-toggle>
					<span class="glyphicon glyphicon-cloud"></span> AEM Mobile
				</a>
				
				<!-- IF MISSING FROM THE CLOUD -->
				<ul ng-if="(article.entityId.length > 0) && article.isMissing" class="dropdown-menu" role="menu">
					
					<div class="alert alert-warning" role="alert">
						<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
						Article is missing in AEM Mobile
					</div>					
					
					<br />
					
					<li class="clickable">
						<a ng-click="link()"><span class="glyphicon glyphicon-link"></span> Link to Existing Article in the Cloud</a>
					</li>
					
					<li class="divider"></li>
					
					<li class="clickable">
						<a ng-click="unlink()"><span class="glyphicon glyphicon-scissors"></span> Unlink from the Cloud</a>
					</li>
					
				</ul>
				
				<!-- IF NOT IN THE CLOUD -->
				<ul ng-if="!(article.entityId.length > 0)" class="dropdown-menu" role="menu">
					<li class="clickable" >
						<a ng-click="create(true)"><span class="glyphicon glyphicon-cloud-upload"></span> Create in the Cloud</a>
					</li>
					
					<li class="clickable" >
						<a ng-click="link()"><span class="glyphicon glyphicon-link"></span> Link to Article in the Cloud</a>
					</li>
				</ul>
				
				<!-- IF IN THE CLOUD AND NOT MISSING -->
				<ul ng-if="(article.entityId.length > 0) && !article.isMissing" class="dropdown-menu" role="menu">
					<li class="clickable">
						<a ng-click="push_all()"><span class="glyphicon glyphicon-cloud-upload"></span> Update ALL</a>
					</li>
					
					<li class="divider"></li>
					
					<li class="clickable">
						<a ng-click="push_metadata()"><span class="glyphicon glyphicon-tags"></span> Update Metadata</a>
					</li>
					
					<li class="clickable">
						<a ng-click="push_content()"><span class="glyphicon glyphicon-picture"></span> Update Images (thumbnails)</a>
					</li>
					
					<li class="clickable">
						<a ng-click="push_article_folio()"><span class="glyphicon glyphicon-open"></span> Content File (.article)</a>
					</li>
					
					<li class="divider"></li>
					
					<li class="clickable">
						<a ng-click="delete_cloud()"><span class="glyphicon glyphicon-trash"></span> Delete from the Cloud</a>
					</li>									
					
					<li class="divider"></li>

					<li class="clickable">
						<a ng-click="unlink()"><span class="glyphicon glyphicon-scissors"></span> Unlink from the Cloud</a>
					</li>
					
					<li class="divider"></li>
					
					<li>
						<a class="disabled" ng-if="!article.isPublishable" popover="The article is missing a thumnail or article content. Click Update ALL to add them before publishing." popover-placement="bottom" popover-trigger="mouseenter">
							<span class="glyphicon glyphicon-send"></span> Publish
						</a>
						<a class="clickable" ng-click="publish()" ng-if="article.isPublishable"><span class="glyphicon glyphicon-send"></span> Publish</a>
					</li>
				
				</ul>
			</li>
			
			<!-- PREVIEW SIZE -->
	        <li dropdown is-open="preview.isOpen">
				<a class="clickable" dropdown-toggle>
					<span class="glyphicon glyphicon-phone"></span> Preview 
				</a>
				<ul class="dropdown-menu" role="menu">
					<li class="clickable" ng-repeat="device in settings.dps_devices">
						<a ng-click="previewDevice(device)">
							<span class="glyphicon glyphicon-ok" ng-style="{ 'visibility': (selectedDevice.title == device.title) ? 'visible' : 'hidden' }"></span> {{device.title}}
						</a>
					</li>
					<li class="clickable">
						<a ng-click="previewDevice({ title: 'Desktop', width: '100%'})">
							<span class="glyphicon glyphicon-ok" ng-style="{ 'visibility': (selectedDevice.title == 'Desktop' || !selectedDevice) ? 'visible' : 'hidden' }"></span> Desktop
						</a>
					</li>
				</ul>
			</li>
			
			<!-- METADATA -->
            <li><a class="clickable" data-toggle="collapse" ng-click="showMetadata = !showMetadata">
	            	<span class="glyphicon" ng-class="{'glyphicon-menu-down': !showMetadata, 'glyphicon-menu-up': showMetadata}"></span> Properties
	        	</a>
	        </li>
            
            <!-- EDIT -->
            <li>
				<a class="clickable" href="{{article.editUrl}}" target="_blank"><span class="glyphicon glyphicon-pencil"></span> Edit</a>
			</li>
                        	        
			<!-- DELETE -->
            <li><a class="clickable" ng-click="delete()"><span class="glyphicon glyphicon-trash"></span> Delete</a></li>

            <!-- SAVE (locally) -->
            <li><a class="clickable" ng-click="save()"><span class="glyphicon glyphicon-save"></span> Save</a></li>
            
        </ul>	          
      
    </div>
</nav>	
	
<!-- Article Metadata -->
<!-- <div ui-view="metadata"></div> -->
<div ng-cloak collapse="!showMetadata">
	<div class="article-header metadata-group" ng-include="config.viewPath + 'views/article/metadata.html'"></div>
</div>

<!-- Article Content / Body -->
<div class="single-article">
<!-- 	<article ng-bind-html="article.body"></article> -->
	<iframe width="{{selectedDevice.width}}" src="{{article.cmsPreview}}">
</div>