<div [ngSwitch]="fieldType" class="display-value-widget {{field.className}}" *ngIf="field?.isVisible">
    <div *ngSwitchCase="'boolean'">
        <label class="mdl-checkbox mdl-js-checkbox" [attr.for]="field.id" >
            <input type="checkbox"
                   [attr.id]="field.id"
                   [checked]="value"
                   [(ngModel)]="value"
                   class="mdl-checkbox__input"
                   disabled>
            <span class="mdl-checkbox__label">{{field.name}}</span>
        </label>
    </div>
    <div *ngSwitchCase="'text'"
         class="mdl-textfield mdl-js-textfield text-widget">
        <label [attr.for]="field.id">{{field.name}}</label>
        <input
            class="mdl-textfield__input"
            type="text"
            [attr.id]="field.id"
            [value]="value"
            disabled>
    </div>
    <div *ngSwitchCase="'multi-line-text'"
         class="mdl-textfield mdl-js-textfield multiline-text-widget">
        <textarea class="mdl-textfield__input"
                  type="text"
                  rows="3"
                  [value]="value"
                  [attr.id]="field.id"
                  disabled>
        </textarea>
        <label class="mdl-textfield__label" [attr.for]="field.id">{{field.name}}</label>
    </div>
    <div *ngSwitchCase="'hyperlink'" class="hyperlink-widget">
        <div>
            <div>
                <span>{{field.name}}</span>
            </div>
            <div>
                <a [href]="linkUrl" target="_blank" rel="nofollow">{{linkText}}</a>
            </div>
        </div>
    </div>
    <div *ngSwitchCase="'dynamic-table'">

        <div class="display-value-widget__dynamic-table">
            <div>{{field.name}}</div>
            <div class="display-value-dynamic-table-widget__table-container">
                <table class="mdl-data-table mdl-js-data-table">
                    <thead>
                    <tr>
                        <th *ngFor="let column of visibleColumns"
                            class="mdl-data-table__cell--non-numeric is-disabled">
                            {{column.name}}
                        </th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr *ngFor="let row of rows">
                        <td *ngFor="let column of visibleColumns"
                            class="mdl-data-table__cell--non-numeric is-disabled">
                            {{ getCellValue(row, column) }}
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div *ngSwitchCase="'upload'">
        <div *ngIf="hasFile" class="mdl-grid">
            <div *ngFor="let file of field.value" class="mdl-cell mdl-cell--6-col">
                <activiti-content [id]="file.id" [showDocumentContent]="showDocumentContent"></activiti-content>
            </div>
        </div>
    </div>
    <div *ngSwitchDefault
         class="mdl-textfield mdl-js-textfield text-widget is-disabled is-dirty is-upgraded">
        <label [attr.for]="field.id">{{field.name}}</label>
        <input
            class="mdl-textfield__input"
            type="text"
            [attr.id]="field.id"
            [value]="value"
            disabled>
    </div>
</div>

