<!DOCTYPE html>
<html ng-app="Application" ng-controller="MainController">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
    <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'unsafe-inline' 'unsafe-eval' 'self' *.cloudron.io <%= apiOriginHostname %>; img-src * data:;" /> -->

    <!-- this gets changed once we get the config (because angular has not loaded yet, we see template string for a flash) -->
    <title> Cloudron </title>

    <link id="favicon" href="/api/v1/cloudron/avatar" rel="icon" type="image/png">

    <!-- CSS -->
    <link rel="stylesheet" type="text/css" href="/3rdparty/slick.css"/>
    <link rel="stylesheet" type="text/css" href="/3rdparty/angular-ui-notification.min.css"/>
    <link href="theme.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="3rdparty/css/font-awesome.min.css" rel="stylesheet" rel="stylesheet" type="text/css">

    <!-- jQuery-->
    <script src="3rdparty/js/jquery.min.js"></script>

    <!-- toBlob() polyfill-->
    <script src="3rdparty/js/canvas-to-blob.min.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="3rdparty/js/bootstrap.min.js"></script>

    <!-- Slick carousel -->
    <script type="text/javascript" src="3rdparty/js/slick.js"></script>

    <!-- Angularjs scripts -->
    <script src="3rdparty/js/angular.min.js"></script>
    <script src="3rdparty/js/angular-loader.min.js"></script>
    <script src="3rdparty/js/angular-route.min.js"></script>
    <script src="3rdparty/js/angular-animate.min.js"></script>
    <script src="3rdparty/js/angular-base64.min.js"></script>
    <script src="3rdparty/js/angular-md5.min.js"></script>
    <script src="3rdparty/js/angular-sanitize.min.js"></script>
    <script src="3rdparty/js/angular-slick.min.js"></script>
    <script src="3rdparty/js/angular-ui-notification.min.js"></script>
    <script src="3rdparty/js/angular-fittext.min.js"></script>
    <script src="3rdparty/js/autofill-event.js"></script>

    <!-- Angular directives for tldjs -->
    <script src="3rdparty/js/tld.js"></script>
    <script src="3rdparty/js/angular-tld.js"></script>

    <!-- Angular directives for bootstrap https://angular-ui.github.io/bootstrap/ -->
    <script src="3rdparty/js/ui-bootstrap-tpls-1.3.3.min.js"></script>

    <script src="3rdparty/js/Chart.js"></script>
    <script src="3rdparty/js/ansi_up.js"></script>
    <script src="3rdparty/js/clipboard.min.js"></script>

    <!-- Showdown (markdown converter) -->
    <script src="3rdparty/js/showdown-1.6.4.min.js"></script>
    <script src="3rdparty/js/showdown-target-blank.min.js"></script>

    <!-- Bootstrap slider -->
    <link rel="stylesheet" type="text/css" href="/3rdparty/bootstrap-slider/bootstrap-slider.min.css"/>
    <script type="text/javascript" src="/3rdparty/bootstrap-slider/bootstrap-slider.min.js"></script>
    <script type="text/javascript" src="/3rdparty/bootstrap-slider/slider.js"></script>

    <!-- Anugular Multiselect -->
    <!-- https://github.com/sebastianha/angular-bootstrap-multiselect -->
    <script src="/3rdparty/js/angular-bootstrap-multiselect.js"></script>

    <!-- colors -->
    <script type="text/javascript" src="3rdparty/js/colors.js"></script>

    <!-- moment -->
    <script type="text/javascript" src="3rdparty/js/moment.min.js"></script>

    <!-- xterm -->
    <link href="3rdparty/xterm/xterm.css" rel="stylesheet">
    <script src="3rdparty/xterm/xterm.js"></script>
    <script src="3rdparty/xterm/addons/attach/attach.js"></script>
    <script src="3rdparty/xterm/addons/fit/fit.js"></script>

    <!-- Main Application -->
    <script src="js/index.js"></script>

</head>

