<div class="content">
    @if (dataSourceTable != null) {
        <div>
            @if (isUserAdmin == true) {
                <button
                    mat-raised-button
                    color="accent"
                    (click)="openDialogToAdd()"
                >
                    {{ "ListJumpType_Add" | translate }}
                </button>
            }
            <table mat-table [dataSource]="dataSourceTable">
                <ng-container matColumnDef="id">
                    <th mat-header-cell *matHeaderCellDef>
                        {{ "ListJumpType_Header_Id" | translate }}
                    </th>
                    <td mat-cell *matCellDef="let element">{{ element.id }}</td>
                </ng-container>
                <ng-container matColumnDef="name">
                    <th mat-header-cell *matHeaderCellDef>
                        {{ "ListJumpType_Header_Name" | translate }}
                    </th>
                    <td mat-cell *matCellDef="let element">
                        {{ element.name }}
                    </td>
                </ng-container>
                <tr
                    mat-header-row
                    *matHeaderRowDef="displayedColumns; sticky: true"
                ></tr>
                <tr
                    mat-row
                    *matRowDef="let row; columns: displayedColumns"
                ></tr>
            </table>
        </div>
    } @else {
        <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
    }
    <mat-paginator [length]="resultsLength" [pageSize]="20"></mat-paginator>
</div>
