<div class="container-widget">
    <div *ngIf="content?.isGroup() && content?.isVisible" class="container-widget__header">
        <h4 class="container-widget__header-text" id="container-header"
            [class.collapsible]="content?.isCollapsible()">
            <button *ngIf="content?.isCollapsible()"
                    alfresco-mdl-button
                    class="mdl-button--icon"
                    (click)="onExpanderClicked()">
                <i class="material-icons">{{ content?.isExpanded ? 'expand_less' : 'expand_more' }}</i>
            </button>
            <span (click)="onExpanderClicked()" id="container-header-label">{{content.name}}</span>
        </h4>
    </div>
    <div class="mdl-grid" *ngIf="content?.isVisible && content?.isExpanded">
        <div *ngFor="let col of content.columns" class="mdl-cell mdl-cell--{{col.size}}-col">
            <div class="mdl-grid" *ngIf="col.hasFields()">
                <div *ngFor="let field of col.fields" class="mdl-cell mdl-cell--12-col">
                    <div [ngSwitch]="field.type" [hidden]="!field.isVisible">
                        <div *ngSwitchCase="'integer'">
                            <number-widget [field]="field" (fieldChanged)="fieldChanged($event);"></number-widget>
                        </div>
                        <div *ngSwitchCase="'text'">
                            <text-widget [field]="field" (fieldChanged)="fieldChanged($event);"></text-widget>
                        </div>
                        <div *ngSwitchCase="'multi-line-text'">
                            <multiline-text-widget [field]="field" (fieldChanged)="fieldChanged($event);"></multiline-text-widget>
                        </div>
                        <div *ngSwitchCase="'boolean'">
                            <checkbox-widget [field]="field" (fieldChanged)="fieldChanged($event);"></checkbox-widget>
                        </div>
                        <div *ngSwitchCase="'dropdown'">
                            <dropdown-widget [field]="field" (fieldChanged)="fieldChanged($event);"></dropdown-widget>
                        </div>
                        <div *ngSwitchCase="'hyperlink'">
                            <hyperlink-widget [field]="field" (fieldChanged)="fieldChanged($event);"></hyperlink-widget>
                        </div>
                        <div *ngSwitchCase="'radio-buttons'">
                            <radio-buttons-widget [field]="field" (fieldChanged)="fieldChanged($event);"></radio-buttons-widget>
                        </div>
                        <div *ngSwitchCase="'readonly'">
                            <display-value-widget [field]="field" (fieldChanged)="fieldChanged($event);"></display-value-widget>
                        </div>
                        <div *ngSwitchCase="'readonly-text'">
                            <display-text-widget [field]="field" (fieldChanged)="fieldChanged($event);"></display-text-widget>
                        </div>
                        <div *ngSwitchCase="'upload'">
                            <upload-widget *ngIf="!field.params.link" [field]="field" (fieldChanged)="fieldChanged($event);"></upload-widget>
                            <attach-widget *ngIf="field.params.link" [field]="field" (fieldChanged)="fieldChanged($event);"></attach-widget>
                        </div>
                        <div *ngSwitchCase="'typeahead'">
                            <typeahead-widget [field]="field" (fieldChanged)="fieldChanged($event);"></typeahead-widget>
                        </div>
                        <div *ngSwitchCase="'functional-group'">
                            <functional-group-widget [field]="field" (fieldChanged)="fieldChanged($event);"></functional-group-widget>
                        </div>
                        <div *ngSwitchCase="'people'">
                            <people-widget [field]="field" (fieldChanged)="fieldChanged($event);"></people-widget>
                        </div>
                        <div *ngSwitchCase="'date'">
                            <date-widget [field]="field" (fieldChanged)="fieldChanged($event);"></date-widget>
                        </div>
                        <div *ngSwitchCase="'amount'">
                            <amount-widget [field]="field" (fieldChanged)="fieldChanged($event);"></amount-widget>
                        </div>
                        <div *ngSwitchDefault>
                            <span>UNKNOWN WIDGET TYPE: {{field.type}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
