<div id="league" class="page-layout simple fullwidth" fxLayout="column">
  <!-- <div id="orders" class="page-layout carded fullwidth inner-scroll"> -->
  <!-- HEADER -->
  <div
    class="header accent p-24 h-160"
    fxLayout="row"
    fxLayoutAlign="start center"
  >
    <div fxLayout="column" fxLayoutAlign="center start">
      <div fxLayout="row" fxLayoutAlign="start center">
        <mat-icon class="secondary-text s-18">home</mat-icon>
        <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
        <span class="secondary-text">User Interface</span>
      </div>
      <div class="h1 mt-16">리그관리</div>
    </div>
  </div>
  <!-- / HEADER -->

  <!-- CONTENT -->
  <div class="content p-24">
    <div class="h1">
      리그 리스트
    </div>

    <div
      class="mb-24"
      fxLayout="column"
      fxLayoutAlign="start"
      fxLayout.gt-md="row"
    >
      <div
        class="mat-elevation-z8 p-24 mr-24"
        fxFlex="3 0 auto"
        fxLayout="column"
      >
        <mat-table
          class="league-table"
          #table
          [dataSource]="dataSource"
          [@animateStagger]="{ value: '50' }"
          matSort
        >
          <!-- Icon Column -->
          <ng-container matColumnDef="icon">
            <mat-header-cell *matHeaderCellDef>아이콘</mat-header-cell>
            <mat-cell *matCellDef="let league">icon</mat-cell>
          </ng-container>

          <!-- KorName Column -->
          <ng-container matColumnDef="korName">
            <mat-header-cell *matHeaderCellDef>리그명</mat-header-cell>
            <mat-cell *matCellDef="let league">{{ league.korName }}</mat-cell>
          </ng-container>

          <!-- 추가방식 Column -->
          <ng-container matColumnDef="addMethod">
            <mat-header-cell *matHeaderCellDef>추가방식</mat-header-cell>
            <mat-cell *matCellDef="let league">파싱추가</mat-cell>
          </ng-container>

          <!-- 종목 Column -->
          <ng-container matColumnDef="sportsEntities">
            <mat-header-cell *matHeaderCellDef>종목</mat-header-cell>
            <mat-cell *matCellDef="let league">{{
              league.sportsEntities[0].name
            }}</mat-cell>
          </ng-container>

          <!-- Symbol Column -->
          <ng-container matColumnDef="test">
            <mat-header-cell *matHeaderCellDef>실행</mat-header-cell>
            <mat-cell *matCellDef="let element">{{ element.test }}</mat-cell>
          </ng-container>

          <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
          <mat-row
            *matRowDef="let row; columns: displayedColumns"
            class="league"
            matRipple
          ></mat-row>
        </mat-table>

        <mat-paginator
          [pageSizeOptions]="[5, 10, 20]"
          showFirstLastButtons
        ></mat-paginator>
      </div>
      <div
        class="mat-card mat-elevation-z4"
        fxLayout="column"
        fxLayoutAlign="start"
        fxFlex="1 0 auto"
      >
        <div
          class="mat-card mat-elevation-z4 p-24 "
          fxLayout="column"
          fxLayoutAlign="start"
          fxFlex="1 0 auto"
        >
          <div class="h2 mb-24">Reactive Form Model</div>
          <pre><code>test</code></pre>
        </div>
        <div
          class="mat-card mat-elevation-z4 p-24 "
          fxLayout="column"
          fxLayoutAlign="start"
          fxFlex="1 0 auto"
        >
          <div class="h2 mb-24">Reactive Form Model</div>
          <pre><code>test</code></pre>
        </div>
        <div
          class="mat-card mat-elevation-z4 p-24 "
          fxLayout="column"
          fxLayoutAlign="start"
          fxFlex="1 0 auto"
        >
          <div class="h2 mb-24">Reactive Form Model</div>
          <pre><code>test</code></pre>
        </div>
      </div>
    </div>
  </div>
  <!-- / CONTENT -->
</div>
