<div
	ng-if="field != null && field != undefined && !customFieldTemplates[field.type]"
	ng-switch="field.type">

	<div ng-switch-when="container" class="form-group">
		<div class="container-control row">
			<div class="col-sm-6" ng-repeat="(colName, colItems) in field.fields">
				<div ng-repeat="item in colItems">
					<form-element field="item"
						custom-field-templates="customFieldTemplates"></form-element>
				</div>
				<div class="clearfix"></div>
			</div>
		</div>
	</div>
	
	<div ng-switch-when="group" class="form-group">
			<h3>{{field.name}}</h3>
			<hr style="width: 100%; height: 1px; background-color: black" />
			<div class="container-control row">
				<div class="col-sm-6"
					ng-repeat="(colName, colItems) in field.fields">
					<div ng-repeat="item in colItems">
						<form-element field="item"
							custom-field-templates="customFieldTemplates"></form-element>
					</div>
					<div class="clearfix"></div>
				</div>
			</div>
			<div class="clearfix"></div>
		</div>

	<div ng-switch-when="readonly"
		ng-if="!customFieldTemplates[field.params.field.type]"
		ng-switch="field.params.field.type">

		<div ng-switch-when="readonly-text" class="form-group">
			<p>{{field.value}}</p>
		</div>

		<div ng-switch-when="text" class="form-group">
			<label class="control-label">{{field.name}}</label> <span
				class="marker" ng-if="field.required">*</span> <input type="text"
				class="form-control" value="{{field.value}}" disabled>
		</div>

		<div ng-switch-when="multi-line-text" class="form-group">
			<label class="control-label">{{field.name}}</label> <span
				class="marker" ng-if="field.required">*</span>
			<textarea rows="4" class="form-control" disabled>{{field.value}}</textarea>
		</div>

		<div ng-switch-when="integer" class="form-group">
			<label class="control-label">{{field.name}}</label> <span
				class="marker" ng-if="field.required">*</span> <input type="text"
				class="form-control"
				value="{{field.value}}" disabled>
		</div>

		<div ng-switch-when="date" class="form-group">
			<label class="control-label"><i
				class="glyphicon glyphicon-calendar"></i> {{field.name}}</label> <span
				class="marker" ng-if="field.required">*</span> <span
				class="control-label" ng-if="field.acceptedFormat">({{field.acceptedFormat}})</span>
			<input type="text" class="form-control"
				value="{{field.value | date}}" disabled>
		</div>

		<div ng-switch-when="boolean" class="form-group">
			<label class="control-label" style="cursor: pointer;"> <input
				type="checkbox" ng-checked="{{field.value}}" disabled> <span>{{field.name}}</span> <span
				class="marker" ng-if="field.required">*</span>
			</label>
		</div>

		<div ng-switch-when="amount" class="form-group">
			<label class="control-label">{{field.name}}</label>
			<div class="input-group amount-field">
				<span class="input-group-addon">{{field.currency || '$'}}</span> <input
					type="text" class="form-control" value="{{field.value}}" disabled>
			</div>
		</div>

		<div ng-switch-when="dropdown" class="form-group">
			<label class="control-label">{{field.name}}</label> <span
				class="marker" ng-if="field.required">*</span> 
			<div class="well well-sm">
                    {{field.value}}
                </div>
		</div>

		<div ng-switch-when="radio-buttons" class="form-group">
			<label class="control-label">{{field.name}}</label> <span
				class="marker" ng-if="field.required">*</span> 
			<div class="well well-sm">
                    {{field.value}}
                </div>
		</div>

		<div ng-switch-when="people" class="readonly">
			<label class="control-label">{{field.name}}</label>
			<span class="marker" ng-if="field.required">*</span>
			<div class="well well-sm">
				<span ng-if="field.value.id">{{field.value.firstName}} {{field.value.lastName}}</span>
				<span ng-if="!field.value.id">{{'' | empty}}</span>
			</div>
		</div>

		<div ng-switch-when="functional-group" class="readonly">
			<label class="control-label">{{field.name}}</label> 
			<span class="marker" ng-if="field.required">*</span>
			<div class="well well-sm">
				<span ng-if="field.value.id">{{field.value.name}}</span> 
				<span ng-if="!field.value.id">{{'' | empty}}</span>
			</div>
		</div>
		
		<div ng-switch-when="group" class="readonly">
			<label class="control-label">{{field.name}}</label> 
			<span class="marker" ng-if="field.required">*</span>
			<div class="well well-sm">
				<span ng-if="field.value.id">{{field.value.name}}</span> 
				<span ng-if="!field.value.id">{{'' | empty}}</span>
			</div>
		</div>
		
		<div ng-switch-when="dynamic-table"
			class="form-group dynamicTableContainer">
			<label class="control-label">{{field.name}}</label> <span
				class="marker" ng-if="field.required">*</span>
			<div class="dynamicTable" ui-grid="gridOptions" ui-grid-auto-resize></div>
			<div class="clearfix"></div>
		</div>

		<div ng-switch-when="upload" class="form-group">
			<label class="control-label">{{field.name}}</label> <span
				class="marker" ng-if="field.required">*</span>
			<div class="well well-sm">
				<span ng-if="field.value.length > 0" ng-repeat="attachement in field.value">{{attachement.name}}</span> 
				<span ng-if="!field.value || field.value.length === 0">{{'' | empty}}</span>
			</div>
		</div>

		<div ng-switch-when="hyperlink" class="form-group">
			<label class="control-label">{{field.name}}</label>
			<div class="message">{{field.hyperlinkUrl}}</div>
		</div>

		<div ng-switch-default class="{{field.className}} readonly">
			<label class="control-label">{{field.name}}</label>
			<div class="well well-sm">
				<span ng-if="field.value !== undefined && field.value !== null && field.value !== ''">{{field.value}}</span>
				<span ng-if="field.value === undefined || field.value === null || field.value === ''">{{'FORM.MESSAGE-EMPTY' | translate}}</span>
			</div>
		</div>
	</div>

	<div
		ng-if="field != null && field != undefined && customFieldTemplates[field.type]">
		<div class="form-group"
			ng-class="{'has-error': field.required && isEmpty(field)}">
			<label class="control-label">{{field.name}}</label> <span
				class="marker" ng-if="field.required">*</span>
			<div compile-html="getHtmlTemplate(field)"></div>
		</div>
	</div>
</div>
