<!DOCTYPE html>
<html id="architect">
<head>
	<title>Architect</title>
	<meta charset="UTF-8">
    <style type="text/css">[ng-cloak]#splash{display:block!important}[ng-cloak]{display:none}#splash{display:none;position:absolute;top:45%;left:50%;width:6em;height:6em;overflow:hidden;border-radius:100%;z-index:0}@-webkit-keyframes fade{from{opacity:1}to{opacity:.2}}@keyframes fade{from{opacity:1}to{opacity:.2}}@-webkit-keyframes rotate{from{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}}@keyframes rotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}#splash::after,#splash::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%}#splash::before{background:linear-gradient(to right,green,#ff0);-webkit-animation:rotate 2.5s linear infinite;animation:rotate 2.5s linear infinite}#splash::after{background:linear-gradient(to bottom,red,#00f);-webkit-animation:fade 2s infinite alternate,rotate 2.5s linear reverse infinite;animation:fade 2s infinite alternate,rotate 2.5s linear reverse infinite}#splash-spinner{position:absolute;width:100%;height:100%;z-index:1;border-radius:100%;box-sizing:border-box;border-left:.5em solid transparent;border-right:.5em solid transparent;border-bottom:.5em solid rgba(255,255,255,.3);border-top:.5em solid rgba(255,255,255,.3);-webkit-animation:rotate .8s linear infinite;animation:rotate .8s linear infinite}</style>
	<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-->

    <div id="splash" ng-cloak>
        <div id="splash-spinner"></div>
    </div>

	<div ng-cloak style="height: 100%">
        <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' || state.current.name === 'users' ">
                        <div class="navbar-text" ng-click="logout()"> <i class="fa fa-power-off"></i></div>
                    </div>

                    <div ng-show="(state.current.name === 'dashboard' || state.current.name === 'users') && (userCan('users.update') || isDemo)">
                        <ul class="nav navbar-nav navbar-tabs dash-nav-tabs">
                            <li ng-class="{ active: state.current.name == 'dashboard' }"><a ui-sref="dashboard"><i class="fa fa-wrench"></i> {{ 'projects' | translate }}</a></li>
                            <li ng-class="{ active: state.current.name == 'users' }"><a ui-sref="users"><i class="fa fa-users"></i> {{ 'users' | translate }}</a></li>
                        </ul>
                    </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 nav-dropdown">
                            <li bl-nav-dropdown class="dropdown-toggler"><a href="">{{ 'panels' | translate }} <span class="caret"></span></a></li>
                            <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 hide-on-small-screens" 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 || !userCan('publish')}">
                    <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 ng-if="!userCan('publish') && ! isDemo" class="alert alert-info demo-alert">{{ 'noPermToPublish' | translate }}</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 }}',
                    settings =  {{ app.settingsJSON | 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>

    </div>

</body>
</html>
