<!DOCTYPE html>
<html id="architect">
<head>
	<title>Architect</title>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="{{ app.base_url ~ '/assets/css/builder.css' }}">
	<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
	<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
	<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
	<link href='http://fonts.googleapis.com/css?family=Ubuntu:100,400,500,600,700' rel='stylesheet' type='text/css'>
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
	<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
	<script async type="text/javascript" src="http://feather.aviary.com/js/feather.js"></script>
</head>
{% verbatim %}
<body ng-app="builder" translate-cloak ng-cloak>
	<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" ng-controller="NavbarController" ng-class="{ hidden: state.current.name === 'home' || state.current.name === 'register' }">
	  <div class="container-fluid">
	    <!-- Brand and toggle get grouped for better mobile display -->
	    <div class="navbar-header">
	      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
	        <span class="sr-only">Toggle navigation</span>
	        <span class="icon-bar"></span>
	        <span class="icon-bar"></span>
	        <span class="icon-bar"></span>
	      </button>
	      <a ng-show="state.current.name == 'builder' || state.current.name == 'new'" class="navbar-brand" data-toggle="tooltip" data-placement="right" title="Dashboard" ui-sref="dashboard"><i class="fa fa-angle-left"></i></a>
	      <img ng-show="state.current.name !== 'builder'" class="logo" ng-src="{{ baseUrl+'/assets/images/logo.png' }}" alt="logo">
	    </div>

	    <div class="collapse navbar-collapse">

	    	<div class="nav navbar-nav navbar-right" id="account-actions" ng-show="state.current.name === 'builder' || state.current.name === 'dashboard'">
			    <div class="navbar-text" ng-click="logout()"> <i class="fa fa-power-off"></i></div>
			</div>

	    	<div ng-show="state.current.name === 'builder'">
	    		<!-- screen sizes -->
		      	<ul class="nav navbar-nav nav-actions">
		      		<li><button ng-click="resizeCanvas('lg')" class="navbar-btn"><i class="fa fa-desktop"></i> </button></li>
		      		<li><button ng-click="resizeCanvas('md')" class="navbar-btn"><i class="fa fa-laptop"></i> </button></li>
		      		<li><button ng-click="resizeCanvas('sm')" class="navbar-btn"><i class="fa fa-tablet"></i> </button></li>
		      		<li><button ng-click="resizeCanvas('xs')" class="navbar-btn"><i class="fa fa-mobile-phone"></i> </button></li>
		      	</ul>

		    	<!-- Flyout panel openers -->
	        	<ul class="nav navbar-nav navbar-tabs">
	        		<li ng-click="openPanel('themes')"><a href="">{{ 'themes' | translate }}</a></li>
	        		<li ng-click="openPanel('templates')"><a href="">{{ 'templates' | translate }}</a></li>
	        		<li ng-click="openPanel('pages')"><a href="">{{ 'pages' | translate }}</a></li>
	        		<li ng-click="openPanel('export')"><a href="">{{ 'export' | translate }}</a></li>
	        		<li ng-click="openPanel('settings')"><a href="">{{ 'settings' | translate }}</a></li>
	        		<li ng-click="preview()"><a href="">{{ 'preview' | translate }}</a></li>
	        	</ul>	
				
				<!-- Undo Buttons -->
		      	<ul class="nav navbar-nav nav-actions" id="undo-actions">
		      		<li><button data-toggle="tooltip" data-placement="left" title="Undo" class="navbar-btn undo" ng-disabled="!undoManager.canUndo" ng-click="undo()"><i class="fa fa-reply"></i> </button></li>
		        	<li><button data-toggle="tooltip" data-placement="right" title="Redo" class="navbar-btn redo" ng-disabled="!undoManager.canRedo" ng-click="redo()"><i class="fa fa-mail-forward"></i> </button></li>
		      	</ul>

		      	<div class="navbar-right">
			      	<div class="nav navbar-nav" id="save-status" bl-save-status>
			      		<p class="navbar-text" ng-show="!settings.get('enableAutoSave')" id="save-disabled">{{ 'autoSaveDisabled' | translate }}</p>
			      		<p class="navbar-text" ng-show="!savingChanges && settings.get('enableAutoSave')" id="save-saved">{{ 'allChangesSaved' | translate }}</p>
			      		<p class="navbar-text" ng-show="savingChanges" id="save-saving">{{ 'savingChanges' | translate }}</p>
			      	</div>

			      	<div class="nav navbar-nav">
			      		<button ng-click="project.save()" class="navbar-btn btn btn-success"><i class="fa fa-save"></i>{{ 'save' | translate }}</button>
			      		<button data-toggle="modal" data-target="#publish-modal" class="navbar-btn btn btn-primary"><i class="fa fa-cloud"></i>{{ 'publish' | translate }}</button>
			      	</div>
		      	</div>
	    	</div>

	    	<ul class="nav-locales nav navbar-nav navbar-right" ng-show="state.current.name !== 'builder'">
				<li ng-if="locales.available.length > 1" ng-repeat="locale in locales.available" ng-class="{ active: selectedLocale == locale.name }" title="{{ locale.name }}" ng-click="changeLocale(locale.name)">
					<img ng-src="{{ baseUrl+'/assets/images/flags/'+locale.flag+'.png'}}">
				</li>
			</ul>
	    </div>
	  </div>
	</nav>

	<div id="view" style="height: 100%" ui-view></div>

	<div class="modal fade" id="publish-modal" bl-export-to-ftp>
		<div class="modal-dialog">
	    	<div class="modal-content" ng-class="{demo: isDemo}">
	      		<div class="modal-header">
	        		<button type="button" class="close pull-right" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">{{ 'close' | translate }}</span></button>
	        		<h4 class="modal-title">{{ 'publishToRemoteFtp' | translate }}</h4>
	      		</div>
	      		<div class="modal-body">

	      			<div ng-if="isDemo" class="alert alert-info demo-alert">Publishing to remote ftp is disabled on demo site. Normally you would be able to enter your credentials and export the entire project with a single 'publish' click below.</div>

	      			<div class="form-group">
	        			<label for="host">{{ 'host' | translate }}</label>
	        			<input type="text" class="form-control" ng-model="publishCredentials.host">
	        		</div>
	        		<div class="form-group">
	        			<label for="username">{{ 'username' | translate }}</label>
	        			<input type="text" class="form-control" ng-model="publishCredentials.user">
	        		</div>
	        		<div class="form-group">
	        			<label for="password">{{ 'password' | translate }}</label>
	        			<input type="password" class="form-control" ng-model="publishCredentials.password">
	        		</div>
	        		<div class="form-group">
	        			<label for="folder">{{ 'folder' | translate }}</label>
	        			<input type="text" class="form-control" ng-model="publishCredentials.root">
	        		</div>
	        		<div class="row">
	        			<div class="form-group col-sm-4 pull-left">
		        			<label for="port">{{ 'port' | translate }}</label>
		        			<input type="text" class="form-control" ng-model="publishCredentials.port">
		        		</div>
		        		<div class="form-group col-sm-2 pull-right">
		        			<div class="checkbox">
						        <label>
						          	<input ng-model="publishCredentials.ssl" type="checkbox"> {{ 'ssl' | translate }}
						        </label>
						   	</div>
		        		</div>
	        		</div>
	        		<div class="alert alert-danger error"></div>
	      		</div>
	      		<div class="modal-footer">
	      			<button class="btn btn-danger close-modal">{{ 'close' | translate }}</button>
	      			<button class="btn btn-success publish" ng-disabled="isDemo">{{ 'publish' | translate }}</button>
	      		</div>
	      		<div class="loader"><div class="inner"><i class="fa fa-spinner fa-spin"></i><div class="text">{{ 'publishing' | translate }}</div></div></div>
	    	</div>
	  	</div>
	</div>

	<!-- <footer ng-show="state.current.name !== 'builder'"><div class="copyright">&copy; Architect</div></footer> -->
	
	{% endverbatim %}

	<script>
		var baseUrl = '{{ app.base_url }}',
			isDemo  = '{{ app.is_demo }}',
			keys    = '{{ app.keys|raw }}',
			version = '{{ app.version }}',
			locales = '{{ app.jsLocales|raw }}',
			trans   = {{ app.translations|raw }},
			selectedLocale = '{{ app.selectedLocale|raw }}';
	</script>

	<script src="{{ app.base_url ~ '/assets/js/builder.min.js' }}"></script>
	<script src="{{ app.base_url ~ '/assets/js/vendor/ace/ace.js' }}"></script>


</body>
</html>
