<h2>Prediction</h2>

<rb-tab-panel (tabChanged)="groupChange($event)">
  <ng-container *ngFor="let group of d.arr.modelGroups; index as i">
    <div *rbTabPanelItem="group.group; id: i"></div>
  </ng-container>
</rb-tab-panel>

<rb-form-select label="Model" (change)="result = undefined" [(ngModel)]="activeModelIndex">
  <option *ngFor="let model of activeGroup.models; index as i" [value]="i">{{model.name}}</option>
</rb-form-select>

<div *ngIf="result" class="result" [@inOut]>
  <ng-container *ngIf="multipleSamples; else singleSampleResult">
    <h4 *ngFor="let prediction of result.predictions; index as i">
      {{spectrumNames[i]}}: {{prediction}}&nbsp;{{activeGroup.models[activeModelIndex].label}}
      <a [routerLink]='"."' fragment="disclaimer"><sup>#</sup></a>
    </h4>
  </ng-container>
  <ng-template #singleSampleResult>
    <h4>
      Average result: {{result.meanPrediction}}&nbsp;{{activeGroup.models[activeModelIndex].label}}
      <a [routerLink]='"."' fragment="disclaimer"><sup>#</sup></a>,
      standard deviation: {{result.std}}<a [routerLink]='"."' fragment="disclaimer"><sup>#</sup></a>
    </h4>
    <a href="javascript:" class="rb-details-toggle" rbDetailsToggle #triggerDetails="rbDetailsToggle">Details</a>
    <div *ngIf="triggerDetails.open" class="space-below">
      <p *ngFor="let prediction of result.predictions; index as i">
        {{spectrumNames[i]}}: {{prediction}}&nbsp;{{activeGroup.models[activeModelIndex].label}}
        <a [routerLink]='"."' fragment="disclaimer"><sup>#</sup></a>
      </p>
    </div>
  </ng-template>
</div>

<div class="file-input space-below">
  <rb-form-file name="spectrum-upload" label="spectrum file" maxSize="10000000" class="space-below" multiple
                (ngModelChange)="fileToArray($event)" placeholder="Select file or drag and drop" dragDrop ngModel>
  </rb-form-file>

  <rb-loading-spinner *ngIf="loading; else predictButton"></rb-loading-spinner>
  <ng-template #predictButton>
    <rb-icon-button icon="forward-right" mode="primary" *ngIf="spectrumNames.length; else placeholder"
                    (click)="loadPrediction()">
      Predict
    </rb-icon-button>
    <ng-template #placeholder><div></div></ng-template>
  </ng-template>

  <div>
    Prediction of:
    <rb-form-radio name="multiple-samples" label="Single sample" [(ngModel)]="multipleSamples" [value]="false">
    </rb-form-radio>
    <rb-form-radio name="multiple-samples" label="Multiple samples" [(ngModel)]="multipleSamples" [value]="true">
    </rb-form-radio>
  </div>
</div>

<div class="dpt-chart space-below">
  <canvas baseChart
          class="dpt-chart"
          [datasets]="chart"
          [labels]="[]"
          [options]="chartOptions"
          [legend]="false"
          chartType="scatter">
  </canvas>
</div>

<div class="shaded-container" id="disclaimer">
  <h4><sup>#</sup>Disclaimer: This tool is still under development</h4>
  <p>
    The prediction and classification of material parameters are validated only for certain conditions.
    These results may therefore under no circumstances be used to evaluate quality-relevant issues. <br>
    For more details please contact <a [href]="'mailto:' + d.contact.mail">{{d.contact.name}}</a>.
  </p>
</div>