<div class="main-container">
  <as-split direction="horizontal">
    <as-split-area [size]="10">
      <div class="channel_header">
        Tracks
      </div>
      <div class="content">
        <button (click)="setSelection()">Set</button>
        <div class="list">
          <div class="list-element" *ngFor="let index of allChannels">
            <label class="container">{{ names[index] }}
              <input type="checkbox" [checked]="isInSelection(index)" (click)="changeSelection(index)">
              <span class="checkmark" [ngStyle]="isInSelection(index) && {'background-color': getColor(index)} || {}"></span>
            </label>
          </div>
        </div>
      </div>
    </as-split-area>
    <as-split-area [size]="90" [style]="{'overflow-y': 'hidden'}">
      <div class="channel_header">
        Dataset overview
      </div>
      <div class="toolbar">
        <label class="parameter" for="min">Start</label><br>
        <input type="number" class="parameter" id="min" [(ngModel)]="minx">

        <label class="parameter" for="max">End</label><br>
        <input type="number" class="parameter" [(ngModel)]="maxx" id="max">

        <label class="parameter" for="w">Length</label><br>
        <input type="number" class="parameter" [(ngModel)]="windowsize" id="w">

        <label class="parameter" for="length-scaling">x scaling</label><br>
        <input type="checkbox" class="parameter" [(ngModel)]="hasHorizontalScaling" id="length-scaling">

        <label class="parameter" for="relWidth-min">Min</label><br>
        <input type="number" class="parameter" [(ngModel)]="relwidthMin" id="relWidth-min" step="0.1" min="0.1" max="1" [disabled]="!hasHorizontalScaling">

        <label class="parameter" for="relWidth-min">Max</label><br>
        <input type="number" class="parameter" [(ngModel)]="relwidthMax" id="relWidth-max" step="1" min="1" [disabled]="!hasHorizontalScaling">

        <label class="parameter" for="resolution">Resolution</label><br>
        <input type="number" class="parameter" [(ngModel)]="resolution" id="resolution" step="1" min="3" [disabled]="!hasHorizontalScaling">

        <button (click)="setquery()">
          Set as query
        </button>
      </div>
      <div class="overview" id="overview" (wheel)="scroll($event)">
<!--        <zingchart-angular #chart [id]="id" (wheel)="scroll($event)" [height]="height"></zingchart-angular>-->
      </div>
    </as-split-area>
  </as-split>
</div>