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

{% block head %}
    <base href="{% url 'catalogs' %}" />

    {% vendor 'angular' %}
    {% vendor 'moment' %}
    {% vendor 'select2' %}
    {% vendor 'select2-bootstrap-theme' %}

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

    {% compress js %}
    <script type="text/javascript" src="{% static 'core/js/core.js' %}" ></script>
    <script type="text/javascript" src="{% static 'questions/js/catalogs.js' %}" ></script>
    {% endcompress %}
{% endblock %}

{% block bodyattr %} ng-app="catalogs" ng-controller="CatalogsController"{% endblock %}

{% block sidebar %}

    {% include 'questions/catalogs_sidebar.html' %}

{% endblock %}

{% block page %}

    {% get_available_languages as LANGUAGES %}

    <h1>{% trans 'Questions' %}</h1>

    <h2 ng-cloak>{$ service.catalog.title $}</h2>

    <div ng-repeat="section in service.catalog.sections" ng-cloak>

        <div class="panel panel-default panel-section">
            <div class="panel-heading">
                <div class="pull-right">
                    <span class="fa fa-warning text-warning"
                        title="{% trans 'Some languages are not configured' %}"
                        ng-show="section.warning"></span>

                    {% include 'questions/catalogs_options_sections.html' %}
                </div>
                <strong>{% trans 'Section' %}</strong>
                <span>{$ section.title $}</span>
                <code class="text-primary">{$ section.path $}</code>
            </div>
        </div>

        <div ng-repeat="questionset in section.questionsets | filter: service.filter">

            <div class="panel panel-default panel-questionset">

                <div class="panel-heading">
                    <div class="pull-right">
                        <span class="fa fa-warning text-danger"
                            title="{% trans 'No attribute set' %}"
                            ng-show="questionset.is_collection && !questionset.attribute"></span>
                        <span class="fa fa-warning text-warning"
                            title="{% trans 'Some languages are not configured' %}"
                            ng-show="questionset.warning"></span>

                        {% include 'questions/catalogs_options_questionsets.html' %}
                    </div>

                    <div>
                        <strong>{% trans 'Question set' %}</strong>
                        <span>{$ questionset.title $}</span>
                        <code class="text-primary">{$ questionset.path $}</code>
                        <span ng-show="questionset.is_collection">
                            &#8594;
                            <code>{$ questionset.attribute.path $}</code>
                        </span>
                    </div>
                </div>

                <ul class="list-group" ng-show="questionset.questions">
                    <li class="list-group-item" ng-repeat="question in questionset.questions | filter: service.filter">
                        <div class="pull-right">
                            <span class="fa fa-warning text-danger"
                                title="{% trans 'No attribute set' %}"
                                ng-show="!question.attribute" ></span>
                            <span class="fa fa-warning text-warning"
                                title="{% trans 'Some languages are not configured' %}"
                                ng-show="question.warning" ></span>

                            {% include 'questions/catalogs_options_questions.html' %}
                        </div>
                        <p>
                            <strong>{% trans 'Question' %}</strong>
                            <span>{$ question.text $}</span>
                        </p>
                        <p>
                            <code class="text-primary">{$ question.path $}</code>
                            &#8594;
                            <code ng-show="question.attribute">{$ question.attribute.path $}</code>
                        </p>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    {% include 'questions/catalogs_modal_form_catalogs.html' %}
    {% include 'questions/catalogs_modal_form_sections.html' %}
    {% include 'questions/catalogs_modal_form_questionsets.html' %}
    {% include 'questions/catalogs_modal_form_questions.html' %}

    {% include 'questions/catalogs_modal_delete_catalogs.html' %}
    {% include 'questions/catalogs_modal_delete_sections.html' %}
    {% include 'questions/catalogs_modal_delete_questionsets.html' %}
    {% include 'questions/catalogs_modal_delete_questions.html' %}

{% endblock %}
