OwenKelvin/Angular-School-Management-System

<header>Create A New Student Form</header>
<app-student-academic-year-allocation></app-student-academic-year-allocation>
<mat-accordion class="headers-align">
  <mat-expansion-panel [expanded]="step === 0" (opened)="setStep(0)" hideToggle>
    <mat-expansion-panel-header>
      <mat-panel-title>
        <h1>
          Identification Information
          <small [hidden]="!idNumber"> => Id: {{ idNumber }}</small>
        </h1>
      </mat-panel-title>
      <mat-panel-description>
        &nbsp;
        <mat-icon>account_circle</mat-icon>
      </mat-panel-description>
    </mat-expansion-panel-header>

    <!-- <app-student-identification-details></app-student-identification-details> -->
    <app-student-identification-form (submitted)="identificationSubmittedHandler($event)"
      [submit]="submitStudentIdentificationInfo"></app-student-identification-form>

    <mat-action-row>
      <button mat-button mat-flat-button color="primary" (click)="saveStudentIdentificationInfo()">Next</button>
    </mat-action-row>
  </mat-expansion-panel>

  <mat-expansion-panel [expanded]="step === 1" (opened)="setStep(1)" hideToggle>
    <mat-expansion-panel-header>
      <mat-panel-title>
        Guardian Information
      </mat-panel-title>
      <mat-panel-description>
        Please enter guardian Infomation
        <mat-icon>people_alt</mat-icon>
      </mat-panel-description>
    </mat-expansion-panel-header>

    <app-student-guardian-form (submitted)="guardiansSubmittedHandler($event)"></app-student-guardian-form>

    <mat-action-row>
      <button mat-button color="warn" (click)="prevStep()">Previous</button>
      <button mat-button mat-flat-button color="primary" (click)="saveStudentGuardiansInfo()">Next</button>
    </mat-action-row>
  </mat-expansion-panel>

  <mat-expansion-panel [expanded]="step === 2" (opened)="setStep(2)" hideToggle>
    <mat-expansion-panel-header>
      <mat-panel-title>
        Day of the trip
      </mat-panel-title>
      <mat-panel-description>
        Inform the date you wish to travel
        <mat-icon>date_range</mat-icon>
      </mat-panel-description>
    </mat-expansion-panel-header>

    <mat-form-field>
      <input matInput placeholder="Date" [matDatepicker]="picker" (focus)="picker.open()" readonly>
    </mat-form-field>
    <mat-datepicker #picker></mat-datepicker>

    <mat-action-row>
      <button mat-button color="warn" (click)="prevStep()">Previous</button>
      <button mat-button color="primary" (click)="nextStep()">End</button>
    </mat-action-row>
  </mat-expansion-panel>

</mat-accordion>