<!DOCTYPE html>
<html ng-app="Application" ng-controller="TerminalController">
<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" />

  <title> Terminal </title>

  <link id="favicon" href="/api/v1/cloudron/avatar" rel="icon" type="image/png">
  <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/angular-ui-notification.css?<%= revision %>"/>
  <link type="text/css" rel="stylesheet" href="/theme.css?<%= revision %>">

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

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

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

  <!-- Bootstrap Core JavaScript -->
  <script type="text/javascript" src="/3rdparty/js/bootstrap.min.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-cookies.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-ui-notification.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>

  <!-- Angular translate https://angular-translate.github.io/ -->
  <script type="text/javascript" src="/3rdparty/js/angular-translate.min.js?<%= revision %>"></script>
  <script type="text/javascript" src="/3rdparty/js/angular-translate-loader-static-files.min.js?<%= revision %>"></script>
  <script type="text/javascript" src="/3rdparty/js/angular-translate-storage-cookie.min.js?<%= revision %>"></script>
  <script type="text/javascript" src="/3rdparty/js/angular-translate-storage-local.min.js?<%= revision %>"></script>

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

  <!-- xterm -->
  <link type="text/css" rel="stylesheet" href="/3rdparty/xterm/css/xterm.css?<%= revision %>" />
  <script src="/3rdparty/xterm/lib/xterm.js?<%= revision %>"></script>
  <script src="/3rdparty/xterm-addon-attach/lib/xterm-addon-attach.js?<%= revision %>"></script>
  <script src="/3rdparty/xterm-addon-fit/lib/xterm-addon-fit.js?<%= revision %>"></script>

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

  <!-- Main Application -->
  <script type="text/javascript" src="/js/terminal.js?<%= revision %>"></script>

</head>

