{% extends 'core/page.html' %}
{% load staticfiles %}
{% load compress %}
{% load i18n %}
{% load core_tags %}

{% block head %}
    <base href="{% url 'project_questions' project.id %}" />

    {% vendor 'angular' %}
    {% vendor 'codemirror' %}
    {% vendor 'moment' %}
    {% vendor 'bootstrap-datepicker' %}

    {% compress css %}
    <link rel="stylesheet" href="{% static 'projects/css/project_questions.scss' %}" type="text/x-scss" />
    {% endcompress %}

    {% compress js %}
    <script type="text/javascript" src="{% static 'core/js/core.js' %}" ></script>
    <script type="text/javascript" src="{% static 'projects/js/project_questions/app.js' %}" ></script>
    <script type="text/javascript" src="{% static 'projects/js/project_questions/directives.js' %}" ></script>
    <script type="text/javascript" src="{% static 'projects/js/project_questions/services.js' %}" ></script>
    <script type="text/javascript" src="{% static 'projects/js/project_questions/controllers.js' %}" ></script>
    {% endcompress %}
{% endblock %}

{% block bodyattr %} ng-app="project_questions" ng-controller="QuestionsController" ng-init="service.init({{ project.id }})" {% endblock %}

{% block sidebar %}

    {% include 'projects/project_questions_sidebar.html' %}

{% endblock %}

{% block page %}

    <h1>
        {% blocktrans %}Questionnaire for project <em>{$ service.project.title $}</em>{% endblocktrans %}
    </h1>

    <div class="project-questions-form" ng-show="service.questionset.id" ng-cloak>

        <h2>
            {$ service.questionset.section.title $} / {$ service.questionset.title $}
        </h2>

        <div class="help-text" ng-bind-html="service.questionset.help"></div>

        <div ng-if="service.questionset.is_collection">
            {% include 'projects/project_questions_questionset_head.html' %}
        </div>

        <div ng-repeat="question in service.questionset.questions" ng-show="service.values">
            {% include 'projects/project_questions_form_group_text.html' %}
            {% include 'projects/project_questions_form_group_textarea.html' %}
            {% include 'projects/project_questions_form_group_yesno.html' %}
            {% include 'projects/project_questions_form_group_radio.html' %}
            {% include 'projects/project_questions_form_group_select.html' %}
            {% include 'projects/project_questions_form_group_date.html' %}
            {% include 'projects/project_questions_form_group_range.html' %}
            {% include 'projects/project_questions_form_group_checkbox.html' %}
        </div>

        <div class="form-group">
            <div class="pull-right" ng-hide="service.project.read_only">
                <button type="button" class="btn btn-default" ng-click="service.save(false)">
                    {% trans 'Save' %}
                </button>
                <button type="button" class="btn btn-primary" ng-click="service.save(true)">
                    {% trans 'Save and proceed' %}</span>
                </button>
            </div>

            <div>
                <button type="button" class="btn btn-default" ng-click="service.prev()" ng-disabled="!service.questionset.prev">
                    {% trans 'Back' %}
                </button>
                <button type="button" class="btn btn-default" ng-click="service.next()" ng-disabled="!service.questionset.next">
                    {% trans 'Skip' %}
                </button>
            </div>
        </div>

        {% include 'projects/project_questions_modal_form_valuesets.html' %}

    </div>

    <div class="project-questions-form" ng-show="service.questionset && !service.questionset.id">
        {% include 'projects/project_questions_done.html' %}
    </div>

    {% include 'projects/project_questions_modal_form_valuesets.html' %}
    {% include 'projects/project_questions_modal_delete_valuesets.html' %}

{% endblock %}
