<div class="title-container">
  <h1 mat-dialog-title>Add a node</h1>
  <button
    mat-button
    class="top-button"
    color="accent"
    (click)="onNoClick()"
    routerLink="/controller/{{ controller?.id }}/preferences"
  >
    Go to template preferences
  </button>
</div>
<div mat-dialog-content class="content">
  <div class="title-container">
    <h6>Template</h6>
  </div>
  <mat-form-field class="form-field" floatPlaceholder="never">
    <input matInput placeholder="Search by name" [(ngModel)]="searchText" [ngModelOptions]="{ standalone: true }" ngDefaultControl/>
  </mat-form-field>
  <mat-form-field class="form-field">
    <mat-select
      [ngModelOptions]="{ standalone: true }"
      placeholder="Filter templates by type"
      (selectionChange)="filterTemplates($event)"
      [(ngModel)]="selectedType" ngDefaultControl
    >
      <mat-option *ngFor="let type of templateTypes" [value]="type">
        {{ type }}
      </mat-option>
    </mat-select>
  </mat-form-field>
  <mat-form-field class="form-field">
    <mat-select
      [ngModelOptions]="{ standalone: true }"
      placeholder="Choose template"
      (selectionChange)="chooseTemplate($event)"
      [(ngModel)]="selectedTemplate" ngDefaultControl
    >
      <mat-option *ngFor="let template of filteredTemplates | templatefilter: searchText" [value]="template">
        {{ template.name }}
      </mat-option>
    </mat-select>
  </mat-form-field>

  <div class="title-container">
    <h6>Configuration</h6>
  </div>
  <form [formGroup]="configurationForm">
    <mat-form-field class="form-field">
      <input
        type="number"
        matInput
        formControlName="numberOfNodes"
        placeholder="Enter number of nodes (default value is 1)"
      />
    </mat-form-field>
  </form>
  <mat-select *ngIf="selectedTemplate" placeholder="Choose controller for node" [(value)]="selectedTemplate.compute_id">
    <mat-option *ngFor="let type of nodeControllers" [value]="type">
      {{ type }}
    </mat-option>
  </mat-select>

  <div class="title-container">
    <h6>Position</h6>
  </div>
  <form [formGroup]="positionForm">
    Left:&nbsp;
    <mat-form-field>
      <input matInput type="number" formControlName="left" />
    </mat-form-field>
    Top:&nbsp;
    <mat-form-field>
      <input matInput type="number" formControlName="top" />
    </mat-form-field>
  </form>
</div>
<div mat-dialog-actions align="end">
  <button mat-button (click)="onNoClick()" tabindex="-1" color="accent">Close</button>
  <button class="addButton" mat-button (click)="onAddClick()" tabindex="2" mat-raised-button color="primary">
    Add
  </button>
</div>
