<div fxLayout="column">
  <table class="table-container" mat-table [dataSource]="buttonsDescription">
    <ng-container matColumnDef="type">
      <th mat-header-cell *matHeaderCellDef>{{ 'app.info.component.type' | translate }}</th>
      <td mat-cell *matCellDef="let element"> {{element.type}}</td>
    </ng-container>

    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef>{{ 'app.info.component.name' | translate }}</th>
      <td mat-cell *matCellDef="let element"> {{element.name}}</td>
    </ng-container>

    <ng-container matColumnDef="description">
      <th mat-header-cell *matHeaderCellDef>{{ 'app.info.component.description' | translate }}</th>
      <td mat-cell *matCellDef="let element">{{ element.description | translate }}</td>
    </ng-container>

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

  <div fxLayout="row"
       fxLayout.lt-md="column"
       fxLayoutAlign="space-between start"
       fxLayoutAlign.lt-md="space-between center"
       fxLayoutGap.lt-md="30px">
    <div fxLayout="column"
         fxLayoutGap="30px">
      <div fxLayout="row"
           fxLayoutAlign="start center"
           fxLayoutGap="10px">
        <play-app-button class="width-90" aspect="secondary" type="mat-icon-button" icon="app"></play-app-button>
        <div class="width-200" fxLayout="column">
          <span><b>aspect:</b> secondary</span>
          <span><b>type:</b> mat-icon-button</span>
          <span><b>icon:</b> app</span>
        </div>
      </div>

      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="10px">
        <play-app-button class="width-90" aspect="secondary" type="mat-mini-fab" content="Tak"></play-app-button>
        <div class="width-200" fxLayout="column">
          <span><b>content:</b> Tak</span>
          <span><b>aspect:</b> secondary</span>
          <span><b>type:</b> mat-mini-fab</span>
        </div>
      </div>

      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="10px">
        <play-app-button class="width-90" aspect="warning" type="mat-fab-icon" icon="app"></play-app-button>
        <div class="width-200" fxLayout="column">
          <span><b>aspect:</b> warning</span>
          <span><b>type:</b> mat-fab-icon</span>
          <span><b>icon:</b> app</span>
        </div>
      </div>

      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="10px">
        <play-app-button class="width-90" type="mat-fab-icon" icon="football-player"></play-app-button>
        <div class="width-200" fxLayout="column">
          <span><b>type:</b> mat-fab-icon</span>
          <span><b>icon:</b> football-player</span>
        </div>
      </div>

      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="10px">
        <play-app-button class="width-90" type="mat-fab-icon" icon="football-player" disabled='true'></play-app-button>
        <div class="width-200" fxLayout="column">
          <span><b>type:</b> mat-fab-icon</span>
          <span><b>icon:</b> football-player</span>
          <span><b>disabled:</b> true</span>
        </div>
      </div>
    </div>

    <div fxLayout="column" fxLayoutGap="30px">
      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="10px">
        <play-app-button class="width-90" aspect="primary" type="mat-button" content="Dalej"></play-app-button>
        <div class="width-200" fxLayout="column">
          <span><b>content:</b> Dalej</span>
          <span><b>aspect:</b> primary</span>
          <span><b>type:</b> mat-button</span>
        </div>
      </div>

      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="10px">
        <play-app-button class="width-90" aspect="secondary" type="mat-button" link="true"
                         content="Zaloguj">
        </play-app-button>
        <div class="width-200" fxLayout="column">
          <span><b>content:</b> Zaloguj</span>
          <span><b>aspect:</b> secondary</span>
          <span><b>type:</b> mat-button</span>
          <span><b>link:</b> true</span>
        </div>
      </div>

      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="10px">
        <play-app-button class="width-90" aspect="warning" type="mat-stroked-button"
                         content="Wyloguj">
        </play-app-button>
        <div class="width-200" fxLayout="column">
          <span><b>content:</b> Wyloguj</span>
          <span><b>aspect:</b> warning</span>
          <span><b>type:</b> mat-stroked-button</span>
        </div>
      </div>
      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="10px">
        <play-app-button class="width-90" aspect="primary" type="mat-raised-button" icon="app" link="true"
                         content="Dalej">
        </play-app-button>
        <div class="width-200" fxLayout="column">
          <span><b>content:</b> Dalej</span>
          <span><b>aspect:</b> primary</span>
          <span><b>type:</b> mat-raised-button</span>
          <span><b>link:</b> true</span>
        </div>
      </div>

      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="10px">
        <play-app-button class="width-90" aspect="warning" type="mat-raised-button" icon="app" link="true" disabled=true
                         content="Zarejestruj">
        </play-app-button>
        <div class="width-200" fxLayout="column">
          <span><b>content:</b> Zarejestruj</span>
          <span><b>aspect:</b> warning</span>
          <span><b>type:</b> mat-raised-button</span>
          <span><b>link:</b> true</span>
          <span><b>disabled:</b> true</span>
        </div>
      </div>
    </div>
  </div>
</div>