<div [ngSwitch]="fieldType" class="display-value-widget">
    <div *ngSwitchCase="'boolean'">
        <label class="mdl-checkbox mdl-js-checkbox" [attr.for]="field.id">
            <input type="checkbox"
                   [attr.id]="field.id"
                   [(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 mdl-textfield--floating-label text-widget">
        <input class="mdl-textfield__input"
               type="text"
               [attr.id]="field.id"
               [value]="value"
               disabled>
        <label class="mdl-textfield__label" [attr.for]="field.id">{{field.name}}</label>
    </div>
    <div *ngSwitchCase="'multi-line-text'"
         class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label 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>
            <span>{{field.name}}</span>
        </div>
        <div>
            <a [href]="linkUrl" target="_blank" rel="nofollow">{{linkText}}</a>
        </div>
    </div>
    <div *ngSwitchCase="'dynamic-table'">
        <div class="display-value-widget__dynamic-table">
            <div>{{field.name}}</div>
            <table class="mdl-data-table mdl-js-data-table">
                <thead>
                    <tr>
                        <th *ngFor="let column of visibleColumns"
                            class="mdl-data-table__cell--non-numeric">
                            {{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">
                            {{ getCellValue(row, column) }}
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div *ngSwitchCase="'upload'">
        <div class="upload-widget">
            <label class="upload-widget__label" [attr.for]="field.id">{{field.name}}</label>
            <div>
                <i *ngIf="hasFile" class="material-icons upload-widget__icon">attachment</i>
                <span *ngIf="hasFile" class="upload-widget__file">{{value}}</span>
            </div>
        </div>
    </div>
    <div *ngSwitchDefault
         class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label text-widget">
        <input class="mdl-textfield__input"
               type="text"
               [attr.id]="field.id"
               [value]="value"
               (ngModelChange)="checkVisibility(field)"
               disabled>
        <label class="mdl-textfield__label" [attr.for]="field.id">{{field.name}}</label>
    </div>
</div>

