<mat-card appearance="outlined" class="color-card">
  <mat-card-title>
    <p>States Colors</p>
  </mat-card-title>
  <mat-card-subtitle>
    <p>There is a couple of brand colors that we're using.</p>
  </mat-card-subtitle>

  <mat-card-content class="table-wrapper">
    <table mat-table [dataSource]="dataSource" class="table">

      <!-- State Column -->
      <ng-container matColumnDef="state">
        <th mat-header-cell *matHeaderCellDef class="header">State</th>
        <td mat-cell *matCellDef="let element" class="body"> {{element.state}} </td>
      </ng-container>

      <!-- Preview Column -->
      <ng-container matColumnDef="preview">
        <th mat-header-cell *matHeaderCellDef class="header">Preview</th>
        <td mat-cell *matCellDef="let element" class="body">
          <div class="circle" [ngClass]="element.preview"></div>
        </td>
      </ng-container>

      <!-- Usage Column -->
      <ng-container matColumnDef="usage">
        <th mat-header-cell *matHeaderCellDef class="header">Usage Example</th>
        <td mat-cell *matCellDef="let element" class="usage-column">
          <div>
            <pre class="pre-usage"><code class="code">{{'<'}}button mat-flat-button <code class="usage-text">{{element.usage}}</code>{{'>'}}</code></pre>
          </div>
        </td>
      </ng-container>

      <!-- Hex Column -->
      <ng-container matColumnDef="hex">
        <th mat-header-cell *matHeaderCellDef class="header">Hex Value</th>
        <td mat-cell *matCellDef="let element" class="body">
          <pre class="pre-hex"><code class="code"><{{element.hex}}></code></pre>
        </td>
      </ng-container>

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

  </mat-card-content>
</mat-card>
