<ng-include src="'/intranet/quiz/html/includes/infoboxes/survey_preview_mode.html'"></ng-include>

<div ng-controller="startController">
	<div class="row question-wrapper">
	<div class="col-md-12">
		<h4 class="title" ng-bind="currentSection.title"></h4>
		<h5 class="ng-scope" ng-show="survey.anonymous === '1'" lmsg="survey.status.anonymous">
			<ion-icon class="mr-1 align-middle" name="eye-off-outline"></ion-icon>
			<txt lmsg="quiz.survey.info.anonymous">[You're answering this survey anonymously]</txt>
		</h5>
		<p ng-bind-html="currentSection.description"></p>
		<div ng-repeat="question in currentSection.questions">
			<div class="question-title-wrap row mb-3">
				<div class="col-md-12" ng-class="{'question-unanswered': showValidationError(question.id), 'alert-danger': showValidationError(question.id)}">
					<h5 class="title" ng-bind-html="question.text"></h5>
					<span ng-show="question.is_mandatory" class="question-required">*<span ng-show="showValidationError(question.id)"> <lmsg src="quiz.polls-surveys.question.this_question_is_mandatory">[This question is mandatory]</lmsg></span></span>
					<p name="question-description" class="question-description" ng-bind-html="question.description">[Description]</p>
					<p ng-if="question.img.length > 0">
						<img ng-src="{{question.img}}">
					</p>

					<div ng-if="!isIE">
					<cla-picker-group multiselectable="false">
						<cla-item ng-if="question.type === 0" orientate="vertical" ng-repeat="option in question.options">
							<cla-label hidden="true"><span ng-bind="option.text"></span></cla-label>
							<clang-picker size="large" block="block" name="{{question.id}}" id="{{option.id}}" value="{{option.id}}" ng-checked="isSelectedOption(question.id, option)" ng-click="toggleOption(question.id, option.id)" ng-disabled="beingSubmitted"></clang-picker>
						</cla-item>
					</cla-picker-group>
					</div>

					<!-- IS IE OR EDGE -->
					<div ng-if="question.type === 0 && isIE" ng-repeat="option in question.options" class="radio">
						<label>
							<input type="radio" name="{{question.id}}" id="{{option.id}}" value="{{option.id}}" ng-checked="isSelectedOption(question.id, option)" ng-click="toggleOption(question.id, option.id)"/>
							<span ng-bind="option.text"></span>
						</label>
					</div>

					<div ng-if="!isIE">
					<cla-picker-group multiselectable="true">
						<cla-item ng-if="question.type === 1" orientate="vertical" ng-repeat="option in question.options" class="w-md-50">
							<cla-label hidden="true"><span ng-bind="option.text"></span></cla-label>
							<clang-picker size="large" block="block" name="{{question.id}}" id="{{option.id}}" value="{{option.id}}" ng-checked="isSelectedOption(question.id, option)" ng-click="toggleCheckboxes(question.id, option.id)" ng-disabled="beingSubmitted"></clang-picker>
						</cla-item>
					</cla-picker-group>
					</div>

					<!-- IS IE OR EDGE -->
					<div ng-if="question.type === 1 && isIE" ng-repeat="option in question.options" class="checkbox">
						<label>
							<input type="checkbox" id="{{option.id}}" value="{{option.id}}" ng-checked="isSelectedOption(question.id, option)" ng-click="toggleCheckboxes(question.id, option.id)"/>
							<span ng-bind="option.text"></span>
						</label>
					</div>

					<!-- input -->
					<div ng-if="question.type === 3" ng-repeat="option in question.options">
						<input maxlength="255" type="text" class="form-control w-md-50" id="{{option.id}}" name="{{question.id}}" ng-model="question.answer.properties.response_text" ng-change="saveInputText(question, option)">
					</div>

					<div ng-if="!isIE">
					<cla-picker-group multiselectable="false">
						<cla-item ng-if="question.type === 4" ng-repeat="option in question.options">
							<cla-label hidden="true"><span ng-bind="option.text"></span></cla-label>
							<clang-picker size="large" name="{{question.id}}" id="{{option.id}}" value="{{option.id}}" ng-checked="isSelectedOption(question.id, option)" ng-click="toggleOption(question.id, option.id)" ng-disabled="beingSubmitted"></clang-picker>
						</cla-item>
					</cla-picker-group>
					</div>

					<!-- IS IE OR EDGE -->
					<div ng-if="question.type === 4 && isIE" ng-repeat="option in question.options" class="radio-inline">
						<label >
							<input type="radio" name="{{question.id}}" id="{{option.id}}" value="{{option.id}}" ng-checked="isSelectedOption(question.id, option)" ng-click="toggleOption(question.id, option.id)"/>
							<span ng-bind="option.text"></span>
						</label>
					</div>

					<div ng-if="question.type === 5" ng-repeat="option in question.options">
						<textarea maxlength="3000" class="form-control w-md-75" name="{{question.id}}" id="{{ option.id }}" ng-model="question.answer.properties.response_text" ng-change="saveInputText(question, option)"></textarea>
						<label for="{{ option.id }}">{{ option.text }}</label>
					</div>
				</div>
			</div>
		</div>
		<button ng-if="!isPrevDisabled()" class="btn btn-next-question btn-primary mb-3 mt-3" ng-click="previous(true)" lmsg="quiz.survey.info.previous" ng-disabled="outstandingRequests > 0">[previous]</button>
		<button ng-if="isLastSection || tracker.count === 1" class="btn btn-next-question btn-primary mb-3 mt-3" ng-click="finish(true)" lmsg="quiz.survey.info.finish" ng-disabled="outstandingRequests > 0">[finish & submit]</button>
		<button ng-if="!isLastSection && tracker.count !== 1" class="btn btn-next-question btn-primary mb-3 mt-3" ng-click="next(true)" lmsg="quiz.survey.info.next" ng-disabled="(outstandingRequests > 0) && isNextDisabled()">[next]</button>
	</div>
	</div>
	<hr>

	<!-- nav -->
	<cla-survey-nav survey_id="{{survey_id}}"></cla-survey-nav>

	<!-- allow keyboard shortcuts -->
	<cla-quiz-keyboard bind-to="quiz-wrap"></cla-quiz-keyboard>
</div>
