<div [hidden]="!isVisible()" class="card mainpanel">
  <hs-panel-header name="adjuster" [title]="'ADJUSTER.adjustFactors' | translate"></hs-panel-header>
  <div class="card-body">
    <div class="p-2 center-block">
      <div class="d-flex flex-row">
        <div>
          <button type="button" class="btn btn-primary btn-lg" (click)="adjusterService.apply()"
            [disabled]="adjusterService.isInProcess() || noDataSelected() || noOperationSelected() ">{{'ADJUSTER.calculate' | translate}}</button>
        </div>
        <div>
          <button type="button" class="btn btn-sm btn-light hs-lm-item-visibility"
            [ngClass]="adjusterService.allowIndex ? 'hs-checkmark' : 'hs-uncheckmark'"
            (click)="adjusterService.allowIndex = !adjusterService.allowIndex; $event.stopPropagation()"></button>
          <label class="pl-2 text-secondary">{{'ADJUSTER.index' | translate}}</label>
        </div>
        <div>
          <button type="button" class="btn btn-sm btn-light hs-lm-item-visibility"
            [ngClass]="adjusterService.allowClusters ? 'hs-checkmark' : 'hs-uncheckmark'"
            (click)="adjusterService.allowClusters = !adjusterService.allowClusters; $event.stopPropagation()"></button>
            <label class="pl-2 text-secondary">{{'ADJUSTER.clusters' | translate}}</label>
        </div>
      </div>
      <div class="text-warning pt-2" [hidden]="!noDataSelected() || errorMsg">{{'ADJUSTER.noDataSelectedMsg' | translate}}</div>
      <div class="text-danger pt-2" [hidden]="!errorMsg">{{'ADJUSTER.serverError' | translate}}: {{errorMsg}}</div>
    </div>
    <div class="p-2 center-block" [hidden]="!adjusterService.allowClusters">
      <div class="pt-2 text-secondary">{{'ADJUSTER.numberOfClusters' | translate}}: {{adjusterService.numberOfClusters}}</div>
      <input type="range" class="custom-range" [(ngModel)]="adjusterService.numberOfClusters" min="5" max="15" step="1">
    </div>
    <div *ngFor="let factor of adjusterService.factors; let datasetlistVisible = false">
      <pra-dataset-list [factor]="factor"></pra-dataset-list>
    </div>
    <hr>
    <div class="pt-3 center-block" [hidden]="!adjusterService.clustersLoaded()">
      {{'ADJUSTER.layerManagerLink1' | translate}}<br>
      {{'ADJUSTER.layerManagerLink2' | translate}} <a href="" (click)="hsLayoutService.setMainPanel('layermanager');$event.preventDefault();">{{'ADJUSTER.layerManagerLinkLMName' | translate}}</a>
    </div>
  </div>
</div>
