<div class="grid-container">
  <h1 class="mat-h1">Classroom All</h1>
  <div class="row" [hidden]="show">
    <div class="col-md-3"></div>
    <div class="col-6">
      <div class="input-group mb-3">
        <mat-form-field>
          <mat-label>ชื่ออาจารย์</mat-label>
          <input matInput required #name name="name">

        </mat-form-field>
        <!-- <input type="text" class="form-control" #name name="name" placeholder="ชื่ออาจารย์"> -->
        <div class="input-group-append">
          <button class="btn btn-outline-secondary" type="submit" (click)="nameT(name.value)">บันทึก</button>
        </div>
      </div>
    </div>
  </div>
  <div class="text-center" [hidden]="!show">
    <h4>ผู้สอน : {{namet}}</h4>
  </div>
  <br>
  <div [hidden]="!show">
    <div class="row">
      <div class="col-md-3" style="text-align: center;">
        <label class="text-center">
          <h5>ค้นหาวิชา</h5>
        </label>
      </div>
      <div class="col-md-3">
        <input type="text" class="form-control" placeholder="รหัสวิชา" [(ngModel)]="search" />
      </div>
    </div>
    <br>
    <div class="row">
      <div *ngFor="let c of course | cardFilter :search" class="col-md-3">
        <mat-grid-list cols="2" rowHeight="350px">
          <mat-grid-tile *ngFor="let card of cards | async" [colspan]="card.cols" [rowspan]="card.rows" class="style">
            <mat-card class="dashboard-card">
              <mat-card-header>
                <mat-card-title>
                  {{sfc(c.course_id)}}
                  <button mat-icon-button class="more-button" [matMenuTriggerFor]="menu" aria-label="Toggle menu">
                    <mat-icon>more_vert</mat-icon>
                  </button>
                  <mat-menu #menu="matMenu" xPosition="before">
                    <button mat-menu-item (click)="pageinfo(c.id)">จัดการคะแนน</button>
                    <button mat-menu-item (click)="pageup(c.id)">อัพเดทชื่อ</button>
                    <button mat-menu-item (click)="pageinfoname(c.id)">ประวัติ</button>
                  </mat-menu>
                </mat-card-title>
              </mat-card-header>
              <mat-card-content class="dashboard-card-content">
                <div>
                  <br>
                  <br>
                  <p class="card-text">{{sfn(c.course_name)}}</p>
                  <p class="card-text">เทอม : {{c.seson}}</p>
                  <p class="card-text"><small class="text-muted">เวลาเริ่มสอน : {{c.time}}</small></p>
                </div>
              </mat-card-content>
              <mat-card-actions>
                <button mat-button (click)="pageqr(c.id,c.course_id)">QRcode</button>
                <button mat-button class="float-right" (click)="delete(c.id)">ลบ</button>
              </mat-card-actions>
            </mat-card>
          </mat-grid-tile>
        </mat-grid-list>
      </div>
    </div>
  </div>
</div>