<div class="close ">
  <button class="cerrar-b cursor-pointer" mat-dialog-close><mat-icon>close</mat-icon></button>
</div>

<span class="center">Crear Lista</span>
<!-- --------------------------------------------------------------------------------- -->
<!-- form -->

<mat-dialog-content  class="mat-typography space mt-40" style="min-width: 550px;" [autofocus]="['none']">
  <mat-spinner *ngIf="isLoading" class="mx-auto" [diameter]="60"></mat-spinner>
  <form (ngSubmit)="save()" [formGroup]="form" *ngIf="!isLoading">


    <mat-form-field style="width: 49%;">
      <mat-label class="label">Grado o Grupo:</mat-label>
      <mat-select formControlName="gradoGrupo" (selectionChange)="onGradoGrupo($event.value)">
        <!-- <mat-option *ngFor="let item of todos" [value]="item.idGrado ? item.nombreGrado : item.idGrupo">
          {{item.nombreGrado ? item.nombreGrado : item.nombreGrupo}}
        </mat-option> -->
        <mat-option *ngFor="let gradoGrupo of junto" [value]="gradoGrupo.id">{{gradoGrupo.nombre}}</mat-option>
      </mat-select>
      <!-- <mat-hint *ngIf="isValidField('gradoGrupo', 'required')" style="color: red;">El campo es obligatorio</mat-hint> -->
    </mat-form-field>

    <mat-form-field style="width: 49%;" class="ml-10">
      <mat-label class="label">Materias:</mat-label>
      <mat-select formControlName="materia">
        <mat-option [value]="materia.idMateria" *ngFor="let materia of filtrados">
          {{ materia.nombreMateria}}
        </mat-option>
      </mat-select>
      <!-- <mat-hint *ngIf="isValidField('materia', 'required')" style="color: red;">El campo es obligatorio</mat-hint> -->
    </mat-form-field>

    <div class="flex-col">

      <label for="fechaInicio">Fecha y Hora</label>
      <div>
        <mat-form-field class="w-responsive">
          <mat-label>Desde</mat-label>
          <input matInput [matDatepicker]="pickerStart" [min]="todayDate" name="fechaInicio" id="fechaInicio"
            formControlName="fechaInicio">
          <!-- <mat-hint>MM/DD/YYYY</mat-hint> -->
          <mat-datepicker-toggle matIconSuffix [for]="pickerStart"></mat-datepicker-toggle>
          <mat-datepicker #pickerStart></mat-datepicker>
        </mat-form-field>

        <mat-form-field class="ml-10 w-responsive">
          <mat-label>Hora</mat-label>
          <mat-select matNativeControl name="horaInicio" formControlName="horaInicio">
            <mat-option *ngFor="let hora of horasDelDia" [value]="hora.hora24">{{hora.hora12}}
            </mat-option>
          </mat-select>
        </mat-form-field>
      </div>

    </div>



  </form>




</mat-dialog-content>

<div class="align flex-row mt-20 pb-10"  *ngIf="!isLoading">
  <div class="items-centerbtn justify-center">
    <button type="button" (click)="save()" class="yellow">
      <span >
        Ingresar
      </span>
      <mat-icon class="icon" matSuffix>description</mat-icon></button>
  </div>
  <div class="items-centerbtn justify-center">
    <button class="orange" (click)="limpiar()">
      <span>
        Limpiar
      </span>
      <mat-icon class="icon" matSuffix>delete</mat-icon></button>
  </div>
  <div class="items-centerbtn  justify-center">
    <button class="red" mat-dialog-close>
      <span>
        Cerrar
      </span>
      <mat-icon class="icon" matSuffix>cancel</mat-icon></button>
  </div>

</div>

  <!-- -------------------------------------- -->
