<div
  class="panel nb-panel"
  ng-class="{'nb-panel-executed':cell.showOutput,'nb-panel-active':cell.isActive}"
  ng-click="setActive(cell)"
  ng-init="cell.showOutput=cell.showOutput||false">
  <div class="row">
    <div class="col-md-1 col-sm-2 hidden-xs">
      <h5 class="text-right nb-in-label">In [{{$index}}]:</h5>
    </div>
    <div class="col-md-11 col-sm-10">
      <div
        class="ace-cell"
        ui-ace="{
          mode: '{{modeName}}',
          rendererOptions: {
            fontSize: '12pt',
            maxLines: Infinity,
            showGutter: false
          }
        }"
        ng-model="cell.input"></div>
    </div>
    <div
      class="col-md-1 col-sm-2"
      ng-show="cell.showOutput">
      <h5 class="text-right nb-out-label">
        <i
          class="fa fa-spinner fa-spin"
          ng-show="cell.running"></i>
        Out [{{$index}}]:</h5>
    </div>
    <div
      class="col-md-11 col-sm-10"
      ng-show="cell.showOutput">
      <pre class="nb-output" ng-bind="cell.output"></pre>
    </div>
    <div
      class="col-md-12 col-sm-12"
      ng-show="cell.isActive">
      <form class="form-inline pull-right" ng-click="$event.stopPropagation()">
        <div class="btn-group btn-group-sm" role="group">
          <button
            type="button"
            class="btn btn-default"
            tooltip-placement="top"
            tooltip="Run All Cells Above"
            ng-click="runAllCellsAbove(cell)">
            <i class="fa fa-forward"></i>
          </button>
          <button
            type="button"
            class="btn btn-default"
            tooltip-placement="top"
            tooltip="Run Cell"
            ng-disabled="cell.input==''"
            ng-click="cell.showOutput=true;runCell(cell)">
            <i class="fa fa-play"></i>
          </button>
          <div class="btn-group btn-group-sm" dropdown>
            <button type="button" class="btn btn-default dropdown-toggle" dropdown-toggle>
              More
              <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
              <li><a href ng-click="insertCellAbove(cell)">Insert Cell Above</a></li>
              <li><a href ng-click="insertCellBelow(cell)">Insert Cell Below</a></li>
              <li><a href ng-click="deleteCell(cell)">Delete Cell</a></li>
            </ul>
          </div>
        </div>
        <div class="form-group">
          <select
            class="form-control input-sm"
            ng-options="type.id as type.name for type in cellTypes"
            ng-model="cell.type">
          </select>
        </div>
      </form>
    </div>
  </div>
</div>
