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

    <div ng-switch-when="text" class="form-group" ng-show="field.isVisible" ng-class="{'has-error': field.required && isEmpty(field)}">
        <label class="control-label">{{field.name}}</label>
        <span class="marker" ng-if="field.required">*</span>
        <input id="{{activitiFieldIdPrefix + field.id}}" type="text" name="{{field.id}}" class="form-control" placeholder="{{field.placeholder}}" ng-model="field.value" ng-change="onFieldValueChange(field)" ng-blur="onFieldBlur(field)" ng-focus="onFieldFocus(field)" ng-required="field.required" ng-minlength="{{field.params.minLength || ''}}" maxlength="{{field.params.maxLength || ''}}" ng-pattern="field.params.regexPattern || ''" ui-mask="{{field.params.mask || ''}}">
    </div>
    
   <div ng-switch-when="password" class="form-group" ng-show="field.isVisible" ng-class="{'has-error': field.required && isEmpty(field)}">
        <label class="control-label">{{field.name}}</label>
        <span class="marker" ng-if="field.required">*</span>
        <div class="input-group" ng-if="field.params.passwordunmask">
        <input id="{{activitiFieldIdPrefix + field.id}}" type="{{field.params.type? 'text' : 'password' }}" name="{{field.id}}" class="form-control" placeholder="{{field.placeholder}}" ng-model="field.value" ng-change="onFieldValueChange(field)" ng-blur="onFieldBlur(field)" ng-focus="onFieldFocus(field)" ng-required="field.required" ng-minlength="{{field.params.minLength || ''}}" maxlength="{{field.params.maxLength || ''}}">
        <span ng-if="field.params.passwordunmask" class="input-group-btn">
        		<button class="btn glyphicon" ng-class="{'glyphicon-eye-open': !field.params.type, 'glyphicon-eye-close': field.params.type }" type="button" ng-click="togglePasswordFieldType(field)"></button>
      	</span>
      	</div>
      	<input id="{{activitiFieldIdPrefix + field.id}}" type="password" name="{{field.id}}" class="form-control" placeholder="{{field.placeholder}}" ng-model="field.value" ng-change="onFieldValueChange(field)" ng-blur="onFieldBlur(field)" ng-focus="onFieldFocus(field)" ng-required="field.required" ng-minlength="{{field.params.minLength || ''}}" maxlength="{{field.params.maxLength || ''}}" ng-if="!field.params.passwordunmask">
    </div>

    <div ng-switch-when="multi-line-text" class="form-group" ng-show="field.isVisible" ng-class="{'has-error': field.required && isEmpty(field)}">
        <label class="control-label">{{field.name}}</label>
        <span class="marker" ng-if="field.required">*</span>
        <textarea id="{{activitiFieldIdPrefix + field.id}}" name="{{field.id}}" class="form-control" placeholder="{{field.placeholder}}" ng-model="field.value" ng-change="onFieldValueChange(field)" ng-blur="onFieldBlur(field)" ng-focus="onFieldFocus(field)" ng-required="field.required" ng-minlength="{{field.params.minLength || ''}}" maxlength="{{field.params.maxLength || ''}}" ng-pattern="field.params.regexPattern || ''" ui-mask="{{field.params.mask || ''}}"></textarea>
    </div>

    <div ng-switch-when="integer" class="form-group" ng-show="field.isVisible" ng-class="{'has-error': field.required && isEmpty(field)}">
        <label class="control-label">{{field.name}}</label>
        <span class="marker" ng-if="field.required">*</span>
        <input id="{{activitiFieldIdPrefix + field.id}}" type="text" name="{{field.id}}" class="form-control" placeholder="{{field.placeholder}}" ng-model="field.value" ng-change="onFieldValueChange(field)" ng-blur="onFieldBlur(field)" ng-focus="onFieldFocus(field)" number-input-check ng-required="field.required" ng-minlength="{{field.params.minLength || ''}}" maxlength="{{field.params.maxLength || ''}}" ng-pattern="field.params.regexPattern || ''" ui-mask="{{field.params.mask || ''}}">
    </div>
    
    <div ng-switch-when="decimal" class="form-group" ng-show="field.isVisible" ng-class="{'has-error': field.required && isEmpty(field)}">
        <label class="control-label">{{field.name}}</label>
        <span class="marker" ng-if="field.required">*</span>
        <input id="{{activitiFieldIdPrefix + field.id}}" type="text" name="{{field.id}}" class="form-control" placeholder="{{field.placeholder}}" ng-model="field.value" ng-change="onFieldValueChange(field)" ng-blur="onFieldBlur(field)" ng-focus="onFieldFocus(field)" decimal-number-input-check ng-required="field.required" ng-minlength="{{field.params.minLength || ''}}" maxlength="{{field.params.maxLength || ''}}" ng-pattern="field.params.regexPattern || ''" ui-mask="{{field.params.mask || ''}}">
    </div>

    <div ng-switch-when="date" class="form-group" ng-show="field.isVisible" ng-class="{'has-error': field.required && isEmpty(field)}">
        <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 id="{{activitiFieldIdPrefix + field.id}}" name="{{field.id}}" type="text" class="form-control " placeholder="{{field.placeholder}}" ng-model="field.value" ng-change="onFieldValueChange(field)" bs-datepicker restrict-input template="{{appResourceRoot}}views/templates/date-picker-template.html" data-container="body" data-date-format="d-M-yyyy" trigger="focus" autoclose="true" ng-required="field.required">
    </div>

    <div ng-switch-when="boolean" class="form-group" ng-show="field.isVisible" ng-class="{'has-error': field.required && isEmpty(field)}">
        <label class="control-label" style="cursor: pointer;">
            <input id="{{activitiFieldIdPrefix + field.id}}" type="checkbox" name="{{field.id}}" ng-model="field.value" ng-change="onFieldValueChange(field)" ng-blur="onFieldBlur(field)" ng-focus="onFieldFocus(field)" ng-required="field.required"> <span>{{field.name}}</span>
            <span class="marker" ng-if="field.required">*</span>
        </label>
    </div>

    <div ng-switch-when="dropdown" class="form-group" ng-show="field.isVisible" ng-class="{'has-error': field.required && isEmptyDropdown(field)}">
        <label class="control-label">{{field.name}}</label>
        <span class="marker" ng-if="field.required">*</span>
        <select id="{{activitiFieldIdPrefix + field.id}}" class="form-control" name="{{field.id}}"
                ng-options="option.name for option in field.options" ng-model="field.value" ng-change="onFieldValueChange(field)" ng-blur="onFieldBlur(field)" ng-focus="onFieldFocus(field)" ng-required="field.required">
            <option style="display:none" value="">{{field.placeholder}}</option>
        </select>
    </div>

    <div ng-switch-when="radio-buttons" class="form-group" ng-if="field.isVisible" ng-class="{'has-error': field.required && isEmpty(field)}">
        <div>
            <label class="control-label">{{field.name}}</label>
            <span class="marker" ng-if="field.required">*</span>
        </div>
        <div id="{{activitiFieldIdPrefix + field.id}}">
            <div ng-repeat="option in field.options" class="radio">
                <label class="control-label">
                    <input id="{{activitiFieldIdPrefix + field.id}}_{{$index}}" type="radio"
                           value="{{option.id ? option.id : option.name}}"
                           name="{{field.id}}"
                           ng-required="field.required"
                           ng-model="field.value"
                           ng-change="onFieldValueChange(field)">
                    {{option.name}}
                    </input>
                </label>
            </div>
        </div>
    </div>

    <div ng-switch-when="people" class="form-group" ng-show="field.isVisible" ng-class="{'has-error': field.required && isEmpty(field)}">
        <label class="control-label">{{field.name}}</label>
        <span class="marker" ng-if="field.required">*</span>
        <div id="{{activitiFieldIdPrefix + field.id}}" class="people-select">
            <ul class="simple-list">
                <li class="action" select-people-popover popover-title="{{field.name}}" placement="bottom-left" on-people-selected="fieldPersonSelected(user, field)"
                    restrict-with-group="field.params.restrictWithGroup" ng-required="field.required">
                    <div ng-if="field.value && field.value.id" user-picture="field.value"></div>
                    <span ng-if="!field.value && !field.placeholder" translate="FORM.MESSAGE.SELECT-PERSON"></span>
                    <span ng-if="!field.value && field.placeholder" translate="{{field.placeholder}}"></span>
                    <div ng-if="field.value && field.value.id" user-link="field.value"></div>
                    <span ng-if="field.value && !field.value.id">{{field.value}}</span>
                    <div class="actions" ng-if="field.value">
                        <a ng-click="fieldPersonRemoved(field.value, field)"><i class="icon icon-remove"></i></a>
                    </div>
                </li>
            </ul>
        </div>
    </div>

    <div ng-switch-when="functional-group" class="form-group" ng-show="field.isVisible" ng-class="{'has-error': field.required && isEmpty(field)}">
        <label class="control-label">{{field.name}}</label>
        <span class="marker" ng-if="field.required">*</span>
        <div id="{{activitiFieldIdPrefix + field.id}}" class="people-select">
            <ul class="simple-list">
                <li class="action" select-functional-group-popover popover-title="{{field.name}}" placement="bottom-left"
                    on-group-selected="fieldGroupSelected(group, field)" restrict-with-group="field.params.restrictWithGroup">
                    <span ng-if="!field.value && !field.placeholder" translate="FORM.MESSAGE.SELECT-GROUP"></span>
                    <span ng-if="!field.value && field.placeholder" translate="{{field.placeholder}}"></span>
                    <div ng-if="field.value && field.value.id && field.value.name">{{field.value.name}}</div>
                    <div class="actions" ng-if="field.value && field.value.id && field.value.name">
                        <a ng-click="fieldGroupRemoved(field.value, field)"><i class="icon icon-remove"></i></a>
                    </div>
                </li>
            </ul>
        </div>
    </div>

    <div ng-switch-when="upload" class="form-group" ng-class="{'has-error' : field.required && isEmpty(field)}" ng-show="field.isVisible">
        <label class="control-label">{{field.name}}</label>
        <span class="marker" ng-if="field.required">*</span>
        <ul class="simple-list" ng-show="model.uploads[field.id].length > 0">
            <li ng-repeat="content in model.uploads[field.id]">
                <i class="icon icon-{{content.simpleType}}"></i>
                {{content.name}}
                <div class="actions">
                    <a ng-click="removeContent(content, field)"><i class="icon icon-remove"></i></a>
                </div>
            </li>
        </ul>
        <div id="{{activitiFieldIdPrefix + field.id}}" external-content link-only="field.params.link"
             on-content-upload="contentUploaded(content, field)"
             on-upload-in-progress="uploadInProgress(status)"
             ng-show="field.params.multiple || (!field.params.multiple && model.uploads[field.id].length != 1)"></div>
    </div>
    
    <div ng-switch-when="hyperlink" class="form-group {{field.className}}" ng-show="field.isVisible">
        <label class="control-label">{{field.name}}</label>
        <div>
             <a id="{{activitiFieldIdPrefix + field.id}}" ng-href="{{field.value}}" target="_blank">{{field.value}}</a>
        </div>
    </div>

	<div ng-switch-when="spacer" class="form-group" ng-show="field.isVisible" >
        <br id="{{activitiFieldIdPrefix + field.id}}" name="{{field.id}}" />
    </div>
	
	<div ng-switch-when="horizontal-line" class="row,form-group" ng-show="field.isVisible" >
		<hr id="{{activitiFieldIdPrefix + field.id}}" name="{{field.id}}" >
    </div>
    
     <div ng-switch-when="headline" class="form-group" ng-show="field.isVisible">
		<h4 id="{{activitiFieldIdPrefix + field.id}}" name="{{field.id}}"><strong>{{field.name}}</strong></h4>
  	</div>

	 <div ng-switch-when="headline-with-line" class="form-group" ng-show="field.isVisible">
		<h4 id="{{activitiFieldIdPrefix + field.id}}" name="{{field.id}}"><strong>{{field.name}}</strong></h4>
		<hr>
	 </div>

    <div ng-switch-when="expression" class="form-group" ng-show="field.isVisible">
    	<div class="well well-sm" ng-style="{'font-size': field.params.size + 'em'}">
    		<div ng-show="!field.value && !field.expression">
    			{{'FORM.MESSAGE.EMPTY' | translate}}
    		</div>
    		<div ng-show="!field.value">
    			{{field.expression}}
    		</div>
    		<div ng-show="field.value">
    			{{field.value}}
    		</div>        	
        </div>
    </div>
