<div class="field row"
	 ng-click="setActiveField(field._id, index, true)">
    <div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}">
    	<h3>
			<small class="field-number">
				{{index+1}}
				<i class="fa fa-angle-double-right" aria-hidden="true"></i>
			</small>
    		{{field.title}}
    		<span class="required-error" ng-show="!field.required && !field.fieldValue">{{ 'OPTIONAL' | translate }}</span>
    	</h3>
		<p class="col-xs-12">
			<small>{{field.description}}</small>
		</p>
    </div>
    <div class="col-xs-12 field-input">
        <div class="control-group input-append">
            <input class="focusOn"
				   ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}"
				   ng-class="{ 'no-border': !!field.fieldValue }"
				   ui-date="dateOptions"
				   ng-model="field.fieldValue"
				   ng-model-options="{ debounce: 250 }"
				   ng-required="field.required"
				   ng-disabled="field.disabled"
				   placeholder="MM/DD/YYYY"
				   ng-focus="setActiveField(field._id, index, true)"
				   on-tab-key="nextField()"
				   on-tab-and-shift-key="prevField()"
				   ng-change="$root.nextField()">
        </div>
    </div>
</div>
