<page-header
  ng-if="ctrl.state.viewReady"
  title="'Application console'"
  breadcrumbs="[
    { label:'Namespaces', link:'kubernetes.resourcePools' },
    { 
      label:ctrl.application.ResourcePool,
      link: 'kubernetes.resourcePools.resourcePool', 
      linkParams:{ id: ctrl.application.ResourcePool }
    },
    { label:'Applications', link:'kubernetes.applications' },
    { 
      label:ctrl.application.Name,
      link: 'kubernetes.applications.application', 
      linkParams:{ name: ctrl.application.Name, namespace: ctrl.application.ResourcePool }
    },
     'Pods',
     ctrl.podName,
     'Containers',
     ctrl.containerName,
     'Console'
     ]"
  reload="true"
>
</page-header>

<kubernetes-view-loading view-ready="ctrl.state.viewReady"></kubernetes-view-loading>

<div ng-if="ctrl.state.viewReady">
  <div class="row">
    <div class="col-sm-12">
      <rd-widget>
        <rd-widget-body>
          <form class="form-horizontal" autocomplete="off">
            <div class="col-sm-12 form-section-title"> Console </div>
            <!-- Command -->
            <div class="form-group">
              <label for="console_command" class="col-sm-3 col-lg-2 control-label text-left">Command</label>
              <div class="col-sm-8 input-group">
                <span class="input-group-addon">
                  <pr-icon icon="'terminal'" class="mr-1" feather="true"></pr-icon>
                </span>
                <input
                  type="text"
                  class="form-control"
                  placeholder="/bin/bash"
                  ng-model="ctrl.state.command"
                  name="console_command"
                  uib-typeahead="command for command in ctrl.state.availableCommands | filter:$viewValue | limitTo:5"
                  typeahead-min-length="0"
                  auto-focus
                />
              </div>
            </div>
            <!-- !command -->
            <div class="form-group">
              <div class="col-sm-12">
                <button
                  type="button"
                  class="btn btn-primary btn-sm"
                  style="margin: 0"
                  ng-if="!ctrl.state.connected"
                  ng-disabled="!ctrl.state.command || ctrl.state.connected"
                  ng-click="ctrl.connectConsole()"
                  button-spinner="ctrl.state.actionInProgress"
                >
                  <span ng-hide="ctrl.state.actionInProgress">Connect</span>
                  <span ng-show="ctrl.state.actionInProgress">Connection in progress...</span>
                </button>
                <button type="button" class="btn btn-primary btn-sm" style="margin: 0" ng-if="ctrl.state.connected" ng-click="ctrl.disconnect()"> Disconnect </button>
              </div>
            </div>
          </form>
        </rd-widget-body>
      </rd-widget>
    </div>
  </div>

  <div class="row">
    <div class="col-sm-12">
      <div id="terminal-container" class="terminal-container"></div>
    </div>
  </div>
</div>