</div>

<div ng-if="field != null && field != undefined && field.readOnly" ng-switch="field.type">
    <div ng-switch-when="boolean" ng-show="field.isVisible">
        <label class="checkbox">
            <input type="checkbox" class="checkbox" ng-checked="{{field.value}}" disabled />
            {{field.name}}
        </label>
    </div>

	<div ng-switch-when="people" ng-show="field.isVisible">
        <label class="control-label">{{field.name}}</label>
        <span ng-if="!field.value" translate="FORM.MESSAGE.EMPTY"></span>
        <ul class="simple-list" ng-if="field.value">
            <li>
                <div user-picture="field.value"></div>
                <div user-link="field.value"></div>
            </li>
        </ul>
    </div>
    <div ng-switch-when="functional-group" ng-show="field.isVisible">
        <label class="control-label">{{field.name}}</label>
        <span ng-if="!field.value" translate="FORM.MESSAGE.EMPTY"></span>
        <ul class="simple-list" ng-if="field.value && field.value.name">
            <li>
                <div>{{field.value.name}}</div>
            </li>
        </ul>
    </div>
    <div ng-switch-when="upload" ng-show="field.isVisible">
        <label class="control-label">{{field.name}}</label>
        <span ng-if="!field.value || field.value.length == 0" translate="FORM.MESSAGE.EMPTY"></span>
        <ul class="simple-list selectable content-list">
            <li ng-repeat="content in model.uploads[field.id]" title="{{content.name}}">
                <document-preview content="content" editable="field.params.documentsEditable" read-only="true"></document-preview>
            </li>
        </ul>
        <div class="clearfix"></div>
    </div>

   <div ng-switch-when="hyperlink" class="form-group {{field.className}} readonly" ng-show="field.isVisible">
         <label class="control-label">{{field.name}}</label>
         <div>
             <a ng-href="{{field.params.hyperlinkUrl}}" target="_blank">{{field.params.hyperlinkUrl}}</a>
         </div>
    </div>	
	
    <div ng-switch-when="radio-buttons" class="form-group" ng-show="field.isVisible">
        <label class="control-label">{{field.name}}</label>
        <div class="well well-sm">
            {{field.value && field.value || ('FORM.MESSAGE.EMPTY' | translate)}}
        </div>
    </div>

    <div ng-switch-when="multi-line-text" class="form-group" ng-show="field.isVisible">
        <label class="control-label">{{field.name}}</label>
        <textarea class="form-control" readonly>{{field.value && field.value || ('FORM.MESSAGE.EMPTY' | translate)}}</textarea>
    </div>
    
   	<div ng-switch-when="spacer" class="form-group" ng-show="field.isVisible" >
        <br id="{{activitiFieldIdPrefix + field.id}}" name="{{field.id}}" />
    </div>
	
	<div ng-switch-when="horizontal-line" class="row,form-group" ng-show="field.isVisible" >
		<hr id="{{activitiFieldIdPrefix + field.id}}" name="{{field.id}}" >
    </div>
    
     <div ng-switch-when="headline" class="form-group" ng-show="field.isVisible">
		<h4 id="{{activitiFieldIdPrefix + field.id}}" name="{{field.id}}"><strong>{{field.name}}</strong></h4>
  	</div>

	 <div ng-switch-when="headline-with-line" class="form-group" ng-show="field.isVisible">
		<h4 id="{{activitiFieldIdPrefix + field.id}}" name="{{field.id}}"><strong>{{field.name}}</strong></h4>
		<hr>
	 </div>    
    
    <div ng-switch-when="expression" ng-show="field.isVisible">
        <div class="well well-sm" ng-style="{'font-size': field.params.size + 'em'}">
    		<div ng-show="!field.value && !field.expression">
    			{{'FORM.MESSAGE.EMPTY' | translate}}
    		</div>
    		<div ng-show="!field.value">
    			{{field.expression}}
    		</div>
    		<div ng-show="field.value">
    			{{field.value}}
    		</div>        	
        </div>
    </div>

    <div ng-switch-default ng-show="field.isVisible">
        <label class="control-label">{{field.name}}</label>
        <div class="well well-sm">
            {{field.value && field.value || ('FORM.MESSAGE.EMPTY' | translate)}}
        </div>
    </div>
</div>
