<div class="{{field.className}}"
    [class.adf-invalid]="!isValid()">
    <div class="adf-label">{{content.name}}<span *ngIf="isRequired()">*</span></div>

    <div *ngIf="!editMode">
        <div class="adf-table-container">
            <table class="full-width adf-dynamic-table" id="dynamic-table-{{content.id}}">
                <thead>
                    <tr>
                        <th *ngFor="let column of content.visibleColumns">
                            {{column.name}}
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let row of content.rows; let idx = index" tabindex="0" id="{{content.id}}-row-{{idx}}"
                        [class.adf-dynamic-table-widget__row-selected]="row.selected" (keyup)="onKeyPressed($event, row)">
                        <td *ngFor="let column of content.visibleColumns"
                            (click)="onRowClicked(row)">
                            {{ getCellValue(row, column) }}
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div *ngIf="!readOnly">
            <button mat-button
                    [disabled]="!hasSelection()"
                    (click)="moveSelectionUp()">
                <mat-icon>arrow_upward</mat-icon>
            </button>
            <button mat-button
                    [disabled]="!hasSelection()"
                    (click)="moveSelectionDown()">
                <mat-icon>arrow_downward</mat-icon>
            </button>
            <button mat-button
                    [disabled]="field.readOnly"
                    id="{{content.id}}-add-row"
                    (click)="addNewRow()">
                <mat-icon>add_circle_outline</mat-icon>
            </button>
            <button mat-button
                    [disabled]="!hasSelection()"
                    (click)="deleteSelection()">
                <mat-icon>remove_circle_outline</mat-icon>
            </button>
            <button mat-button
                    [disabled]="!hasSelection()"
                    (click)="editSelection()">
                <mat-icon>edit</mat-icon>
            </button>
        </div>
     </div>

     <row-editor *ngIf="editMode"
        [table]="content"
        [row]="editRow"
        [column]="column"
        (save)="onSaveChanges()"
        (cancel)="onCancelChanges()">
     </row-editor>
    <error-widget [error]="field.validationSummary" ></error-widget>
    <error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
</div>
