<div class="full-background light"></div>
<div class="main-viewport">

	<nav class="sidebar">
		<div class="sidebar-branding">
			{{>enduro_logo}}
		</div>

		<div class="sidebar-items" ng-controller="mainmenu_controller">
			<ul class="sidebar-group">
				<div ng-include="'/admin/layout/pagelist/index.html'"></div>
			</ul>
		</div>

		<div class="sidebar_juicebox_updates" ng-controller="juicebox_updates_controller" ng-if="settings.juicebox_enabled" ng-class="{updated_files_showing: show_updated_files}">
			<ul>
				<li ng-repeat="updated_file in outstanding_changes.diffSet" ng-if="updated_file.type == 'file' && updated_file.status != 'equal'">
					<span>\{{updated_file.name}}</span>
					<div class="diff_bubble">\{{calculate_time_diff(updated_file)}}</div>
				</li>
			</ul>
		</div>

		<div class="userbox" ng-controller="userbox_controller">
			<div class="userbox-bar">
				{{!-- push / cloud save button --}}
				<a ng-click="push()" ng-if="settings.juicebox_enabled" ng-mouseenter="toggle_updated_files(true)" ng-mouseleave="toggle_updated_files(false)">
					<i class="fa fa-cloud"></i>
					<div class="bubble" ng-show="outstanding_changes.differences">\{{outstanding_changes.differences}}</div>
				</a>
				<a ngtooltipster title="Enable juicebox to back up your content" ng-if="!settings.juicebox_enabled" class="disabled"><i class="fa fa-cloud"></i></a>

				{{!-- pull / check if anything is new in the cloud button --}}
				<a ng-click="pull()" ngtooltipster title="See if there is newer content in the cloud" ng-if="settings.juicebox_enabled"><i class="fa fa-refresh"></i></a>
				<a ngtooltipster title="Enable juicebox to back up your content" ng-if="!settings.juicebox_enabled" class="disabled"><i class="fa fa-refresh"></i></a>

				{{!-- admin settings button --}}
				<a href="#/cms/.settings" ngtooltipster title="Page settings"><i class="fa fa-cog"></i></a>

				{{!-- logout button --}}
				<a ng-click="logout()" ngtooltipster title="Logout"><i class="fa fa-power-off"></i></a>
			</div>
		</div>

	</nav>

	<!-- Inner page -->
	<div class="inner-page-viewport" ng-class="{'is-currently-preloading': $root.is_currently_preloading}">
		<div class="currently-editing-page" ng-include="inner_page" ng-controller="pagesplit_controller"></div>
	</div>
</div>

<div ng-include="modal"></div>
