{% extends 'core/page.html' %}
{% load static %}
{% 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' %}
    {% vendor 'fuse' %}

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

    {% for widget in widgets %}
    {% for scss_file in widget.scss_files %}
    <link rel="stylesheet" href="{% static scss_file %}" type="text/x-scss" />
    {% endfor %}
    {% endfor %}
    {% 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>

    {% for widget in widgets %}
    {% for js_file in widget.js_files %}
    <script type="text/javascript" src="{% static js_file %}" ></script>
    {% endfor %}
    {% endfor %}
    {% 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 %}

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

    <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 class="questions" ng-show="service.valuesets"
             ng-repeat="valueset in service.valuesets[service.questionset.id][service.set_prefix] | orderBy:'set_index'">

            <div class="row" ng-show="valueset.set_index == service.set_index">
                <div ng-repeat="element in service.questionset.elements"
                     ng-include src="'element.html'"></div>
            </div>
        </div>

        {% include 'projects/project_questions_buttons.html' %}
    </div>

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

    <script type="text/ng-template" id="element.html">
        {% include 'projects/project_questions_element.html' %}
    </script>

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

{% endblock %}
