<mat-spinner style="margin:0 auto;" mode="indeterminate" class="big-spinner-center"
  [style.display]="showSpinner ? 'block' : 'none'">
</mat-spinner>

<br>
<mat-card class="wizard-container" *ngIf="model">
  <mat-vertical-stepper #stepper>
    <mat-step [completed]="false">
      <ng-template matStepLabel>Select domain</ng-template>
      <ng-container *ngFor="let availableDomain of domains">
        <button [ngClass]="{'chip domain-btn': true, 'active': model.domain === availableDomain}" mat-flat-button
          (click)="onModelDomainChange(availableDomain)">{{ availableDomain | modelList | titlecase }}</button>
      </ng-container>
    </mat-step>

    <mat-step [completed]="false">
      <ng-template matStepLabel>Select model</ng-template>
      <ng-container *ngFor="let availableModel of models">
        <button *ngIf="configExists(model.framework, model.domain, availableModel)"
          [ngClass]="{'chip model-btn': true, 'active': model.model === availableModel}" mat-flat-button
          (click)="model.model = availableModel"> {{ availableModel | modelList }} </button>
      </ng-container>
    </mat-step>

  </mat-vertical-stepper>
</mat-card>

<br>
<mat-progress-bar color="accent" [value]="progressBarValue" mode="buffer"
  [style.display]="showProgressBar ? 'block' : 'none'"></mat-progress-bar>
<div *ngIf="showProgressBar" class="center">
  {{ downloadMessage }}
</div>

<div class="float-right">
  <button id="finish-basic-btn" mat-raised-button color="accent" queryParamsHandling="preserve" (click)="addExample()"
    [disabled]="!(model.domain && model.model) || showProgressBar">
    <img class="navigation-icon" src="./../../assets/056a-save-solid-white.svg">
    Finish
  </button>
</div>