<table class="table" mat-table [dataSource]="ethernetPorts">
  <ng-container matColumnDef="port_number">
    <th mat-header-cell *matHeaderCellDef>Port number</th>
    <td mat-cell *matCellDef="let element">{{ element.port_number }}</td>
  </ng-container>

  <ng-container matColumnDef="vlan">
    <th mat-header-cell *matHeaderCellDef>VLAN</th>
    <td mat-cell *matCellDef="let element">{{ element.vlan }}</td>
  </ng-container>

  <ng-container matColumnDef="type">
    <th mat-header-cell *matHeaderCellDef>Type</th>
    <td mat-cell *matCellDef="let element">{{ element.type }}</td>
  </ng-container>

  <ng-container matColumnDef="ethertype">
    <th mat-header-cell *matHeaderCellDef>EtherType</th>
    <td mat-cell *matCellDef="let element">{{ element.ethertype }}</td>
  </ng-container>

  <ng-container matColumnDef="action">
    <th mat-header-cell *matHeaderCellDef>Actions</th>
    <td mat-cell *matCellDef="let element">
      <button mat-icon-button matTooltip="Delete port" matTooltipClass="custom-tooltip" (click)="delete(element)">
        <mat-icon aria-label="Delete port">delete</mat-icon>
      </button>
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
<br />
<mat-form-field class="form-field">
  <input matInput type="number" [(ngModel)]="newPort.port_number" placeholder="Port" />
</mat-form-field>
<mat-form-field class="form-field">
  <input matInput type="number" [(ngModel)]="newPort.vlan" placeholder="VLAN" />
</mat-form-field>
<mat-form-field class="select">
  <mat-select placeholder="Type" [ngModelOptions]="{ standalone: true }" [(ngModel)]="newPort.type">
    <mat-option *ngFor="let type of portTypes" [value]="type">
      {{ type }}
    </mat-option>
  </mat-select>
</mat-form-field>
<mat-form-field class="select">
  <mat-select placeholder="EtherType" [ngModelOptions]="{ standalone: true }" [(ngModel)]="newPort.ethertype">
    <mat-option *ngFor="let type of etherTypes" [value]="type">
      {{ type }}
    </mat-option>
  </mat-select>
</mat-form-field>
<button mat-button class="form-field" (click)="onAdd()">Add</button>
