<h1 mat-dialog-title [innerHTML]="uitextSaveSessionTitle"></h1>

<form>

  <div mat-dialog-content>
    <div class="cb-container">
      <mat-checkbox [name]="c.uid" *ngFor="let c of calculators" [(ngModel)]="c.selected">
        {{ c.title }}
      </mat-checkbox>
    </div>

    <div class="btn-container">
      <button mat-raised-button (click)="selectAll()">{{ uitextAll }}</button>
      <button mat-raised-button (click)="selectNone()">{{ uitextNone }}</button>
    </div>

    <mat-form-field>
      <input matInput required [placeholder]="uitextFilenameInput" [(ngModel)]="fileName"
        name="filename" #filename="ngModel" (keydown.enter)="onEnterPressed($event)">
    </mat-form-field>
  </div>

  <div mat-dialog-actions>
    <button mat-raised-button color="primary" [mat-dialog-close]="false" cdkFocusInitial>
      {{ uitextCancel }}
    </button>
    <button mat-raised-button type="submit" color="warn" (click)="saveSession()"
      [disabled]="(! filename.valid) || (! atLeastOneCheckboxSelected)">

      {{ uitextSave }}
    </button>
  </div>

</form>