<div class="content-fullpage">
  <c8y-device-grid
    [title]="'Select devices for bulk operation'"
    [columns]="columnsInput"
    [actionControls]="[]"
    (onColumnsChange)="setColumnsOutput($event)"
    (onDeviceQueryStringChange)="deviceQueryStringOutput = $event"
  ></c8y-device-grid>
</div>

<div class="row">
  <div class="col-sm-6">
    <div class="card ">
      <div class="card-header separator">
        <h4 class="card-title">Input</h4>
      </div>
      <div class="card-block">
        <div class="c8y-select-wrapper">
          <select
            class="form-control"
            [ngModel]="selectedExample"
            (ngModelChange)="onExampleSelect($event)"
          >
            <option *ngFor="let example of examples" [ngValue]="example">{{
              example.label
            }}</option></select
          ><span></span>
        </div>
        <pre
          >{{ columnsInput | json }}
        </pre>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="card">
      <div class="card-header">
        <span>
          <h4 class="card-title">Output</h4>
        </span>
      </div>
      <div class="card-block">
        <pre
          >{{ deviceQueryStringOutput | json }}
        </pre>
        <pre
          >{{ columnsOutput | json }}
        </pre>
      </div>
    </div>
  </div>
</div>