<div ng-controller="RekallRunPluginController" class="runplugin">
  <div ng-if="node.state == 'edit'" on-alt-enter="renderNode(node)">

    <div class="row-fluid">
      <button type="button" class="close"
              tooltip="Cancel Cell Edit"
              ng-click="cancelEdit()">
        <span aria-hidden="true">&times;</span>
        <span class="sr-only">Close</span>
      </button>
      <div class="col-sm-6">
        <div class="row-fluid">
          <div class="col-sm-6 plugin-title">
            <button type="button" class="btn btn-success"
                    ng-click="renderNode()">
              <span class="glyphicon glyphicon-ok"></span>
            </button>

            <label>Plugin:</label>
          </div>
          <div class="input-group input-group-sm col-sm-6">
            <input class="form-control" type="text"
                   focus-on="pluginFocus"
                   ng-model="search.pluginName" />
            <span class="input-group-addon">
              <span class="glyphicon glyphicon-search" />
            </span>
          </div>
        </div>

        <div class="panel panel-default panel-plugin-selection"
             scroll-to=".scroll-anchor">
          <table class="table table-condensed table-hover">
            <tbody>
              <tr ng-repeat="plugin in selected_plugins | orderBy:'plugin'"
                  ng-click="node.source.plugin = plugin"
                  ng-class="node.source.plugin === plugin && 'info scroll-anchor cursor-pointer'">
                <td>
                  {{plugin.name}}<br/>
                  <span class="plugin-1line-description">{{plugin.short_description}}</span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="panel panel-default" ng-if="node.source.plugin != null">
          <div class="panel-heading">
            <h3 class="panel-title">Description</h3>
          </div>
          <div class="panel-body panel-plugin-description">
            <p class="pre-line-whitespace">
              {{node.source.plugin.description}}
            </p>
          </div>
        </div>

      </div>

      <div class="col-sm-6">
        <div class="panel panel-default" ng-if="node.source.plugin != null">
          <div class="panel-heading">
            <h3 class="panel-title">{{node.source.plugin.name}} arguments</h3>
          </div>
          <div class="panel-body">
            <div class="row-fluid" ng-if="requiredArguments">
              <h5 class=""><span class="glyphicon glyphicon-link"></span> Required arguments</h5>
              <rekall-plugin-arguments arguments="requiredArguments"
                                       filled-arguments="node.source.arguments" />
            </div>

            <div class="row-fluid" ng-if="optionalArguments">
              <h5 class=""><span class="glyphicon glyphicon-link"></span> Optional arguments</h5>
              <rekall-plugin-arguments arguments="optionalArguments"
                                       filled-arguments="node.source.arguments" />
            </div>
          </div>
        </div>

      </div>
    </div>

    <div class="clearfix"></div>
  </div>

  <div ng-if="node.state != 'edit'" class="panel panel-default" bindonce>
    <div class="plugin-description panel-heading">
      <div tooltip="{{node.source.plugin.short_description}}" class="panel-title">
        <div class="btn-group">
          <button type="button" class="btn btn-default"
                  tooltip="Expand or Collapse Cell" tooltip-append-to-body
                  ng-click="minimizeToggle($event)">
            <span class="glyphicon glyphicon-resize-full"></span>
          </button>

          <button type="button" class="btn btn-default"
                  ng-hide="node.state=='edit'"
                  tooltip="Edit plugin" tooltip-append-to-body
                  ng-click="editNode(node)">
            <span class="glyphicon glyphicon-edit"></span>
          </button>

          <button type="button" class="btn btn-success"
                  ng-hide="node.state!='edit'"
                  tooltip="Submit" tooltip-append-to-body
                  ng-click="renderNode()">
            <span class="glyphicon glyphicon-ok"></span>
          </button>

          <button type="button" class="btn btn-default"
                  tooltip="Recalculate" tooltip-append-to-body
                  ng-click="recalculate()">
            <span class="glyphicon glyphicon-repeat"></span>
          </button>

          <a target="_self" class="btn btn-default"
             ng-if="node.plugin_state.filenames"
             tooltip="Download all files" tooltip-append-to-body
             href="/downloads/{{node.id}}?filename={{node.source.plugin.name}}">
            <span class="glyphicon glyphicon-download"></span>
          </a>
        </div>
        <span>
          {{node.source.plugin.name}}
          <span ng-if="node.source.arguments">
            <span ng-repeat="(key, value) in node.source.arguments">
              <var>{{key}}</var> =<rekall-object object="value" />
            </span>
          </span>
        </span>
      </div>
    </div>

    <div ng-if="node.state == 'show' || node.state == 'render'" class="panel-body">
      <div scroll-to=".scroll-anchor" class="progress progress-striped active scroll-anchor"
           ng-if="node.state == 'render'">
        <div class="progress-bar"  role="progressbar"
             aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
          <span>{{node.plugin_state.progress}}</span>
        </div>
      </div>

      <div ng-if="node.rendered">
        <div class="panel panel-default">
          <div ng-repeat="element in node.rendered" preserve-scope>

            <div ng-if="element.type == 'section'">
              <h3 class="lead" bo-text="element.name" bo-if="element.name"></h3>
            </div>

            <div ng-if="element.type == 'format'">
              <div class="freeFormat">
                <rekall-free-format element="element" />
              </div>
            </div>

            <div ng-if="element.type == 'error'">
              <pre class="bg-danger">{{element.data}}</pre>
            </div>

            <div ng-if="element.type == 'table'">
              <scroll-table collection="element.rows"
                            headers="element.header">
              </scroll-table>
            </div>
          </div>
        </div>

      </div>

      <div ng-if="node.plugin_state.stderr">
        <code-editor language="plaintext" readonly="true"
                     ng-model="node.plugin_state.stderr" split-list></code-editor>
      </div>

      <div ng-if="node.plugin_state.error">
        <code-editor language="python" readonly="true"
                     ng-model="node.plugin_state.error" split-list></code-editor>
      </div>
    </div>
  </div>

</div>
