<div class="form-field" ng-switch="formElement.type" ng-class="{'editing': editState.field == formElement}">

  <div class="actions" ng-show="(!formMode || formMode != 'read')">
    <button class="btn btn-clean" ng-click="openFieldPopover()"><i class="glyphicon glyphicon-pencil"></i></button>
    <button class="btn btn-clean" ng-click="removeFormElement(formElement)"><i class="icon icon-remove"></i></button>
  </div>

  <div ng-switch-when="text" class="form-group">
      <label class="control-label form-field-label">{{formElement.name}}</label><span class="marker" ng-if="formElement.required">*</span>
      <input type="text" class="form-control" style="cursor:default;background-color:#fff;" value="Text" disabled>
  </div>
  
    <div ng-switch-when="password" class="form-group">
      <label class="control-label form-field-label">{{formElement.name}}</label><span class="marker" ng-if="formElement.required">*</span>
      <input type="text" class="form-control" style="cursor:default;background-color:#fff;" value="Password" disabled>
  	</div>

  <div ng-switch-when="multi-line-text" class="form-group">
      <label class="control-label form-field-label">{{formElement.name}}</label><span class="marker" ng-if="formElement.required">*</span>
      <textarea rows="4" class="form-control" style="cursor:default;background-color:#fff;" value="Text" disabled></textarea>
  </div>

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

  <div ng-switch-when="boolean" class="checkbox" style="padding-left:0;">
      <label class="control-label form-field-label"></label>
      <div style="padding-left: 20px;">
          <input type="checkbox" class="checkbox-inline" disabled>{{formElement.name}} <span class="marker" ng-if="formElement.required">*</span>
      </div>
  </div>

  <div ng-switch-when="radio-buttons" class="form-group">
      <label class="control-label form-field-label">{{formElement.name}} <span class="marker" ng-if="formElement.required">*</span></label>
      <div ng-show="formElement.options && formElement.options.length > 0" class="radio" ng-repeat="option in formElement.options">
          <label>
              <input type="radio" name="optionsRadios" id="optionsRadios{{$index}}" value="option{{$index}}" ng-checked="formElement.value == option.name" disabled>{{option.name}}</input>
          </label>
      </div>
      <div ng-show="!formElement.options && formElement.options.length === 0 && !formElement.optionsExpression" class="radio">
          <label>
              <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" disabled>
              Option 1
          </label>
      </div>
      <div ng-show="formElement.optionsExpression" ng-style="{'font-size': '1em'}">
          <label>
              <input type="radio" name="optionsRadios" id="optionsRadios1" value="none" disabled>
                {{formElement.optionsExpression}}
              </input>
          </label>
      </div>
      <div class="clearfix"></div>
  </div>

  <div ng-switch-when="integer" class="form-group">
      <label class="control-label form-field-label">{{formElement.name}} <span class="marker" ng-if="formElement.required">*</span></label>
      <input type="number" class="form-control" style="cursor:default;background-color:#fff;" value="123" disabled>
  </div>
  
  <div ng-switch-when="decimal" class="form-group">
      <label class="control-label form-field-label">{{formElement.name}} <span class="marker" ng-if="formElement.required">*</span></label>
      <input type="number" class="form-control" style="cursor:default;background-color:#fff;" value="123.12" disabled>
  </div>
  
  <div ng-switch-when="dropdown" class="form-group">
    <label class="control-label form-field-label">{{formElement.name}} <span class="marker" ng-if="formElement.required">*</span></label>
    <select class="form-control" style="cursor:default;" disabled>
          <option>Select...</option>
    </select>
  </div>

  <div ng-switch-when="people" class="form-group">
    <label class="control-label form-field-label">{{formElement.name}} <span class="marker" ng-if="formElement.required">*</span></label>
    <div class="input-group">
      <span class="input-group-addon"><i class="icon icon-user-add"></i></span>
      <input type="text" class="form-control" style="cursor:default;background-color:#fff;" placeholder="{{'FORM-BUILDER.LABEL.PERSON' | translate}}" value="{{formElement.placeholder}}" disabled>
    </div>
  </div>

  <div ng-switch-when="functional-group" class="form-group">
    <label class="control-label form-field-label">{{formElement.name}} <span class="marker" ng-if="formElement.required">*</span></label>
    <div class="input-group">
      <span class="input-group-addon"></span>
      <input type="text" class="form-control" style="cursor:default;background-color:#fff;" placeholder="{{'FORM-BUILDER.LABEL.FUNCTIONAL-GROUP' | translate}}" value="{{formElement.placeholder}}" >
    </div>
  </div>

  <div ng-switch-when="upload" class="form-group">
    <label class="control-label form-field-label">{{formElement.name}} <span class="marker" ng-if="formElement.required">*</span></label>
    <div class="input-group clearfix">
      <span class="input-group-addon"><i class="icon icon-folder"></i></span>
      <input type="text" class="form-control" style="cursor:default;background-color:#fff;" value="Upload or import content..." disabled>
    </div>
  </div>

  <div ng-switch-when="hyperlink" class="form-group">
    <label class="control-label form-field-label">{{formElement.name}}<span class="marker" ng-if="formElement.required">*</span></label>
    <div class="message" ng-show="formElement.params.hyperlinkUrl">{{formElement.params.hyperlinkUrl}}</div>
  </div>
  
  <div ng-switch-when="spacer" class="form-group">
	<br />
  </div>
  
  <div ng-switch-when="horizontal-line" class="form-group">
	<hr>
  </div>

  <div ng-switch-when="headline" class="form-group">
	<h4><strong>{{formElement.name}}</strong></h4>
  </div>

  <div ng-switch-when="headline-with-line" class="form-group">
	<h4><strong>{{formElement.name}}</strong></h4>
	<hr>
  </div>

  <div ng-switch-when="expression" class="form-group">
    <div class="message" ng-style="{'font-size': formElement.params.size + 'em'}">
      <div ng-show="formElement.expression && formElement.expression.length > 0">
        {{formElement.expression}}
      </div>
      <div ng-show="!formElement.expression || formElement.expression.length == 0">
      	{{'FORM-BUILDER.MESSAGE.EMPTY-EXPRESSION' | translate}}
      </div>
    </div>
    <div class="clearfix"></div>
  </div>
</div>
