<div class="modal">
    <div class="modal-dialog modal-wide">
        <div class="modal-content">
            <div class="modal-header">
                <h2 ng-if="formElement.type != 'expression'">{{'FORM-BUILDER.POPUP.EDIT-TITLE' | translate: formElement}}</h2>
                <h2 ng-if="formElement.type == 'expression'">{{'FORM-BUILDER.POPUP.EXPRESSION-TITLE' | translate}}</h2>
            </div>
            <div class="modal-body">
                <div class="center-pane">
                    <div class="content">
                        <div class="clearfix">
                            <ul class="tabs clearfix">
                                <li ng-repeat="tab in formTabs" ng-class="{'active': tab.id == activeTab.id}"
                                    ng-if="!tab.show || tab.show.indexOf(formElement.type) >= 0">
                                    <a ng-click="tabClicked(tab)">{{tab.title && (tab.title | translate) || tab.name}}</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="form-group" ng-if="activeTab.id == 'general' && formElement.type != 'expression'">
                    <label translate="FORM-BUILDER.COMPONENT.LABEL"></label>
                    <input type="text" class="form-control" ng-model="formElement.name"
                           ng-change="formElementNameChanged(formElement)" auto-focus>
                </div>

                <div class="clearfix" ng-if="activeTab.id == 'general' && formElement.type != 'expression'">
                    <div class="form-group">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" ng-model="formElement.overrideId">
                                {{'FORM-BUILDER.COMPONENT.OVERRIDEID' | translate}}
                            </label>
                        </div>
                    </div>

                    <div class="form-group">
                        <label translate="FORM-BUILDER.COMPONENT.ID"></label>
                        <input type="text" class="form-control" ng-model="formElement.id" ng-disabled="!formElement.overrideId" editor-input-check>
                    </div>

                    <div ng-show="formElement.type !== 'expression' && formElement.type !== 'hyperlink' && formElement.type !== 'spacer' && formElement.type !== 'horizontal-line' && formElement.type !== 'headline' && formElement.type !== 'headline-with-line'">
                        <div class="row">
                           <div class="form-group col-md-2">
                               <div class="checkbox">
                                   <label>
                                       <input type="checkbox" ng-model="formElement.required">
                                       {{'FORM-BUILDER.COMPONENT.REQUIRED' | translate}}
                                   </label>
                               </div>
                            </div>
                            <div class="form-group col-md-10">
                               <div class="checkbox">
                                   <label>
                                       <input type="checkbox" ng-model="formElement.readOnly">
                                       {{'FORM-BUILDER.COMPONENT.READONLY' | translate}}
                                   </label>
                               </div>                               
                           </div>
                        </div>
                    </div>

                    <div ng-show="formElement.type === 'functional-group' || formElement.type === 'people' || formElement.type === 'dropdown' || formElement.type === 'date' || formElement.type === 'text' || formElement.type === 'password' || formElement.type === 'multi-line-text' || formElement.type === 'integer' || formElement.type === 'decimal'">
                        <label translate="FORM-BUILDER.COMPONENT.PLACEHOLDER"></label>
                        <input type="text" class="form-control" ng-model="formElement.placeholder">
                    </div>
                </div>

                <div ng-if="(activeTab.id == 'options') && (formElement.type === 'radio-buttons' || formElement.type === 'dropdown')">

                    <div class="form-group">
                        <label translate="FORM-BUILDER.COMPONENT.OPTIONS"></label>

                        <div>
                            <div ng-repeat="option in formElement.options" style="margin-bottom: 5px" class="input-group">
                                <div class="input-group-addon">
                                    <input type="radio" ng-disabled="optionsExpressionEnabled" ng-model="formElement.value" ng-value="option.name">
                                </div>

                                <input id="firstDropdownOption" type="text" class="form-control" ng-disabled="optionsExpressionEnabled" ng-if="$index == 0" ng-model="option.name" style="background-color: #E6E6E6;">
                                <input type="text" class="form-control" ng-disabled="optionsExpressionEnabled" ng-if="$index > 0" ng-model="option.name">

                                <a class="input-group-addon" ng-if="$index == 0"
                                   data-placement="left" data-type="info" data-animation="am-fade-and-scale" bs-tooltip="'FORM-BUILDER.COMPONENT.DROPDOWN-EMPTY-VALUE-HELP'|translate">
                                    <i class="glyphicon glyphicon-question-sign"></i>
                                </a>

                                <a class="input-group-addon" ng-disabled="optionsExpressionEnabled" ng-click="removeOption($index)" ng-if="$index > 1"><i class="icon icon-remove"></i></a>
                            </div>

                            <div>
                                <input type="text" class="form-control" placeholder="{{'FORM-BUILDER.COMPONENT.ADD-OPTION' | translate}}" ng-model="newOption.name"
                                       ng-disabled="optionsExpressionEnabled" ng-blur="confirmNewOption($event)" ng-keydown="optionKeyDown($event)">
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" ng-init="optionsExpressionEnabled = formElement.optionsExpression != null && formElement.optionsExpression != ''" ng-model="optionsExpressionEnabled" ng-change="optionsExpressionChanged($event)">
                                {{'FORM-BUILDER.COMPONENT.OPTIONS-EXPRESSION-ENABLED' | translate}}
                            </label>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label translate="FORM-BUILDER.COMPONENT.OPTIONS-EXPRESSION"></label>
                        <textarea rows="3" ng-disabled="!optionsExpressionEnabled" ng-model="formElement.optionsExpression" class="form-control" id="readonly-text-value"></textarea>
                        <div class="subtle" translate="FORM-BUILDER.MESSAGE.OPTIONS-EXPRESSION-HELP" style="padding: 5px 0 5px 1px;"></div>
                    </div>
                    
                </div>

                <div ng-if="activeTab.id == 'upload' && formElement.type === 'upload'">
                    <div class="form-group">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" ng-model="formElement.params.multiple">
                                {{'FORM-BUILDER.COMPONENT.UPLOAD-ALLOW-MULTIPLE' | translate}}
                            </label>
                        </div>
                    </div>
                </div>
                <div ng-if="activeTab.id == 'advanced' && (formElement.type === 'password')">
		     <div class="form-group">
			  <label translate="FORM-BUILDER.COMPONENT.MIN-LENGTH"></label> <input
				 type="text" number-input-check maxlength="5" class="form-control"
				 ng-model="formElement.params.minLength">
		     </div>
		     <div class="form-group">
			  <label translate="FORM-BUILDER.COMPONENT.MAX-LENGTH"></label> <input
			         type="text" number-input-check maxlength="5" class="form-control"
			         ng-model="formElement.params.maxLength">
              </div>
                        <div class="row">
                           <div class="form-group col-md-12">
                               <div class="checkbox">
                                   <label>
                                       <input type="checkbox" ng-model="formElement.params.passwordunmask">
                                       {{'FORM-BUILDER.COMPONENT.PASSWORD-UNMASK-OPTION' | translate}}?
                                   </label>
                               </div>
                            </div>
                        </div>
              </div>
                <div ng-if="activeTab.id == 'advanced' && (formElement.type === 'text' || formElement.type === 'multi-line-text' || formElement.type === 'decimal' || formElement.type === 'integer')">
		     <div class="form-group">
			  <label translate="FORM-BUILDER.COMPONENT.MIN-LENGTH"></label> <input
				 type="text" number-input-check maxlength="5" class="form-control"
				 ng-model="formElement.params.minLength">
		     </div>
		     <div class="form-group">
			  <label translate="FORM-BUILDER.COMPONENT.MAX-LENGTH"></label> <input
			         type="text" number-input-check maxlength="5" class="form-control"
			         ng-model="formElement.params.maxLength">
                     </div>
		     <div class="form-group">
			  <label translate="FORM-BUILDER.COMPONENT.REGEX-PATTERN"></label>
				<div class="input-group">
			            <span class="input-group-addon">/^</span> <input type="text" class="form-control" ng-model="formElement.params.regexPattern">
				    <span class="input-group-addon">$/</span>
				</div>
		    </div>
                    <div class="row">
			<div class="col-md-4">
			    <div class="form-group">
			        <label translate="FORM-BUILDER.COMPONENT.MASK.TITLE"></label>
			        <input type="text" class="form-control" ng-model="formElement.params.mask">
			    </div>
			</div>
			<div class="col-md-4">
			    <div class="form-group">
			        <label translate>FORM-BUILDER.COMPONENT.MASK.EXAMPLES.TITLE</label>
				<ul>
			   	    <li><span translate>FORM-BUILDER.COMPONENT.MASK.EXAMPLES.NUMBER</span>: <b>9</b></li>
				    <li><span translate>FORM-BUILDER.COMPONENT.MASK.EXAMPLES.LETTER</span>: <b>A</b></li>
				    <li><span translate>FORM-BUILDER.COMPONENT.MASK.EXAMPLES.NUMBERORLETTER</span>: <b>*</b></li>
				    <li><span translate>FORM-BUILDER.COMPONENT.MASK.EXAMPLES.OPTIONAL</span>: <b>?</b></li>
				    <li><span translate>FORM-BUILDER.COMPONENT.MASK.EXAMPLES.PHONE</span>: <b>(99) 9999-9999</b></li>
				</ul>
			   </div>
			</div>
		    </div>
		</div>
                
		<div ng-if="activeTab.id == 'advanced' && formElement.type === 'hyperlink'">
		    <div class="form-group">
			<label translate="FORM-BUILDER.COMPONENT.HYPERLINK-URL"></label> <input
			type="text" class="form-control" ng-model="formElement.params.hyperlinkUrl">
		    </div>
		</div>	    
		    
                <div ng-if="activeTab.id == 'general' && formElement.type === 'expression'">
                    <div class="form-group">
                        <label translate="FORM-BUILDER.COMPONENT.EXPRESSION"></label>
                        <textarea rows="3" ng-model="formElement.expression" class="form-control" id="readonly-text-value"></textarea>
                        <div class="subtle" translate="FORM-BUILDER.MESSAGE.EXPRESSION-HELP" style="padding: 5px 0 5px 1px;"></div>
                    </div>
                    <div class="form-group">
                    	<label translate="FORM-BUILDER.COMPONENT.SIZE"></label>
                    	<select class="form-control" ng-model="formElement.params.size">
                        	<option>1</option>
                        	<option>2</option>
                        	<option>3</option>
                        	<option>4</option>
                        	<option>5</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <div class="pull-right">
                    <button type="button" class="btn btn-sm btn-default" ng-click="doneEditing()">
                        {{'GENERAL.ACTION.CLOSE' | translate}}
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
