<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">{{ 'OPTIONAL' | translate }}</span>
		</h3>
		<small>{{ 'NEWLINE' | translate }}</small>
		<p>
			<small>{{field.description}}</small>
		</p>
	</div>
	<div class="col-xs-12 field-input">
		<small style="font-size:0.6em;">{{ 'NEWLINE' | translate }}</small>
		<textarea class="textarea focusOn" type="text"
			ng-model="field.fieldValue"
			ng-model-options="{ debounce: 250 }"
			ng-class="{ 'no-border': !!field.fieldValue }"
			value="{{field.fieldValue}}"
			ng-required="field.required"
			ng-disabled="field.disabled"
		    ng-focus="setActiveField(field._id, index, true)"
		    on-enter-or-tab-key="nextField()"
		    on-tab-and-shift-key="prevField()"
			style="border: none; border-left: lightgrey dashed 2px;">
		</textarea>
	</div>
</div>

<div>
	<div class="btn btn-lg btn-default hidden-xs"
		 style="padding: 4px; margin-top:8px; background: rgba(255,255,255,0.5)">
		<button ng-disabled="!field.fieldValue || forms.myForm.{{field.fieldType}}{{$index}}.$invalid"
				ng-style="{'background-color':design.colors.buttonColor, 'color':design.colors.buttonTextColor}"
				ng-click="$root.nextField()"
				class="btn col-sm-5 col-xs-5">

			{{ 'OK' | translate }} <i class="fa fa-check"></i>
		</button>
		<div class="col-sm-3 col-xs-6" style="margin-top:0.2em">
			<small style="color:#ddd; font-size:70%">
				{{ 'ENTER' | translate }}
			</small>
		</div>
	</div>
</div>
