<rd-header>
  <rd-header-title title-text="Container console"></rd-header-title>
  <rd-header-content>
    <a ui-sref="docker.containers">Containers</a> &gt; <a ui-sref="docker.containers.container({id: container.Id})">{{ container.Name | trimcontainername }}</a> &gt; Console
  </rd-header-content>
</rd-header>

<div class="row" ng-init="initView()" ng-show="loaded">
  <div class="col-lg-12 col-md-12 col-xs-12">
    <rd-widget>
      <rd-widget-header icon="fa-terminal" title-text="Execute"></rd-widget-header>
      <rd-widget-body>
        <form class="form-horizontal">
          <div ng-if="state === states.disconnected">
            <!-- command-list -->
            <div class="form-group">
              <label for="command" class="col-lg-1 text-left col-sm-2 control-label">Command</label>
              <div class="col-lg-11 col-sm-10">
                <div class="input-group" ng-if="!formValues.isCustomCommand">
                  <span class="input-group-addon">
                    <i class="fab fa-linux" aria-hidden="true" ng-if="imageOS == 'linux'"></i>
                    <i class="fab fa-windows" aria-hidden="true" ng-if="imageOS == 'windows'"></i>
                  </span>
                  <select class="form-control" ng-model="formValues.command" id="command">
                    <option value="ash" ng-if="imageOS == 'linux'">/bin/ash</option>
                    <option value="bash" ng-if="imageOS == 'linux'">/bin/bash</option>
                    <option value="sh" ng-if="imageOS == 'linux'">/bin/sh</option>
                    <option value="powershell" ng-if="imageOS == 'windows'">powershell</option>
                    <option value="cmd.exe" ng-if="imageOS == 'windows'">cmd.exe</option>
                    <option ng-repeat="command in containerCommands" value="{{ command.command }}">{{ command.title }}: {{ command.command }}</option>
                  </select>
                </div>
                <input class="form-control" ng-if="formValues.isCustomCommand" type="text" name="custom-command" ng-model="formValues.customCommand" placeholder="e.g. ps aux" />
              </div>
            </div>
            <!-- !command-list -->
            <div class="form-group col-lg-12">
              <label for="command" class="text-left control-label">Use custom command</label>
              <label class="switch" style="margin-left: 20px;"> <input type="checkbox" ng-model="formValues.isCustomCommand" /><i></i> </label>
            </div>
            <div class="form-group">
              <label for="username" class="col-lg-1 text-left col-sm-2 control-label">
                User
                <portainer-tooltip position="bottom" message="Format is one of: user, user:group, uid or uid:gid"></portainer-tooltip>
              </label>
              <div class="col-lg-11 col-sm-10">
                <input class="form-control" type="text" name="username" ng-model="formValues.user" placeholder="root" />
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-12">
                <button type="button" class="btn btn-primary" ng-disabled="!container.State.Running" ng-click="connectExec()">
                  <span>Connect</span>
                </button>
                <span class="small text-danger" ng-hide="container.State.Running">
                  <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
                  The container is not running.
                </span>
              </div>
            </div>
          </div>
          <div ng-if="state !== states.disconnected">
            <label
              >Exec into container as <code>{{ ::formValues.user || 'default user' }}</code> using command
              <code>{{ formValues.isCustomCommand ? formValues.customCommand : formValues.command }}</code></label
            >
            <button type="button" class="btn btn-primary" ng-click="disconnect()">
              <span ng-show="state === states.connected">Disconnect</span>
              <span ng-show="state === states.connecting">Connecting...</span>
            </button>
          </div>
        </form>
      </rd-widget-body>
    </rd-widget>
  </div>
</div>

<div class="row">
  <div class="col-lg-12 col-md-12 col-xs-12">
    <div id="terminal-container" class="terminal-container"></div>
  </div>
</div>
