<div class="container-fluid" style="margin-top: 2vh;">
  <div class="col-md-8">

    <div class="row">
      <div role="group" class="btn-group pull-right">
        <button type="button" class="btn btn-secondary" ng-click="$ctrl.refresh()"><span class="fa fa-refresh"></span></button>
        <button type="button" class="btn btn-secondary" ng-click="$ctrl.unload()" translate>byteman.UNLOAD_BTN_LABEL</button>
      </div>
    </div>

    <div class="row">

      <div class="form-group col-md-6">
        <label for="localRule" class="label label-info" translate>byteman.LOCAL_RULE_LABEL</label>
        <textarea name="localRule" class="form-control" ng-model="$ctrl.ruleText" rows="8"/>
      </div>

      <div role="group" class="btn-group col-md-1">
        <button type="button" class="btn btn-default"
                              ng-click="$ctrl.pull()" ng-disabled="!$ctrl.loadedRule" translate>byteman.PULL_BTN_LABEL</button>
        <button type="button" class="btn btn-default"
                              ng-click="$ctrl.push()" ng-disabled="!$ctrl.ruleText.length" translate>byteman.PUSH_BTN_LABEL</button>
      </div>

      <div class="form-group col-md-5">
        <label for="remoteRule" class="label label-info" translate>byteman.REMOTE_RULE_LABEL</label>
        <textarea name="remoteRule" class="form-control"
                                    translate-attr="{placeholder: 'byteman.NO_RULES_LABEL'}" ng-model="$ctrl.loadedRule" rows="8" readonly/>
      </div>

    </div>

    <div class="row">
      <div role="group" class="btn-group pull-right">
        <button type="button" class="btn btn-secondary" ng-click="$ctrl.generateTemplate()" translate>byteman.GENERATE_RULE_BTN_LABEL</button>
      </div>
    </div>

  </div>
</div>