<mat-toolbar color="primary" class="dialog-toolbar">
    <h2 class="dialog-toolbar-title">
      Request Degree Audit
    </h2>
    <button
      mat-button
      mat-dialog-close
      class="close-btn"
      aria-label="Close audit dialog"
      cdkFocusRegionEnd>
      <i
        class="material-icons"
        alt="Close audit dialog"
        matTooltip="Close audit dialog"
        matTooltipPosition="above"
        >clear</i>
    </button>
  </mat-toolbar>

  <mat-dialog-content id="new-audit-options-stepper" class="mat-typography dialog-with-toolbar">

    <div fxLayout="column" fxLayoutAlign="none" fxLayoutGap="10px">
      <form [formGroup]="newAuditForm" id="newAuditForm">
        <mat-vertical-stepper linear #stepper formArrayName="formArray">
            <mat-step class="audit-step" formGroupName="0" [stepControl]="formArray?.get([0])">
                <ng-template matStepLabel>Choose audit type</ng-template>
                  <mat-radio-group class="audit-radio-group" formControlName="auditType">
                    <mat-radio-button checked="true" class="audit-radio-button" name="declared-audit-type" id="declared-audit-type" value="declaredMajorAudit" aria-label="Select run a degree audit with declared major">
                      <p>Run a degree audit with declared major <br />
                      <span class="sub-line">See the progress towards your current program of study.</span></p>
                    </mat-radio-button>

                    <mat-radio-button class="audit-radio-button" name="what-if-audit-type" id="what-if-audit-type" value="whatIfAudit" aria-label="Select run a what-if degree audit">
                      <p>Run a what-if degree audit <br />
                      <span class="sub-line">See the progress towards a new program of study and degree plans.</span></p>
                    </mat-radio-button>
                  </mat-radio-group>
                <div class="step-buttons-group">
                  <button mat-button matStepperNext mat-stroked-button color="primary">Next</button>
                </div>
            </mat-step>

            <mat-step class="audit-step" formGroupName="1" [stepControl]="formArray?.get([1])">
              <ng-template matStepLabel>Select program of study</ng-template>

              <!-- If audit with declared major was selected in #1 show this -->
              <mat-radio-group class="audit-radio-group" formControlName="programOfStudy">
                <mat-radio-button checked="true" class="audit-radio-button" name="" id="" value="" aria-label="">
                    Major: Psychology
                </mat-radio-button>
              </mat-radio-group>

              <!-- If what-if audit was selected in #1 -->
              <mat-form-field class="audit-program">
                <mat-select formControlName="programOfStudy" placeholder="School, College or Population" aria-label="Select School, College or Population" [disableOptionCentering]="true">
                  <mat-option value="">Engineering</mat-option>
                </mat-select>
              </mat-form-field>

              <!-- Show after School, College or Population was selected -->
              <mat-form-field class="audit-program">
                <mat-select formControlName="academicProgram" placeholder="Academic Plan Program" aria-label="Academic Plan Program" [disableOptionCentering]="true">
                  <mat-option value="">Biomedical Engineering</mat-option>
                </mat-select>
              </mat-form-field>

              <div class="step-buttons-group">
                <button mat-button matStepperPrevious color="primary">Back</button>
                <button mat-button matStepperNext mat-stroked-button color="primary">Next</button>
              </div>
            </mat-step>

            <mat-step class="audit-step" formGroupName="2" [stepControl]="formArray?.get([2])">
              <ng-template matStepLabel>Choose audit settings</ng-template>
              <mat-form-field class="audit-settings-option">
                <mat-label>Honors Degree Options</mat-label>
                <mat-select formControlName="honors" placeholder="Honors Degree Option" aria-label="Honors Degree Options" [disableOptionCentering]="true">
                  <mat-option value="">Keep current status</mat-option>
                </mat-select>
              </mat-form-field>
              <mat-form-field class="audit-settings-option">
                  <mat-label>Include Courses From</mat-label>
                  <mat-select formControlName="includeCoursesFrom" placeholder="Include Courses From" aria-label="Include Courses From" [disableOptionCentering]="true">
                    <mat-option value="">Previous, current, future, and planned terms</mat-option>
                  </mat-select>
                </mat-form-field>

                <p style="margin-top: 12px;"><strong>Run against which degree plan?</strong></p>
                <mat-form-field class="audit-settings-option">
                  <mat-label>Degree Plan</mat-label>
                  <mat-select formControlName="runAgainst" placeholder="Degree Plan" aria-label="Degree Plan" [disableOptionCentering]="true">
                    <mat-option value="">Engineering</mat-option>
                  </mat-select>
                </mat-form-field>

                <div class="step-buttons-group">
                  <button mat-button matStepperPrevious color="primary">Back</button>
                  <button mat-button matStepperNext mat-stroked-button color="primary">Next</button>
                </div>
            </mat-step>

            <mat-step class="audit-step" formGroupName="3" [stepControl]="formArray?.get([3])">
              <ng-template matStepLabel>Select credits</ng-template>
              <p>To provide more accurate audit, specify the number of credits you planto make in the following course(s):</p>
              <!-- If no variable credits were found, show the message -->
              <!-- <p>No variable credits found.The audit is ready to be run.</p> -->
              <div fxLayout="row" fxFlex="100" style="margin-top: 18px;">
                <div fxLayoutAlign="start center" fxFlex="80">
                  <span>Spring 2020: BIO 151 <br /> Introductory biology</span>
                </div>
                <div fxLayoutAlign="end center" fxFlex="20">
                  <mat-form-field id="audit-credits-selector">
                    <mat-select formControlName="credits" placeholder="" aria-label="Number of credits" [disableOptionCentering]="true">
                        <mat-option value="">2</mat-option>
                    </mat-select>
                  </mat-form-field>
                </div>
              </div>
              <div class="step-buttons-group">
                <button mat-button matStepperPrevious color="primary">Back</button>
                <button mat-button mat-raised-button color="primary" (click)="runDARSAudit();">Run Audit</button>
                <!-- <button mat-button (click)="stepper.reset()" mat-stroked-button color="primary">Reset</button> -->
              </div>
            </mat-step>
          </mat-vertical-stepper>
        </form>
    </div>
  </mat-dialog-content>