<table class="gf-table w-100" mat-table [dataSource]="dataSource">
  <ng-container matColumnDef="alias">
    <th *matHeaderCellDef class="px-1" i18n mat-header-cell>Alias</th>
    <td *matCellDef="let element" class="px-1" mat-cell>
      {{ element.alias }}
    </td>
  </ng-container>

  <ng-container matColumnDef="grantee">
    <th *matHeaderCellDef class="px-1" i18n mat-header-cell>Grantee</th>
    <td *matCellDef="let element" class="px-1" mat-cell>
      {{ element.grantee }}
    </td>
  </ng-container>

  <ng-container matColumnDef="type">
    <th *matHeaderCellDef class="px-1" i18n mat-header-cell>Type</th>
    <td *matCellDef="let element" class="px-1 text-nowrap" mat-cell>
      <ng-container>
        <ion-icon class="mr-1" name="lock-closed-outline"></ion-icon>
        Restricted View
      </ng-container>
    </td>
  </ng-container>

  <ng-container matColumnDef="details">
    <th *matHeaderCellDef class="px-1" i18n mat-header-cell>Details</th>
    <td *matCellDef="let element" class="px-1 text-nowrap" mat-cell>
      <ng-container *ngIf="element.type === 'PUBLIC'">
        <ion-icon class="mr-1" name="link-outline"></ion-icon>
        <a
          href="{{ baseUrl }}/{{ defaultLanguageCode }}/p/{{ element.id }}"
          target="_blank"
          >{{ baseUrl }}/{{ defaultLanguageCode }}/p/{{ element.id }}</a
        >
      </ng-container>
    </td>
  </ng-container>

  <ng-container matColumnDef="actions" stickyEnd>
    <th *matHeaderCellDef class="px-1 text-center" mat-header-cell></th>

    <td *matCellDef="let element" class="px-1 text-center" mat-cell>
      <button
        class="mx-1 no-min-width px-2"
        mat-button
        [matMenuTriggerFor]="transactionMenu"
        (click)="$event.stopPropagation()"
      >
        <ion-icon name="ellipsis-horizontal"></ion-icon>
      </button>
      <mat-menu #transactionMenu="matMenu" xPosition="before">
        <button mat-menu-item (click)="onDeleteAccess(element.id)">
          <ng-container i18n>Revoke</ng-container>
        </button>
      </mat-menu>
    </td>
  </ng-container>

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