<div class=“container”>

<div class="container robot">
  <div class="row-fluid">
    <div class="col-md-2">
      <section class="robot-type display">
        {{robot.type || "Robot"}}
      </section>
    </div>

    <div class="col-md-10">
      <b>
        <span class="name">{{robot.name}}</span>
        <dl class="controls">
          <dt><i class="fa fa-fighter-jet"></i> devices: </dt>
          <dd>{{robot.connections.length}}</dd>

          <dt><i class="fa fa-exchange"></i> connections: </dt>
          <dd>{{robot.connections.length}}</dd>
        </dl>
      </b>
    </div>
  </div>
</div>

<div class="container device details" ng-show='deviceDetail'>
  <div class="row-fluid">
    <div class="col-md-2">
      <b>
        <span class="name">{{deviceDetail.name}}</span>
      </b>
    </div>

    <div class="col-md-5 pull-right">
      <b>
        <dl class="controls">
          <span ng-show='deviceDetail.pin'>
            <dt><i class="fa fa-fighter-jet"></i> </dt>
            <dd>{{ deviceDetail.pin }}</dd>
          </span>

          <span ng-show='deviceDetail.driver'>
            <dt><i class="fa fa-hdd"></i></dt>
            <dd>{{ deviceDetail.driver }}</dd>
          </span>

          <span ng-show='deviceDetail.adaptor'>
            <dt><i class="fa fa-resize-horizontal"></i></dt>
            <dd>{{ deviceDetail.adaptor }}</dd>
          </span>

          <span ng-show='deviceDetail.connection'>
            <dt><i class="fa fa-circle" ng-class="isConnected(deviceDetail.connection)"></i> </dt>
            <dd ng-show="deviceDetail.connection.name">{{deviceDetail.connection.name}}</dd>
          </span>
        </dl>
      </b>
    </div>
  </div>

  <div class="row-fluid device-command">
    <div class="col-md-4 command-select">
      <span>Command:</span>
      <select ng-model="command" ng-options="cmd for cmd in deviceDetail.commands" required class="form-control"></select>
    </div>

    <div class="col-md-6 command-inputs">
      <div class="param-input" ng-class="{'last': $last}" ng-repeat="param in params">
        <input type="text" value="{{param.name}}" ng-model="param.name" placeholder="name">
        <input type="text" value="{{param.value}}" ng-model="param.value" placeholder="value">
        <select class="form-control" ng-model="param.type" ng-options="type for type in paramTypes"></select>
        <span class="pull-right param-remove" ng-hide="$last" ng-click="removeParam($index)"></span>
      </div>

      <button class="btn btn-sm btn-default" ng-click="addParam()">Add Param</button>
    </div>

    <div class="col-md-1 pull-right command-submit">
      <button ng-disabled="executeDisabled()" ng-click="executeCommand()" class="pull-right btn btn-primary">Submit</button>
    </div>

  </div>

  <div class="row-fluid content">
    <div class="console">
      <code></code>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-6">
    <div class="device" ng-repeat="device in robot.devices" ng-click="getDeviceDetail(device.name)">
      <div class="row-fluid">
        <div class="col-md-2">
          <div class="device-type display">
            D
          </div>
        </div>
        <div class="col-md-10">
          <b>
            <span class="name">{{device.name}}</span>
            <dl class="controls">
              <span ng-show="device.pin">
                <dt><i class="fa fa-bolt"></i> pin: </dt>
                <dd>{{device.pin}}</dd>
              </span>

              <dt><i class="fa fa-exchange"></i> </dt>
              <dd>{{device.connection.name}}</dd>
            </dl>
          </b>
        </div>
      </div>
    </div>
  </div>

  <div class="col-md-6">
    <div class="device" ng-repeat="connection in robot.connections">
      <div class="row-fluid">
        <div class="col-md-2">
          <div class="device-type display">
            <i class="fa fa-exchange"></i>
          </div>
        </div>

        <div class="col-md-10">
          <b>
            <span class="name">{{connection.name}}</span>
            <dl class="controls">
              <dt><i class="fa fa-circle" ng-class="isConnected(connection)"></i> </dt>
              <dd ng-show="connection.port">{{connection.port}}</dd>
            </dl>
          </b>
        </div>
      </div>
    </div>
  </div>
</div>

</div>