<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="ps-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="ps-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>
    <!-- TODO: i18n this-->
    <div class="p-2 center-block">
      My role is:&emsp;
      <select class="form-select" [(ngModel)]="adjusterPresetsService.activeRole" (ngModelChange)="adjusterPresetsService.pickProblem($event)">
        <option *ngFor="let role of adjusterPresetsService.roles" [ngValue]="role">{{role.labels[0]['@value']}}</option>
      </select>
      and I want to solve a problem with:&emsp;
      <select class="form-select" [(ngModel)]="adjusterPresetsService.activeProblem">
        <option *ngFor="let problem of adjusterPresetsService.getActiveRoleProblems()" [ngValue]="problem">{{problem.labels[0]['@value']}}</option>
      </select>
    </div>
    <div class="p-2 center-block">
      Classify factors by schema:&emsp;
      <select class="form-select" [(ngModel)]="adjusterPresetsService.activeSchema" (ngModelChange)="adjusterPresetsService.changeSchema($event)">
        <option *ngFor="let schema of adjusterPresetsService.schemas" [ngValue]="schema">{{schema.labels[0]['@value']}}</option>
      </select>
    </div>
    <!-- TODO: end-->
    <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="form-range" [(ngModel)]="adjusterService.numberOfClusters" min="5" max="15" step="1">
    </div>
    <div *ngFor="let factor of adjusterService.factors">
      <pra-dataset-list [factor]="factor" *ngIf="hasDatasets(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>
