<div class="dynamic-table-widget {{field.className}}"
    [class.dynamic-table-widget__invalid]="!isValid()" *ngIf="field?.isVisible">
    <div class="dynamic-table-widget__label">{{content.name}}</div>

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

        <div class="dynamic-table-widget__buttons" *ngIf="!readOnly">
            <button class="mdl-button mdl-js-button mdl-button--icon"
                    [disabled]="!hasSelection()"
                    (click)="moveSelectionUp()">
                <i class="material-icons">arrow_upward</i>
            </button>
            <button class="mdl-button mdl-js-button mdl-button--icon"
                    [disabled]="!hasSelection()"
                    (click)="moveSelectionDown()">
                <i class="material-icons">arrow_downward</i>
            </button>
            <button class="mdl-button mdl-js-button mdl-button--icon"
                    id="{{content.id}}-add-row"
                    (click)="addNewRow()">
                <i class="material-icons">add_circle_outline</i>
            </button>
            <button class="mdl-button mdl-js-button mdl-button--icon"
                    [disabled]="!hasSelection()"
                    (click)="deleteSelection()">
                <i class="material-icons">remove_circle_outline</i>
            </button>
            <button class="mdl-button mdl-js-button mdl-button--icon"
                    [disabled]="!hasSelection()"
                    (click)="editSelection()">
                <i class="material-icons">edit</i>
            </button>
        </div>
     </div>

     <row-editor *ngIf="editMode"
        [table]="content"
        [row]="editRow"
        [column]="column"
        (save)="onSaveChanges()"
        (cancel)="onCancelChanges()">
     </row-editor>

     <div class="dynamic-table-widget__summary">{{content?.field.validationSummary}}</div>

</div>