<body style="overflow: hidden;">

  <!-- Modal download file -->
  <div class="modal fade" id="downloadFileModal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">{{ 'terminal.download.title' | tr:{ name: selected.name } }}</h4>
        </div>
        <div class="modal-body">
          <form name="downloadFileForm" ng-submit="downloadFile.submit()">
            <div class="form-group" ng-class="{ 'has-error': downloadFileForm.filePath.$dirty && downloadFile.error }">
              <label class="control-label" for="inputDownloadFilePath">{{ 'terminal.download.filePath' | tr }}</label>
              <div class="control-label" ng-show="{ 'has-error': downloadFileForm.filePath.$dirty && downloadFile.error }">
                <small>{{ downloadFile.error }}</small>
              </div>
              <input type="text" class="form-control" name="filePath" ng-model="downloadFile.filePath" required autofocus>
            </div>
            <input id="inputDownloadFilePath" class="ng-hide" type="submit" ng-disabled="!downloadFile.filePath"/>
          </form>
        </div>
        <div class="modal-footer">
          <a id="fileDownloadLink" class="" ng-href="{{ downloadFile.downloadUrl() }}" target="_blank"></a>

          <button type="button" class="btn btn-default" data-dismiss="modal">{{ 'main.dialog.cancel' | tr }}</button>
          <button type="button" class="btn btn-success" ng-click="downloadFile.submit()" ng-disabled="!downloadFile.filePath"><i class="fa fa-circle-notch fa-spin" ng-show="downloadFile.busy"></i> {{ 'terminal.download.download' | tr }}</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Modal upload progress -->
  <div class="modal fade" id="uploadProgressModal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">{{ 'terminal.upload.title' | tr:{ name: selected.name } }}</h4>
        </div>
        <div class="modal-body">
          <span><b>{{ uploadProgress.current | prettyByteSize }}</b> (total {{ uploadProgress.total | prettyByteSize }})</span>
          <div class="progress progress-striped active">
            <div class="progress-bar progress-bar-success" role="progressbar" style="width: {{ 100*(uploadProgress.current/uploadProgress.total) }}%"></div>
          </div>
        </div>
        <div class="modal-footer"></div>
      </div>
    </div>
  </div>

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

    <div class="terminal-controls">
      <h3 style="display: inline-block;">{{ selected.name }}</h3>

      <input type="file" id="fileUpload" class="hide"/>

      <div class="pull-right">
        <div class="btn-group" ng-show="usesAddon('scheduler')">
          <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" ng-disabled="appBusy">
            {{ 'terminal.scheduler' | tr }} <span class="caret"></span>
          </button>
          <ul class="dropdown-menu">
            <li ng-repeat="task in schedulerTasks"><a href="" ng-click="terminalInject('scheduler', task)">{{ task.name }}</a></li>
          </ul>
        </div>

        <!-- addon actions -->
        <button class="btn btn-success" ng-click="terminalInject('mysql')" ng-show="usesAddon('mysql')" ng-disabled="appBusy">MySQL</button>
        <button class="btn btn-success" ng-click="terminalInject('postgresql')" ng-show="usesAddon('postgresql')" ng-disabled="appBusy">Postgres</button>
        <button class="btn btn-success" ng-click="terminalInject('mongodb')" ng-show="usesAddon('mongodb')" ng-disabled="appBusy">MongoDB</button>
        <button class="btn btn-success" ng-click="terminalInject('redis')" ng-show="usesAddon('redis')" ng-disabled="appBusy">Redis</button>

        <!-- terminal actions -->
        <button class="btn btn-primary" ng-click="restartApp()" ng-show="selected.type === 'app'" ng-disabled="appBusy"><i class="fa fa-sync-alt" ng-class="{ 'fa-spin': restartAppBusy }"></i> {{ 'terminal.restart' | tr }}</button>
        <button class="btn btn-primary" ng-click="uploadFile()" ng-show="selected.type === 'app' && !uploadProgress.busy" ng-disabled="appBusy"><i class="fa fa-upload"></i> {{ 'terminal.uploadToTmp' | tr }}</button>
        <button class="btn btn-primary" ng-click="uploadProgress.show()" ng-show="uploadProgress.busy" ng-disabled="appBusy"><i class="fa fa-circle-notch fa-spin"></i> {{ 'terminal.uploading' | tr }}</button>
        <button class="btn btn-primary" ng-click="downloadFile.show()" ng-show="selected.type === 'app'" ng-disabled="appBusy"><i class="fa fa-download"></i> {{ 'terminal.downloadAction' | tr }}</button>
      </div>
    </div>

    <div class="terminal-container" id="terminalContainer" ng-hide="appBusy"></div>
    <div class="terminal-container placeholder" ng-show="appBusy">
      <h4>&nbsp;
        <span ng-show="restartAppBusy">{{ 'terminal.busy.restarting' | tr }}</span>
        <span ng-show="selectedAppInfo.installationState === 'pending_debug' && selectedAppInfo.debugMode">{{ 'terminal.busy.restartingInPausedMode' | tr }}</span>
        <span ng-show="selectedAppInfo.installationState === 'pending_debug' && !selectedAppInfo.debugMode ">{{ 'terminal.busy.resuming' | tr }}</span>
        <span ng-show="selectedAppInfo.installationState === 'pending_installed'">{{ 'terminal.busy.installing' | tr }}</span>
      </h4>

      <div class="progress" ng-show="appBusy" style="width: 80%">
        <div class="progress-bar progress-bar-striped active" role="progressbar" style="width: 100%"></div>
      </div>
    </div>

    <div class="contextMenuBackdrop">
      <ul class="dropdown-menu" id="terminalContextMenu" style="position: absolute; display:none;">
        <li><a href="" ng-click="terminalCopy()">{{ 'terminal.contextmenu.copy' | tr }}</a></li>
        <li class="disabled"><a>{{ 'terminal.contextmenu.pasteInfo' | tr }}</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="" ng-click="terminalClear()">{{ 'terminal.contextmenu.clear' | tr }}</a></li>
      </ul>
    </div>

  </div>

</body>
</html>
