gns3-web-ui/src/app/components/template/template-list-dialog/template-list-dialog.component.html

<div class="title-container">
  <h1 mat-dialog-title>Add a node</h1>
  <button mat-button class="top-button" color="accent" (click)="onNoClick()" routerLink="/server/{{server.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}">
  </mat-form-field>
  <mat-form-field class="form-field">
      <mat-select 
        [ngModelOptions]="{standalone: true}"  
        placeholder="Filter templates by type"
        (selectionChange)="filterTemplates($event)"
        [(ngModel)]="selectedType">
        <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">
        <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="text" matInput formControlName="name" placeholder="Enter name (default is taken from template)" />
    </mat-form-field>
    <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>

  <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 mat-button (click)="onAddClick()" tabindex="2" mat-raised-button color="primary">Add</button>
</div>