<body>

    <script type="text/ng-template" id="notification.html">
        <div class="ui-notification">
            <h3 ng-show="title" ng-bind-html="title"></h3>
            <div class="message">
                <a href="{{action}}" ng-show="action" ng-bind-html="message"></a>
                <span ng-hide="action" ng-bind-html="message"></span>
            </div>
        </div>
    </script>

    <!-- Modal update -->
    <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="updateModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="updateModalLabel">Really update the Cloudron?</h4>
                </div>
                <div class="modal-body">
                    <div ng-hide="installedApps | readyToUpdate" class="text-danger">
                        <b>
                            The apps below are blocking the update, because they have pending actions:
                            <ul>
                                <li ng-repeat="app in installedApps | inProgressApps">{{app.location}}</li>
                            </ul>
                            Please wait for the app actions to finish.
                        </b>
                        <br/>
                        <br/>
                    </div>

                    <div ng-show="installedApps | readyToUpdate">
                        <b ng-show="config.update.box.upgrade" class="text-danger">
                            This update upgrades the base system and will cause some application downtime.<br/>
                        </b>
                        <p>New version: <b>{{config.update.box.version}}</b></p>
                        <p>Recent Changes:</p>
                        <ul>
                            <li ng-repeat="change in config.update.box.changelog" ng-bind-html="change | markdown2html"></li>
                        </ul>
                        <br/>
                        <p ng-show="update.error.generic" class="text-danger">{{ update.error.generic }}</p>
                        <div ng-hide="config.provider !== 'caas' && config.update.box.upgrade">
                            <fieldset>
                                <form name="update_form" role="form" ng-submit="doUpdate()" autocomplete="off">
                                    <input class="ng-hide" type="submit" ng-disabled="update_form.$invalid || update.busy"/>
                                </form>
                            </fieldset>
                        </div>
                        <div ng-show="config.provider !== 'caas' && config.update.box.upgrade">
                            <b>Please use the CLI tool to upgrade by following the instructions <a ng-href="{{ config.webServerOrigin + '/documentation/updates/' }}" target="_blank" >here</a>.</b>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-danger" ng-click="doUpdate()" ng-disabled="update_form.$invalid || update.busy" ng-show="(installedApps | readyToUpdate) && !(config.provider !== 'caas' && config.update.box.upgrade)"><i class="fa fa-circle-o-notch fa-spin" ng-show="update.busy"></i> Update</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal setup subscription -->
    <div class="modal fade" id="setupSubscriptionModal" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title" id="updateModalLabel">Setup Subscription</h4>
                </div>
                <div class="modal-body">
                    <p ng-show="config.update.box">
                        You can update to the next version once you have selected a <a ng-href="{{ config.webServerOrigin + '/pricing.html' }}" target="_blank">paid plan</a>.
                    </p>
                    <p>
                        With a paid plan, you get continuous updates for the Cloudron and apps. This ensures you are running the latest versions of apps and keeps your server secure. All paid plans come with support via <a href="mailto:support@cloudron.io">email</a> and <a target="_blank" href="https://chat.cloudron.io">live chat</a>.
                    </p>
                </div>
                <div class="modal-footer">
                    <a class="btn btn-success" ng-click="waitForPlanSelection()" ng-href="{{ config.webServerOrigin + '/console.html#/userprofile?view=subscriptions&email=' + appstoreConfig.profile.email + '&cloudronId=' + appstoreConfig.cloudronId }}" target="_blank" ng-disabled="waitingForPlanSelection"><i class="fa fa-circle-o-notch fa-spin" ng-show="waitingForPlanSelection"></i> Setup Subscription</a>
                </div>
            </div>
        </div>
    </div>

    <div class="animateMe ng-hide layout-root" ng-show="initialized">

        <!-- Navigation -->
        <nav class="navbar navbar-default navbar-static-top shadow" role="navigation" style="margin-bottom: 0">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand navbar-brand-icon" href="#/"><img ng-src="{{ client.avatar }}" width="40" height="40"/></a>
                    <a class="navbar-brand" href="#/">{{ config.cloudronName || 'Cloudron' }}</a>
                </div>
                <!-- /.navbar-header -->

                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav navbar-right" ng-hide="hideNavBarActions">
                        <li ng-show="config.update.box && user.admin">
                            <a ng-href="" ng-click="showUpdateModal(update_form)" style="cursor: pointer">
                                <span class="badge badge-success">Update available</span>
                            </a>
                        </li>
                        <li ng-show="appstoreConfig && !config.update.box && user.admin && (currentSubscription.plan.id === 'undecided' || currentSubscription.plan.id === 'free')">
                            <a ng-href="" ng-click="showSubscriptionModal()" style="cursor: pointer">
                                <span class="badge badge-success">Setup Subscription</span>
                            </a>
                        </li>
                        <li>
                            <a ng-class="{ active: isActive('/apps')}" href="#/apps"><i class="fa fa-cloud-download fa-fw"></i> My Apps</a>
                        </li>
                        <li ng-show="user.admin">
                            <a ng-class="{ active: isActive('/appstore')}" href="#/appstore"><i class="fa fa-th-large fa-fw"></i> App Store</a>
                        </li>
                        <li ng-show="user.admin">
                            <a ng-class="{ active: isActive('/users')}" href="#/users"><i class="fa fa-users fa-fw"></i> Users</a>
                        </li>
                        <li class="dropdown">
                            <a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><img ng-src="{{user.gravatar}}" style="margin-top: -4px;"/> {{user.username}} <span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#/account"><i class="fa fa-user fa-fw"></i> Account</a></li>
                                <li ng-show="user.admin"><a href="#/activity"><i class="fa fa-list-alt fa-fw"></i> Activity</a></li>
                                <li ng-show="user.admin"><a href="#/tokens"><i class="fa fa-key fa-fw"></i> API Access</a></li>
                                <li ng-show="user.admin"><a href="#/domains"><i class="fa fa-globe fa-fw"></i> Domains</a></li>
                                <li ng-show="user.admin"><a href="#/email"><i class="fa fa-envelope fa-fw"></i> Email</a></li>
                                <li ng-show="user.admin"><a href="#/graphs"><i class="fa fa-bar-chart fa-fw"></i> Graphs</a></li>
                                <li ng-show="user.admin"><a href="#/settings"><i class="fa fa-wrench fa-fw"></i> Settings</a></li>
                                <li ng-show="user.admin" class="divider"></li>
                                <li ng-show="user.admin"><a href="#/debug"><i class="fa fa-terminal fa-fw"></i> Terminal</a></li>
                                <li ng-show="user.admin"><a href="#/support"><i class="fa fa-comment fa-fw"></i> Support</a></li>
                                <li class="divider"></li>
                                <li><a href="" ng-click="logout($event)"><i class="fa fa-sign-out fa-fw"></i> Logout</a></li>
                            </ul>
                        </li>
                    </ul>

                </div>
            </div>
        </nav>

        <div ng-view id="ng-view" class="layout-content"></div>

        <footer class="text-center ng-cloak">
            <span class="text-muted">&copy; 2018 <a href="https://cloudron.io" target="_blank">Cloudron</a></span>
            <span class="text-muted"> v{{config.version}}</span>
            <span class="text-muted"><a href="https://twitter.com/cloudron_io" target="_blank">Twitter <i class="fa fa-twitter"></i></a></span>
            <span class="text-muted"><a href="https://chat.cloudron.io" target="_blank">Chat <i class="fa fa-comments"></i></a></span>
        </footer>
    </div>

</body>
</html>
