<div class="textfield field row"
	 on-enter-or-tab-key="nextField()">
    <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">{{ 'OPTIONAL' | translate }}</span>
	    </h3>
		<p class="col-xs-12">
			<small>{{field.description}}</small>
		</p>
    </div>
    <div class="col-xs-12 field-input">

		<input-stars max="{{field.ratingOptions.steps}}"
					 ng-init="field.fieldValue = 1"
					 on-star-click="$root.nextField()"
					 icon-full="{{field.ratingOptions.shape}}"
					 icon-base="fa fa-3x"
					 icon-empty="{{field.ratingOptions.shape}}"
					 ng-model="field.fieldValue"
					 ng-model-options="{ debounce: 250 }"
					 ng-required="field.required"
					 ng-disabled="field.disabled"
					 on-enter-or-tab-key="nextField()"
					 on-tab-and-shift-key="prevField()"
					 ng-focus="setActiveField(field._id, index, true)"
					 class="angular-input-stars focusOn">
		</input-stars>
    </div>
</div>
