<!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" />

    <!-- 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" type="image/png" rel="icon" href="/api/v1/cloudron/avatar">
    <link rel="apple-touch-icon" href="/api/v1/cloudron/avatar">
    <link rel="icon" href="/api/v1/cloudron/avatar">

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

    <!-- Custom Fonts -->
    <link type="text/css" rel="stylesheet" href="/3rdparty/fontawesome/css/all.min.css?<%= revision %>">

    <!-- jQuery-->
    <script type="text/javascript" src="/3rdparty/js/jquery.min.js?<%= revision %>"></script>

    <!-- toBlob() polyfill-->
    <script type="text/javascript" src="/3rdparty/js/canvas-to-blob.min.js?<%= revision %>"></script>

    <!-- Bootstrap Core JavaScript -->
    <script type="text/javascript" src="/3rdparty/js/bootstrap.min.js?<%= revision %>"></script>

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

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

    <!-- Angular directives for tldjs -->
    <script type="text/javascript" src="/3rdparty/js/tld.js?<%= revision %>"></script>
    <script type="text/javascript" src="/3rdparty/js/angular-tld.js?<%= revision %>"></script>

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

    <script type="text/javascript" src="/3rdparty/js/Chart.min.js?<%= revision %>"></script>
    <script type="text/javascript" src="/3rdparty/js/ansi_up.js?<%= revision %>"></script>
    <script type="text/javascript" src="/3rdparty/js/clipboard.min.js?<%= revision %>"></script>

    <!-- Showdown (markdown converter) -->
    <script type="text/javascript" src="/3rdparty/js/showdown-1.6.4.min.js?<%= revision %>"></script>
    <script type="text/javascript" src="/3rdparty/js/showdown-target-blank.min.js?<%= revision %>"></script>

    <!-- Bootstrap slider -->
    <script type="text/javascript" src="/3rdparty/bootstrap-slider/bootstrap-slider.min.js?<%= revision %>"></script>
    <script type="text/javascript" src="/3rdparty/bootstrap-slider/slider.js?<%= revision %>"></script>

    <!-- Anugular Multiselect https://github.com/sebastianha/angular-bootstrap-multiselect -->
    <script type="text/javascript" src="/3rdparty/js/angular-bootstrap-multiselect.js?<%= revision %>"></script>

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

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

    <!-- Main Application -->
    <script type="text/javascript" src="/js/index.js?<%= revision %>"></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>

    <a class="offline-banner animateMe" ng-show="client.offline" ng-cloak href="https://cloudron.io/documentation/troubleshooting/" target="_blank"><i class="fa fa-circle-notch fa-spin"></i> Cloudron is offline. Reconnecting...</a>

    <!-- 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">Setup Subscription</h4>
          </div>
          <div class="modal-body">
            <iframe ng-show="subscription.plan.id === 'free'" ng-src="{{ config.webServerOrigin + '/helper/setup_subscription_info.html?email=' + subscription.emailEncoded + '&cloudronId=' + subscription.cloudronId }}" style="width: 100%; height: 100px; border: none;"></iframe>
            <iframe ng-show="subscription.plan.id === 'expired'" ng-src="{{ config.webServerOrigin + '/helper/subscription_expired.html?email=' + subscription.emailEncoded + '&cloudronId=' + subscription.cloudronId }}" style="width: 100%; height: 100px; border: none;"></iframe>
          </div>
          <div class="modal-footer">
          </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="subscription.plan.id === 'free'">
                          <a ng-href="" ng-click="showSubscriptionModal()" style="cursor: pointer">
                            <span class="badge badge-success">Setup Subscription</span>
                          </a>
                        </li>
                        <li ng-show="subscription.plan.id === 'expired'">
                          <a ng-href="" ng-click="showSubscriptionModal()" style="cursor: pointer">
                            <span class="badge badge-danger">Subscription expired</span>
                          </a>
                        </li>
                        <li>
                            <a ng-class="{ active: isActive('/apps')}" href="#/apps"><i class="fa fa-cloud-download-alt 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 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.avatarUrl}}" style="width: 24px; height: 24px;"/> {{user.username}} <span class="badge badge-danger" ng-show="notifications.length">{{ notifications.length }}</span> <span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#/profile"><i class="fa fa-user fa-fw"></i> Profile</a></li>
                                <li ng-show="user.admin" class="divider"></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="#/backups"><i class="fa fa-archive fa-fw"></i> Backups</a></li>
                                <li ng-show="user.admin"><a href="#/domains"><i class="fa fa-globe fa-fw"></i> Domains & Certs</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="#/activity"><i class="fa fa-list-alt fa-fw"></i> Event Log</a></li>
                                <li ng-show="user.admin"><a href="#/graphs"><i class="fa fa-chart-bar fa-fw"></i> Graphs</a></li>
                                <li ng-show="user.admin"><a href="#/network"><i class="fas fa-network-wired fa-fw"></i> Network</a></li>
                                <li><a href="#/notifications"><i class="fa fa-bell fa-fw"></i> Notifications <span class="badge badge-danger" ng-show="notifications.length">{{ notifications.length }}</span></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="#/support"><i class="fa fa-comment fa-fw"></i> Support</a></li>
                                <li ng-show="user.admin"><a href="#/system"><i class="fa fa-cogs fa-fw"></i> System</a></li>
                                <li class="divider"></li>
                                <li><a href="" ng-click="logout($event)"><i class="fa fa-sign-out-alt 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" ng-bind-html="config.uiSpec.footer.body | markdown2html"></span>
          <span class="version">v{{config.version}}</span>
        </footer>
    </div>

</body>
</html>
