{% extends 'oahpa.html' %}

{% load i18n %}
{% load goal_filters %}
{% load staticfiles %}

{% get_current_language as LANGUAGE_CODE %}

{% block main_js %}{% endblock %}

{% block extrajs %}
    <link rel="stylesheet" type="text/css" href="{% static "css/loading-bar.css" %}"/>
    <link rel="stylesheet" type="text/css" href="{% static "css/bootstrap-theme.css" %}"/>
    <link rel="stylesheet" type="text/css" href="{% static "css/bootstrap_namespaced.css" %}"/>
    <link rel="stylesheet" type="text/css" href="{% static "css/surveys.css" %}"/>

	<script src="{% static "js/angular.min.js" %}"     type="text/javascript"></script>
	<script src="{% static "js/angular-cookies.js" %}" type="text/javascript"></script>
    <script src="{% static "js/loading-bar.min.js" %}" type="text/javascript"></script>
	<script src="{% static "js/surveys.js" %}"         type="text/javascript"></script>
{% endblock %}

{% block page_class %}fixed{% endblock %}
{% block imgprefix %}numra{% endblock %}

{% block content %}
    <div id="surveys" ng-app="Surveys" class="bootstrap-styles">
        <div ng-controller="SurveyClient" ng-source="/{{ URL_PREFIX }}/survey/api/">
            <div class="col-lg-9 col-sm-9 col-md-9">

                <p class="lead" ng-show="!survey">
                    {% blocktrans %}No surveys to fill out at this time.{% endblocktrans %}
                </p>
                {% if redirect %}
                    <a href="{{ redirect }}?survey_done">{% blocktrans %}Return to your course overview.{% endblocktrans %}</a>
                {% endif %}
                <div ng-hide="response">
                    <form novalidate ng-if="survey"
                                     ng-submit="submitForm($event)"
                                     id="new_goal"
                                     target="/{{ URL_PREFIX }}/survey/api/answers/"
                                     role="form">

                        <div class="row">

                            <div class="col-md-1">
                                <span class="step_number">&nbsp;</span>
                            </div>

                            <div class="col-md-11">
                                <h3><% survey.title %></h3>
                                <blockquote><p><% survey.description %></p></blockquote>
                                <div ng-repeat="question in survey.questions">
                                    <div class="form-group">
                                        <label class="required-true" for=""><% question.question_text %></label>

                                        <textarea class="form-control"
                                               ng-if="question.question_type == 'text'"
                                               name="question.question_id"
                                               ng-model="survey_answers[survey.id][question.id]">
                                           </textarea>

                                           <select class="form-control required-true"
                                                id="selectMainType"
                                                name="main_type"
                                                ng-if="question.question_type == 'choice'"
                                                ng-options="a.id as a.answer_text for a in question.answer_values"
                                                ng-model="survey_answers[survey.id][question.id]">
                                            </select>

                                           <div ng-if="question.question_type == 'boolean'">
                                               <label class="radio">
                                                   <input ng-model="survey_answers[survey.id][question.id]" type="radio" value="yes" name="<% survey.id %>-<% question.id %>-radio">
                                                   {% blocktrans %}Yes{% endblocktrans %}
                                               </label>
                                               <label class="radio">
                                                   <input ng-model="survey_answers[survey.id][question.id]" type="radio" value="no" name="<% survey.id %>-<% question.id %>-radio">
                                                   {% blocktrans %}No{% endblocktrans %}
                                               </label>
                                          </div>

                                        <hr />
                                    </div>
                                </div>
                            </div>

                        </div>

                        <div class="row">

                            <div class="col-md-1">
                                <span class="step_number">&nbsp;</span>
                            </div>

                            <div class="col-md-11">
                                <div ng-show="survey">
                                    <button type="button" ng-click="submitForm()" class="btn btn-info">Submit</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>

                <div ng-if="form_success" class="form_success">
                    <h5>Thank you!</h5>
                    <div ng-show="next_survey_button">
                        <blockquote>
                            <p>{% blocktrans %}If you have time for one more survey, you may fill it out by clicking next.{% endblocktrans %}</p>
                            <a href="/{{ URL_PREFIX }}/survey/answer/" class="btn btn-success next-survey">Next &rarr;</a>
                        </blockquote>
                    </div>
                    {% if redirect %}
                        <a href="{{ redirect }}?survey_done">{% blocktrans %}Return to your course overview.{% endblocktrans %}</a>
                    {% endif %}
                </div>

                <div ng-if="form_error || validation_errors" class="form_errors">
                    <h5>Error</h5>
                    <p class="lead error"><% form_error %></p>
                    <ul ng-if="validation_errors.length > 0">
                        <li ng-repeat="error in validation_errors"><% error %></li>
                    </ul>
                </div>

            </div>
        </div>
    </div>

{% endblock %}

{# vim: set ts=4 sw=4 tw=0 syntax=htmldjango : #}