<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'">
        <dynamic-table-widget [field]="field" [readOnly]="!tableEditable"></dynamic-table-widget>
    </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 *ngSwitchCase="'document'">
        <div *ngIf="hasFile">
            <activiti-content [id]="id" [showDocumentContent]="true"></activiti-content>
        </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>

